diff --git a/packages/core/src/components/alert-controller/alert-controller.tsx b/packages/core/src/components/alert-controller/alert-controller.tsx new file mode 100644 index 0000000000..5a20cc5459 --- /dev/null +++ b/packages/core/src/components/alert-controller/alert-controller.tsx @@ -0,0 +1,68 @@ +import { Component, Listen, Method } from '@stencil/core'; +import { Alert, AlertEvent, AlertOptions } from '../../index'; + + +@Component({ + tag: 'ion-alert-controller' +}) +export class AlertController { + private ids = 0; + private alertResolves: { [alertId: string]: Function } = {}; + private alerts: Alert[] = []; + + @Method() + create(opts?: AlertOptions) { + // create ionic's wrapping ion-alert component + const alert = document.createElement('ion-alert'); + + const id = this.ids++; + + // give this action sheet a unique id + alert.id = `alert-${id}`; + alert.style.zIndex = (20000 + id).toString(); + + // convert the passed in action sheet options into props + // that get passed down into the new action sheet + Object.assign(alert, opts); + + // append the action sheet element to the document body + const appRoot = document.querySelector('ion-app') || document.body; + appRoot.appendChild(alert as any); + + // store the resolve function to be called later up when the action sheet loads + return new Promise(resolve => { + this.alertResolves[alert.id] = resolve; + }); + } + + @Listen('body:ionAlertDidLoad') + protected viewDidLoad(ev: AlertEvent) { + const alert = ev.detail.alert; + const alertResolve = this.alertResolves[alert.id]; + if (alertResolve) { + alertResolve(alert); + delete this.alertResolves[alert.id]; + } + } + + @Listen('body:ionAlertWillPresent') + protected willPresent(ev: AlertEvent) { + this.alerts.push(ev.detail.alert); + } + + @Listen('body:ionAlertWillDismiss, body:ionAlertDidUnload') + protected willDismiss(ev: AlertEvent) { + const index = this.alerts.indexOf(ev.detail.alert); + if (index > -1) { + this.alerts.splice(index, 1); + } + } + + @Listen('body:keyup.escape') + protected escapeKeyUp() { + const lastAlert = this.alerts[this.alerts.length - 1]; + if (lastAlert) { + lastAlert.dismiss(); + } + } +} diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss new file mode 100644 index 0000000000..b6f557fb2e --- /dev/null +++ b/packages/core/src/components/alert/alert.ios.scss @@ -0,0 +1,577 @@ +@import "../../themes/ionic.globals.ios"; +@import "./alert"; + +// iOS Alerts +// -------------------------------------------------- + +/// @prop - Max width of the alert +$alert-ios-max-width: 270px !default; + +/// @prop - Border radius of the alert +$alert-ios-border-radius: 13px !default; + +/// @prop - Background color of the alert +$alert-ios-background: #f8f8f8 !default; + +/// @prop - Box shadow of the alert +$alert-ios-box-shadow: none !default; + +// deprecated +$alert-ios-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-ios-head-padding-top: 12px !default; + +/// @prop - Padding end of the alert head +$alert-ios-head-padding-end: 16px !default; + +/// @prop - Padding bottom of the alert head +$alert-ios-head-padding-bottom: 7px !default; + +/// @prop - Padding start of the alert head +$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; + +/// @prop - Text align of the alert head +$alert-ios-head-text-align: center !default; + +/// @prop - Margin top of the alert title +$alert-ios-title-margin-top: 8px !default; + +/// @prop - Font size of the alert title +$alert-ios-title-font-size: 17px !default; + +/// @prop - Font weight of the alert title +$alert-ios-title-font-weight: 600 !default; + +/// @prop - Font size of the alert sub title +$alert-ios-sub-title-font-size: 14px !default; + +/// @prop - Text color of the alert sub title +$alert-ios-sub-title-text-color: #666 !default; + +// deprecated +$alert-ios-message-padding: null !default; + +/// @prop - Padding top of the alert message +$alert-ios-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-ios-message-padding-end: 16px !default; + +/// @prop - Padding bottom of the alert message +$alert-ios-message-padding-bottom: 21px !default; + +/// @prop - Padding start of the alert message +$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; + + +/// @prop - Font size of the alert message +$alert-ios-message-font-size: 13px !default; + +/// @prop - Text align of the alert message +$alert-ios-message-text-align: center !default; + +/// @prop - Text color of the alert message +$alert-ios-message-text-color: inherit !default; + +// deprecated +$alert-ios-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-ios-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-ios-message-empty-padding-end: 0 !default; + +/// @prop - Padding bottom of the alert empty message +$alert-ios-message-empty-padding-bottom: 12px !default; + +/// @prop - Padding start of the alert empty message +$alert-ios-message-empty-padding-start: 0 !default; + +/// @prop - Maximum height of the alert content +$alert-ios-content-max-height: 240px !default; + +/// @prop - Margin top of the alert input +$alert-ios-input-margin-top: 10px !default; + +// deprecated +$alert-ios-input-padding: null !default; + +/// @prop - Padding top on the alert input +$alert-ios-input-padding-top: 6px !default; + +/// @prop - Padding end on the alert input +$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; + +/// @prop - Padding bottom on the alert input +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; + +/// @prop - Padding start on the alert input +$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; + +/// @prop - Border color of the alert input +$alert-ios-input-border-color: #ccc !default; + +/// @prop - Border of the alert input +$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; + +/// @prop - Border radius of the alert input +$alert-ios-input-border-radius: 4px !default; + +/// @prop - Background color of the alert input +$alert-ios-input-background-color: #fff !default; + +/// @prop - Flex wrap of the alert button group +$alert-ios-button-group-flex-wrap: wrap !default; + +/// @prop - Flex of the alert button +$alert-ios-button-flex: 1 1 auto !default; + +/// @prop - Margin of the alert button +$alert-ios-button-margin: 0 !default; + +/// @prop - Min width of the alert button +$alert-ios-button-min-width: 50% !default; + +/// @prop - Minimum height of the alert button +$alert-ios-button-min-height: 44px !default; + +/// @prop - Font size of the alert button +$alert-ios-button-font-size: 17px !default; + +/// @prop - Color of the text in the alert button +$alert-ios-button-text-color: color($colors-ios, primary) !default; + +/// @prop - Background color of the alert button +$alert-ios-button-background-color: transparent !default; + +/// @prop - Background color of the alert activated button +$alert-ios-button-background-color-activated: #e9e9e9 !default; + +/// @prop - Border width of the alert button +$alert-ios-button-border-width: $hairlines-width !default; + +/// @prop - Border style of the alert button +$alert-ios-button-border-style: solid !default; + +/// @prop - Border color of the alert button +$alert-ios-button-border-color: #dbdbdf !default; + +/// @prop - Border radius of the alert button +$alert-ios-button-border-radius: 0 !default; + +/// @prop - Font weight of the main text on the alert button +$alert-ios-button-main-font-weight: bold !default; + +/// @prop - Border top of the alert list +$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; + +// deprecated +$alert-ios-radio-label-padding: null !default; + +/// @prop - Padding top on the label for the radio alert +$alert-ios-radio-label-padding-top: 13px !default; + +/// @prop - Padding end on the label for the radio alert +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; + +/// @prop - Padding bottom on the label for the radio alert +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; + +/// @prop - Padding start on the label for the radio alert +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; + +/// @prop - Text color of the label for the radio alert +$alert-ios-radio-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked radio alert +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; + +/// @prop - Min width of the radio alert +$alert-ios-radio-min-width: 30px !default; + +/// @prop - Top of the icon in the radio alert +$alert-ios-radio-icon-top: -7px !default; + +// deprecated +$alert-ios-radio-icon-left: 7px !default; +/// @prop - Start of the icon in the radio alert +$alert-ios-radio-icon-start: $alert-ios-radio-icon-left !default; + +/// @prop - Width of the icon in the radio alert +$alert-ios-radio-icon-width: 6px !default; + +/// @prop - Height of the icon in the radio alert +$alert-ios-radio-icon-height: 12px !default; + +/// @prop - Border width of the icon in the radio alert +$alert-ios-radio-icon-border-width: 2px !default; + +/// @prop - Border style of the icon in the radio alert +$alert-ios-radio-icon-border-style: solid !default; + +/// @prop - Border color of the icon in the radio alert +$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; + +/// @prop - Transform of the icon in the radio alert +$alert-ios-radio-icon-transform: rotate(45deg) !default; + +// deprecated +$alert-ios-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; + +/// @prop - Text color of the label for the checkbox in the alert +$alert-ios-checkbox-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked checkbox in the alert +$alert-ios-checkbox-label-text-color-checked: initial !default; + +// deprecated +$alert-ios-checkbox-margin: null !default; + +/// @prop - Margin top of the checkbox in the alert +$alert-ios-checkbox-margin-top: 10px !default; + +/// @prop - Margin end of the checkbox in the alert +$alert-ios-checkbox-margin-end: 6px !default; + +/// @prop - Margin bottom of the checkbox in the alert +$alert-ios-checkbox-margin-bottom: 10px !default; + +/// @prop - Margin start of the checkbox in the alert +$alert-ios-checkbox-margin-start: 16px !default; + +/// @prop - Size of the checkbox in the alert +$alert-ios-checkbox-size: 21px !default; + +/// @prop - Border width of the checkbox in the alert +$alert-ios-checkbox-border-width: $hairlines-width !default; + +/// @prop - Border style of the checkbox in the alert +$alert-ios-checkbox-border-style: solid !default; + +/// @prop - Border radius of the checkbox in the alert +$alert-ios-checkbox-border-radius: 50% !default; + +/// @prop - Border color of the checkbox in the alert when off +$alert-ios-checkbox-border-color-off: $list-ios-border-color !default; + +/// @prop - Border color of the checkbox in the alert when on +$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default; + +/// @prop - Background color of the checkbox in the alert when off +$alert-ios-checkbox-background-color-off: $list-ios-background-color !default; + +/// @prop - Background color of the checkbox in the alert when on +$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default; + +/// @prop - Top of the icon in the checkbox alert +$alert-ios-checkbox-icon-top: 4px !default; + +// deprecated +$alert-ios-checkbox-icon-left: 7px !default; +/// @prop - Start of the icon in the checkbox alert +$alert-ios-checkbox-icon-start: $alert-ios-checkbox-icon-left !default; + +/// @prop - Width of the icon in the checkbox alert +$alert-ios-checkbox-icon-width: 4px !default; + +/// @prop - Height of the icon in the checkbox alert +$alert-ios-checkbox-icon-height: 9px !default; + +/// @prop - Border width of the icon in the checkbox alert +$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; + +/// @prop - Border style of the icon in the checkbox alert +$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; + +/// @prop - Border color of the icon in the checkbox alert +$alert-ios-checkbox-icon-border-color: $background-ios-color !default; + +/// @prop - Transform of the icon in the checkbox alert +$alert-ios-checkbox-icon-transform: rotate(45deg) !default; + + +.alert-ios .alert-wrapper { + @include border-radius($alert-ios-border-radius); + + overflow: hidden; + + max-width: $alert-ios-max-width; + + background-color: $alert-ios-background; + + box-shadow: $alert-ios-box-shadow; +} + + +// iOS Alert Header +// -------------------------------------------------- + +.alert-ios .alert-head { + @include text-align($alert-ios-head-text-align); + + @include deprecated-variable(padding, $alert-ios-head-padding) { + @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start); + } +} + +.alert-ios .alert-title { + @include margin($alert-ios-title-margin-top, null, null, null); + + font-size: $alert-ios-title-font-size; + font-weight: $alert-ios-title-font-weight; +} + +.alert-ios .alert-sub-title { + font-size: $alert-ios-sub-title-font-size; + color: $alert-ios-sub-title-text-color; +} + + +// iOS Alert Message +// -------------------------------------------------- + +.alert-ios .alert-message, +.alert-ios .alert-input-group { + @include text-align($alert-ios-message-text-align); + + font-size: $alert-ios-message-font-size; + color: $alert-ios-message-text-color; + + @include deprecated-variable(padding, $alert-ios-message-padding) { + @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start); + } +} + +.alert-ios .alert-message { + max-height: $alert-ios-content-max-height; +} + +.alert-ios .alert-message:empty { + @include deprecated-variable(padding, $alert-ios-message-padding-empty) { + @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start); + } +} + + +// iOS Alert Input +// -------------------------------------------------- + +.alert-ios .alert-input { + @include appearance(none); + @include margin($alert-ios-input-margin-top, null, null, null); + @include border-radius($alert-ios-input-border-radius); + + border: $alert-ios-input-border; + background-color: $alert-ios-input-background-color; + + @include deprecated-variable(padding, $alert-ios-input-padding) { + @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start); + } +} + + +// iOS Alert Radio/Checkbox Group +// -------------------------------------------------- + +.alert-ios .alert-radio-group, +.alert-ios .alert-checkbox-group { + overflow: scroll; + + max-height: $alert-ios-content-max-height; + + border-top: $alert-ios-list-border-top; + + -webkit-overflow-scrolling: touch; + +} + +.alert-ios .alert-tappable { + display: flex; + + min-height: $alert-ios-button-min-height; +} + + +// iOS Alert Radio Label +// -------------------------------------------------- + +.alert-ios .alert-radio-label { + overflow: hidden; + + flex: 1; + + order: 0; + + text-overflow: ellipsis; + white-space: nowrap; + + color: $alert-ios-radio-label-text-color; + + @include deprecated-variable(padding, $alert-ios-radio-label-padding) { + @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start); + } +} + + +// iOS Alert Radio Label: Checked +// -------------------------------------------------- + +.alert-ios [aria-checked=true] .alert-radio-label { + color: $alert-ios-radio-label-text-color-checked; +} + + +// iOS Alert Radio Checkmark: Unchecked +// ----------------------------------------- + +.alert-ios .alert-radio-icon { + position: relative; + + order: 1; + + min-width: $alert-ios-radio-min-width; +} + + +// iOS Alert Radio Checked +// ----------------------------------------- + +.alert-ios [aria-checked=true] .alert-radio-inner { + @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start); + + position: absolute; + + width: $alert-ios-radio-icon-width; + height: $alert-ios-radio-icon-height; + + border-width: $alert-ios-radio-icon-border-width; + border-top-width: 0; + border-left-width: 0; + border-style: $alert-ios-radio-icon-border-style; + border-color: $alert-ios-radio-icon-border-color; + transform: $alert-ios-radio-icon-transform; +} + + +// iOS Alert Checkbox Label +// -------------------------------------------------- + +.alert-ios .alert-checkbox-label { + overflow: hidden; + + flex: 1; + + text-overflow: ellipsis; + white-space: nowrap; + + color: $alert-ios-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-ios-checkbox-label-padding) { + @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start); + } +} + +.alert-ios [aria-checked=true] .alert-checkbox-label { + color: $alert-ios-checkbox-label-text-color-checked; +} + +// iOS Alert Checkbox Outer Circle: Unchecked +// ----------------------------------------- + +.alert-ios .alert-checkbox-icon { + @include border-radius($alert-ios-checkbox-border-radius); + + position: relative; + + width: $alert-ios-checkbox-size; + height: $alert-ios-checkbox-size; + + border-width: $alert-ios-checkbox-border-width; + border-style: $alert-ios-checkbox-border-style; + border-color: $alert-ios-checkbox-border-color-off; + background-color: $alert-ios-checkbox-background-color-off; + + @include deprecated-variable(margin, $alert-ios-checkbox-margin) { + @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start); + } +} + + +// iOS Alert Checkbox Outer Circle: Checked +// ----------------------------------------- + +.alert-ios [aria-checked=true] .alert-checkbox-icon { + border-color: $alert-ios-checkbox-border-color-on; + background-color: $alert-ios-checkbox-background-color-on; +} + + +// iOS Alert Checkbox Inner Checkmark: Checked +// ----------------------------------------- + +.alert-ios [aria-checked=true] .alert-checkbox-inner { + @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start); + + position: absolute; + + width: $alert-ios-checkbox-icon-width; + height: $alert-ios-checkbox-icon-height; + + border-width: $alert-ios-checkbox-icon-border-width; + border-top-width: 0; + border-left-width: 0; + border-style: $alert-ios-checkbox-icon-border-style; + border-color: $alert-ios-checkbox-icon-border-color; + transform: $alert-ios-checkbox-icon-transform; +} + + +// iOS Alert Button +// -------------------------------------------------- + +.alert-ios .alert-button-group { + @include margin-horizontal(null, -$alert-ios-button-border-width); + + flex-wrap: $alert-ios-button-group-flex-wrap; +} + +.alert-ios .alert-button { + @include margin($alert-ios-button-margin); + @include border-radius($alert-ios-button-border-radius); + + overflow: hidden; + + flex: $alert-ios-button-flex; + + min-width: $alert-ios-button-min-width; + height: $alert-ios-button-min-height; + + border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; + border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; + font-size: $alert-ios-button-font-size; + color: $alert-ios-button-text-color; + background-color: $alert-ios-button-background-color; +} + +.alert-ios .alert-button:last-child { + border-right: 0; + font-weight: $alert-ios-button-main-font-weight; +} + +.alert-ios .alert-button.activated { + background-color: $alert-ios-button-background-color-activated; +} diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss new file mode 100644 index 0000000000..dc4ed3ecbf --- /dev/null +++ b/packages/core/src/components/alert/alert.md.scss @@ -0,0 +1,623 @@ +@import "../../themes/ionic.globals.md"; +@import "./alert"; + +// Material Design Alerts +// -------------------------------------------------- + +/// @prop - Max width of the alert +$alert-md-max-width: 280px !default; + +/// @prop - Border radius of the alert +$alert-md-border-radius: 2px !default; + +/// @prop - Background color of the alert +$alert-md-background-color: #fafafa !default; + +/// @prop - Box shadow color of the alert +$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; + +/// @prop - Box shadow of the alert +$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default; + +// deprecated +$alert-md-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-md-head-padding-top: 24px !default; + +/// @prop - Padding end of the alert head +$alert-md-head-padding-end: 24px !default; + +/// @prop - Padding bottom of the alert head +$alert-md-head-padding-bottom: 20px !default; + +/// @prop - Padding start of the alert head +$alert-md-head-padding-start: 24px !default; + + +/// @prop - Text align of the alert head +$alert-md-head-text-align: start !default; + +/// @prop - Font size of the alert title +$alert-md-title-font-size: 22px !default; + +/// @prop - Font size of the alert sub title +$alert-md-sub-title-font-size: 16px !default; + +// deprecated +$alert-md-message-padding: null !default; + +/// @prop - Padding top of the alert message +$alert-md-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-md-message-padding-end: 24px !default; + +/// @prop - Padding bottom of the alert message +$alert-md-message-padding-bottom: 24px !default; + +/// @prop - Padding start of the alert message +$alert-md-message-padding-start: 24px !default; + +/// @prop - Font size of the alert message +$alert-md-message-font-size: 15px !default; + +/// @prop - Text color of the alert message +$alert-md-message-text-color: rgba(0, 0, 0, .5) !default; + +// deprecated +$alert-md-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-md-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; + +/// @prop - Padding bottom of the alert empty message +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; + +/// @prop - Padding start of the alert empty message +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; + +/// @prop - Maximum height of the alert content +$alert-md-content-max-height: 240px !default; + +/// @prop - Border width of the alert input +$alert-md-input-border-width: 1px !default; + +/// @prop - Border style of the alert input +$alert-md-input-border-style: solid !default; + +/// @prop - Border color of the alert input +$alert-md-input-border-color: #dedede !default; + +/// @prop - Text color of the alert input +$alert-md-input-text-color: #000 !default; + +/// @prop - Border width of the alert input when focused +$alert-md-input-border-width-focused: 2px !default; + +/// @prop - Border style of the alert input when focused +$alert-md-input-border-style-focused: $alert-md-input-border-style !default; + +/// @prop - Border color of the alert input when focused +$alert-md-input-border-color-focused: color($colors-md, primary) !default; + +/// @prop - Margin top of the alert input +$alert-md-input-margin-top: 5px !default; + +// deprecated +$alert-md-input-margin-right: 0 !default; +/// @prop - Margin end of the alert input +$alert-md-input-margin-end: $alert-md-input-margin-right !default; + +/// @prop - Margin bottom of the alert input +$alert-md-input-margin-bottom: 5px !default; + +// deprecated +$alert-md-input-margin-left: 0 !default; +/// @prop - Margin start of the alert input +$alert-md-input-margin-start: $alert-md-input-margin-left !default; + +/// @prop - Flex wrap of the alert button group +$alert-md-button-group-flex-wrap: wrap-reverse !default; + +// deprecated +$alert-md-button-group-padding: null !default; + +/// @prop - Padding top of the alert button group +$alert-md-button-group-padding-top: 8px !default; + +/// @prop - Padding end of the alert button group +$alert-md-button-group-padding-end: 8px !default; + +/// @prop - Padding bottom of the alert button group +$alert-md-button-group-padding-bottom: 8px !default; + +/// @prop - Padding start of the alert button group +$alert-md-button-group-padding-start: 24px !default; + +/// @prop - Justify content of the alert button group +$alert-md-button-group-justify-content: flex-end !default; + +// deprecated +$alert-md-button-padding: null !default; + +/// @prop - Padding top of the alert button +$alert-md-button-padding-top: 10px !default; + +/// @prop - Padding end of the alert button +$alert-md-button-padding-end: $alert-md-button-padding-top !default; + +/// @prop - Padding bottom of the alert button +$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; + +/// @prop - Padding start of the alert button +$alert-md-button-padding-start: $alert-md-button-padding-end !default; + +// deprecated +$alert-md-button-margin: null !default; + +/// @prop - Margin top of the alert button +$alert-md-button-margin-top: 0 !default; + +/// @prop - Margin end of the alert button +$alert-md-button-margin-end: 8px !default; + +/// @prop - Margin bottom of the alert button +$alert-md-button-margin-bottom: 0 !default; + +/// @prop - Margin start of the alert button +$alert-md-button-margin-start: 0 !default; + +/// @prop - Font weight of the alert button +$alert-md-button-font-weight: 500 !default; + +/// @prop - Text color of the alert button +$alert-md-button-text-color: color($colors-md, primary) !default; + +/// @prop - Background color of the alert button +$alert-md-button-background-color: transparent !default; + +/// @prop - Background color of the alert activated button +$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default; + +/// @prop - Border radius of the alert button +$alert-md-button-border-radius: 2px !default; + +/// @prop - Text transform of the alert button +$alert-md-button-text-transform: uppercase !default; + +/// @prop - Text align of the alert button +$alert-md-button-text-align: end !default; + + +/// @prop - Border top of the alert list +$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; + +/// @prop - Border bottom of the alert list +$alert-md-list-border-bottom: $alert-md-list-border-top !default; + +// deprecated +$alert-md-radio-label-padding: null !default; + +/// @prop - Padding top on the label for the radio alert +$alert-md-radio-label-padding-top: 13px !default; + +/// @prop - Padding end on the label for the radio alert +$alert-md-radio-label-padding-end: 26px !default; + +/// @prop - Padding bottom on the label for the radio alert +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; + +/// @prop - Padding start on the label for the radio alert +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default; + +/// @prop - Text color of the label for the radio alert +$alert-md-radio-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked radio alert +$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default; + +/// @prop - Top of the alert radio +$alert-md-radio-top: 0 !default; + +/// @prop - Left of the alert radio +$alert-md-radio-left: 13px !default; + +/// @prop - Width of the alert radio +$alert-md-radio-width: 16px !default; + +/// @prop - Height of the alert radio +$alert-md-radio-height: 16px !default; + +/// @prop - Border width of the alert radio +$alert-md-radio-border-width: 2px !default; + +/// @prop - Border style of the alert radio +$alert-md-radio-border-style: solid !default; + +/// @prop - Border radius of the alert radio +$alert-md-radio-border-radius: 50% !default; + +/// @prop - Border color of the alert radio when off +$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Border color of the alert radio when on +$alert-md-radio-border-color-on: $alert-md-button-text-color !default; + +/// @prop - Top of the icon in the alert radio +$alert-md-radio-icon-top: 2px !default; + +// deprecated +$alert-md-radio-icon-left: 2px !default; +/// @prop - Start of the icon in the radio alert +$alert-md-radio-icon-start: $alert-md-radio-icon-left !default; + +/// @prop - Width of the icon in the alert radio +$alert-md-radio-icon-width: 8px !default; + +/// @prop - Height of the icon in the alert radio +$alert-md-radio-icon-height: 8px !default; + +/// @prop - Border radius of the icon in the alert radio +$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; + +/// @prop - Transform of the icon in the alert radio when off +$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; + +/// @prop - Transform of the icon in the alert radio when on +$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; + +/// @prop - Transition of the icon in the alert radio +$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; + +// deprecated +$alert-md-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default; + +/// @prop - Text color of the label for the checkbox in the alert +$alert-md-checkbox-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked checkbox in the alert +$alert-md-checkbox-label-text-color-checked: initial !default; + + +/// @prop - Top of the checkbox in the alert +$alert-md-checkbox-top: 0 !default; + +/// @prop - Left of the checkbox in the alert +$alert-md-checkbox-left: 13px !default; + +/// @prop - Width of the checkbox in the alert +$alert-md-checkbox-width: 16px !default; + +/// @prop - Height of the checkbox in the alert +$alert-md-checkbox-height: 16px !default; + +/// @prop - Border width of the checkbox in the alert +$alert-md-checkbox-border-width: 2px !default; + +/// @prop - Border style of the checkbox in the alert +$alert-md-checkbox-border-style: solid !default; + +/// @prop - Border radius of the checkbox in the alert +$alert-md-checkbox-border-radius: 2px !default; + +/// @prop - Border color of the checkbox in the alert when off +$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Border color of the checkbox in the alert when on +$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; + + +/// @prop - Top of the icon in the checkbox alert +$alert-md-checkbox-icon-top: 0 !default; + +// deprecated +$alert-md-checkbox-icon-left: 3px !default; +/// @prop - Start of the icon in the checkbox alert +$alert-md-checkbox-icon-start: $alert-md-checkbox-icon-left !default; + +/// @prop - Width of the icon in the checkbox alert +$alert-md-checkbox-icon-width: 6px !default; + +/// @prop - Height of the icon in the checkbox alert +$alert-md-checkbox-icon-height: 10px !default; + +/// @prop - Border width of the icon in the checkbox alert +$alert-md-checkbox-icon-border-width: 2px !default; + +/// @prop - Border style of the icon in the checkbox alert +$alert-md-checkbox-icon-border-style: solid !default; + +/// @prop - Border color of the icon in the checkbox alert +$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default; + +/// @prop - Transform of the icon in the checkbox alert +$alert-md-checkbox-icon-transform: rotate(45deg) !default; + +.alert-md .alert-wrapper { + @include border-radius($alert-md-border-radius); + + max-width: $alert-md-max-width; + + background-color: $alert-md-background-color; + + box-shadow: $alert-md-box-shadow; +} + +// Material Design Alert Header +// -------------------------------------------------- + +.alert-md .alert-head { + @include text-align($alert-md-head-text-align); + + @include deprecated-variable(padding, $alert-md-head-padding) { + @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start); + } +} + +.alert-md .alert-title { + font-size: $alert-md-title-font-size; +} + +.alert-md .alert-sub-title { + font-size: $alert-md-sub-title-font-size; +} + + +// Material Design Alert Message +// -------------------------------------------------- + +.alert-md .alert-message, +.alert-md .alert-input-group { + color: $alert-md-message-text-color; + + @include deprecated-variable(padding, $alert-md-message-padding) { + @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start); + } +} + +.alert-md .alert-message { + max-height: $alert-md-content-max-height; + + font-size: $alert-md-message-font-size; +} + +.alert-md .alert-message:empty { + @include deprecated-variable(padding, $alert-md-message-padding-empty) { + @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start); + } +} + + +// Material Design Alert Input +// -------------------------------------------------- + +.alert-md .alert-input { + @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); + + border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color; + color: $alert-md-input-text-color; +} + +.alert-md .alert-input:focus { + @include margin(null, null, $alert-md-input-margin-bottom - 1, null); + + border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused; +} + + +// Material Design Alert Radio/Checkbox Group +// -------------------------------------------------- + +.alert-md .alert-radio-group, +.alert-md .alert-checkbox-group { + position: relative; + overflow: auto; + + max-height: $alert-md-content-max-height; + + border-top: $alert-md-list-border-top; + border-bottom: $alert-md-list-border-bottom; +} + +.alert-md .alert-tappable { + position: relative; + display: flex; + + overflow: hidden; + + // TODO this should be a variable that matches item + min-height: 4.4rem; +} + + +// Material Design Alert Radio +// -------------------------------------------------- + +.alert-md .alert-radio-label { + overflow: hidden; + + flex: 1; + + text-overflow: ellipsis; + white-space: nowrap; + + color: $alert-md-radio-label-text-color; + + @include deprecated-variable(padding, $alert-md-radio-label-padding) { + @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start); + } +} + +// Material Design Alert Radio Unchecked Circle +// --------------------------------------------------- + +.alert-md .alert-radio-icon { + @include position($alert-md-radio-top, null, null, $alert-md-radio-left); + @include border-radius($alert-md-radio-border-radius); + + position: relative; + display: block; + + width: $alert-md-radio-width; + height: $alert-md-radio-height; + + border-width: $alert-md-radio-border-width; + border-style: $alert-md-radio-border-style; + border-color: $alert-md-radio-border-color-off; +} + +// Material Design Alert Radio Checked Dot +// --------------------------------------------------- + +.alert-md .alert-radio-inner { + @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start); + @include border-radius($alert-md-radio-icon-border-radius); + + position: absolute; + + width: $alert-md-radio-icon-width; + height: $alert-md-radio-icon-height; + + background-color: $alert-md-radio-border-color-on; + transform: $alert-md-radio-icon-transform-off; + transition: $alert-md-radio-icon-transition; +} + + +// Material Design Alert Radio Checked +// --------------------------------------------------- + +.alert-md [aria-checked=true] .alert-radio-label { + color: $alert-md-radio-label-text-color-checked; +} + +.alert-md [aria-checked=true] .alert-radio-icon { + border-color: $alert-md-radio-border-color-on; +} + +.alert-md [aria-checked=true] .alert-radio-inner { + transform: $alert-md-radio-icon-transform-on; +} + + +// Material Design Alert Checkbox Label +// -------------------------------------------------- + +.alert-md .alert-checkbox-label { + overflow: hidden; + + flex: 1; + + text-overflow: ellipsis; + white-space: nowrap; + + color: $alert-md-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-md-checkbox-label-padding) { + @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start); + } +} + +.alert-md [aria-checked=true] .alert-checkbox-label { + color: $alert-md-checkbox-label-text-color-checked; +} + +// Material Design Alert Checkbox Outline: Unchecked +// -------------------------------------------------- + +.alert-md .alert-checkbox-icon { + @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left); + @include border-radius($alert-md-checkbox-border-radius); + + position: relative; + + width: $alert-md-checkbox-width; + height: $alert-md-checkbox-height; + + border-width: $alert-md-checkbox-border-width; + border-style: $alert-md-checkbox-border-style; + border-color: $alert-md-checkbox-border-color-off; +} + +// Material Design Alert Checkbox Checkmark: Checked +// -------------------------------------------------- + +.alert-md [aria-checked=true] .alert-checkbox-icon { + border-color: $alert-md-checkbox-border-color-on; + background-color: $alert-md-checkbox-border-color-on; +} + +.alert-md [aria-checked=true] .alert-checkbox-inner { + @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start); + + position: absolute; + + width: $alert-md-checkbox-icon-width; + height: $alert-md-checkbox-icon-height; + + border-width: $alert-md-checkbox-icon-border-width; + border-top-width: 0; + border-left-width: 0; + border-style: $alert-md-checkbox-icon-border-style; + border-color: $alert-md-checkbox-icon-border-color; + transform: $alert-md-checkbox-icon-transform; +} + + +// Material Design Alert Button +// -------------------------------------------------- + +.alert-md .alert-button-group { + flex-wrap: $alert-md-button-group-flex-wrap; + justify-content: $alert-md-button-group-justify-content; + + @include deprecated-variable(padding, $alert-md-button-group-padding) { + @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start); + } +} + +.alert-md .alert-button { + @include text-align($alert-md-button-text-align); + @include border-radius($alert-md-button-border-radius); + + // necessary for ripple to work properly + position: relative; + overflow: hidden; + + font-weight: $alert-md-button-font-weight; + text-transform: $alert-md-button-text-transform; + color: $alert-md-button-text-color; + background-color: $alert-md-button-background-color; + + @include deprecated-variable(margin, $alert-md-button-margin) { + @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start); + } + + @include deprecated-variable(padding, $alert-md-button-padding) { + @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start); + } +} + +.alert-md .alert-button.activated { + background-color: $alert-md-button-background-color-activated; +} + +.alert-md .alert-button .button-inner { + justify-content: $alert-md-button-group-justify-content; +} diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss new file mode 100644 index 0000000000..fd995fc9b8 --- /dev/null +++ b/packages/core/src/components/alert/alert.scss @@ -0,0 +1,121 @@ +@import "../../themes/ionic.globals"; + +// Alerts +// -------------------------------------------------- + +/// @prop - Minimum width of the alert +$alert-min-width: 250px !default; + +/// @prop - Maximum height of the alert +$alert-max-height: 90% !default; + +/// @prop - Line height of the alert button +$alert-button-line-height: 20px !default; + +/// @prop - Font size of the alert button +$alert-button-font-size: 14px !default; + +/// @prop - Color of the alert input placeholder +$alert-input-placeholder-color: #999 !default; + + +ion-alert { + @include position(0, 0, 0, 0); + + position: absolute; + + z-index: $z-index-overlay; + + display: flex; + + align-items: center; + justify-content: center; + + contain: strict; +} + +ion-alert.alert-top { + @include padding(50px, null, null, null); + + align-items: flex-start; +} + +ion-alert input { + width: 100%; +} + +.alert-wrapper { + z-index: $z-index-overlay-wrapper; + display: flex; + + flex-direction: column; + + min-width: $alert-min-width; + max-height: $alert-max-height; + + opacity: 0; + + contain: content; +} + +.alert-title { + @include margin(0); + @include padding(0); +} + +.alert-sub-title { + @include margin(5px, 0, 0); + @include padding(0); + + font-weight: normal; +} + +.alert-message { + overflow-y: scroll; + + -webkit-overflow-scrolling: touch; +} + +.alert-input { + @include placeholder($alert-input-placeholder-color); + @include padding(10px, 0); + + border: 0; + background: inherit; +} + +.alert-button-group { + display: flex; + + flex-direction: row; + + width: 100%; +} + +.alert-button-group-vertical { + flex-direction: column; + flex-wrap: nowrap; +} + +.alert-button { + @include margin(0); + + z-index: 0; + display: block; + + font-size: $alert-button-font-size; + line-height: $alert-button-line-height; +} + +.alert-tappable { + @include text-align(start); + @include appearance(none); + @include margin(0); + @include padding(0); + + width: 100%; + + font-size: inherit; + line-height: initial; + background: transparent; +} diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx new file mode 100644 index 0000000000..75cd62f575 --- /dev/null +++ b/packages/core/src/components/alert/alert.tsx @@ -0,0 +1,389 @@ + +import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core'; +import { AnimationBuilder, Animation, AnimationController, Config } from '../../index'; + +import iOSEnterAnimation from './animations/ios.enter'; +import iOSLeaveAnimation from './animations/ios.leave'; + +@Component({ + tag: 'ion-alert', + styleUrls: { + ios: 'alert.ios.scss', + md: 'alert.md.scss', + wp: 'alert.wp.scss' + }, + host: { + theme: 'alert' + } +}) +export class Alert { + private animation: Animation; + + @Element() private el: HTMLElement; + + @Event() private ionAlertDidLoad: EventEmitter; + @Event() private ionAlertDidPresent: EventEmitter; + @Event() private ionAlertWillPresent: EventEmitter; + @Event() private ionAlertWillDismiss: EventEmitter; + @Event() private ionAlertDidDismiss: EventEmitter; + @Event() private ionAlertDidUnload: EventEmitter; + + @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; + @Prop({ context: 'config' }) config: Config; + + @Prop() cssClass: string; + @Prop() title: string; + @Prop() subTitle: string; + @Prop() message: string; + @Prop() buttons: AlertButton[] = []; + @Prop() inputs: AlertInput[] = []; + @Prop() enableBackdropDismiss: boolean = true; + + @Prop() enterAnimation: AnimationBuilder; + @Prop() exitAnimation: AnimationBuilder; + @Prop() id: string; + + present() { + return new Promise(resolve => { + this._present(resolve); + }); + } + + private _present(resolve: Function) { + if (this.animation) { + this.animation.destroy(); + this.animation = null; + } + this.ionAlertWillPresent.emit({ alert: this }); + + // get the user's animation fn if one was provided + let animationBuilder = this.enterAnimation; + + if (!animationBuilder) { + // user did not provide a custom animation fn + // decide from the config which animation to use + animationBuilder = iOSEnterAnimation; + } + + // build the animation and kick it off + this.animationCtrl.create(animationBuilder, this.el).then(animation => { + this.animation = animation; + + animation.onFinish((a: any) => { + a.destroy(); + this.ionViewDidEnter(); + resolve(); + }).play(); + }); + } + + dismiss() { + if (this.animation) { + this.animation.destroy(); + this.animation = null; + } + return new Promise(resolve => { + this.ionAlertWillDismiss.emit({ alert: this }); + + // get the user's animation fn if one was provided + let animationBuilder = this.exitAnimation; + if (!animationBuilder) { + // user did not provide a custom animation fn + // decide from the config which animation to use + animationBuilder = iOSLeaveAnimation; + } + + // build the animation and kick it off + this.animationCtrl.create(animationBuilder, this.el).then(animation => { + this.animation = animation; + + animation.onFinish((a: any) => { + a.destroy(); + this.ionAlertDidDismiss.emit({ alert: this }); + + Context.dom.write(() => { + this.el.parentNode.removeChild(this.el); + }); + + resolve(); + }).play(); + }); + }); + } + + + protected ionViewDidUnload() { + this.ionAlertDidUnload.emit({ alert: this }); + } + + @Listen('ionDismiss') + protected onDismiss(ev: UIEvent) { + ev.stopPropagation(); + ev.preventDefault(); + + this.dismiss(); + } + + protected ionViewDidLoad() { + this.ionAlertDidLoad.emit({ alert: this }); + } + + protected ionViewDidEnter() { + this.ionAlertDidPresent.emit({ loading: this }); + } + + protected backdropClick() { + if (this.enableBackdropDismiss) { + // const opts: NavOptions = { + // minClickBlockDuration: 400 + // }; + this.dismiss(); + } + } + + rbClick(button: any) { + console.log('rbClick', button); + // if (this.enabled) { + // this.d.inputs.forEach(input => { + // input.checked = (button === input); + // }); + // this.activeId = button.id; + + // if (button.handler) { + // button.handler(button); + // } + // } + } + + cbClick(button: any) { + console.log('cbClick', button); + // if (this.enabled) { + // button.checked = !button.checked; + + // if (button.handler) { + // button.handler(button); + // } + // } + } + + btnClick(button: any) { + console.log('btnClick', button); + + // if (!this.enabled) { + // return; + // } + + // keep the time of the most recent button click + // this.lastClick = Date.now(); + + let shouldDismiss = true; + + if (button.handler) { + // a handler has been provided, execute it + // pass the handler the values from the inputs + // if (button.handler(this.getValues()) === false) { + // // if the return value of the handler is false then do not dismiss + // shouldDismiss = false; + // } + } + + if (shouldDismiss) { + this.dismiss(); + } + } + + buttonClass(button: AlertButton): CssClassMap { + let buttonClass: string[] = !button.cssClass + ? ['alert-button'] + : [`alert-button`, `${button.cssClass}`]; + + return buttonClass.reduce((prevValue: any, cssClass: any) => { + prevValue[cssClass] = true; + return prevValue; + }, {}); + } + + renderCheckbox(inputs: AlertInput[]) { + if (inputs.length === 0) return null; + + return ( +
+ { inputs.map(i => ( + + ))} +
+ ); + } + + renderRadio(inputs: AlertInput[]) { + const hdrId = 'TODO'; + const activeId = 'TODO'; + + if (inputs.length === 0) return null; + + return ( +
+ { inputs.map(i => ( + + ))} +
+ ); + } + + renderInput(inputs: AlertInput[]) { + if (inputs.length === 0) return null; + + return ( +
+ { inputs.map(i => ( +
+ +
+ ))} +
+ ); + } + + protected render() { + const hdrId = 'TODO'; + const subHdrId = 'TODO'; + const msgId = 'TODO'; + + const alertButtonGroupClass = { + 'alert-button-group': true, + 'alert-button-group-vertical': this.buttons.length > 2 + }; + + let buttons = this.buttons + .map(b => { + if (typeof b === 'string') { + b = { text: b }; + } + return b; + }) + .filter(b => b !== null); + + // An alert can be created with several different inputs. Radios, + // checkboxes and inputs are all accepted, but they cannot be mixed. + const inputTypes: string[] = []; + + let inputs = this.inputs + .map(i => { + return i; + }) + .filter(i => i !== null); + + inputs.forEach(i => { + if (inputTypes.indexOf(i.type) < 0) { + inputTypes.push(i.type); + } + }) + + if (inputTypes.length > 1 && (inputTypes.indexOf('checkbox') > -1 || inputTypes.indexOf('radio') > -1)) { + console.warn(`Alert cannot mix input types: ${(inputTypes.join('/'))}. Please see alert docs for more info.`); + } + + let inputType = inputTypes.length ? inputTypes[0] : null; + + return [ + , +
+
+ {this.title + ?

{this.title}

+ : null} + {this.subTitle + ?

{this.subTitle}

+ : null} +
+
+ + {(() => { + switch(inputType) { + case 'checkbox': + return this.renderCheckbox(inputs); + + case 'radio': + return this.renderRadio(inputs); + + default: + return this.renderInput(inputs); + }; + })()} + +
+ {buttons.map(b => + + )} +
+
+ ]; + } + +} + +export interface AlertOptions { + title?: string; + subTitle?: string; + message?: string; + cssClass?: string; + mode?: string; + inputs?: AlertInput[]; + buttons?: (AlertButton|string)[]; + enableBackdropDismiss?: boolean; +} + +export interface AlertInput { + type?: string; + name?: string | number; + placeholder?: string; + value?: string; + label?: string; + checked?: boolean; + disabled?: boolean; + id?: string; + handler?: Function; + min?: string | number; + max?: string | number; +} + +export interface AlertButton { + text?: string; + role?: string; + cssClass?: string; + handler?: (value: any) => boolean|void; +}; + +export interface AlertEvent { + detail: { + alert: Alert; + }; +} diff --git a/packages/core/src/components/alert/alert.wp.scss b/packages/core/src/components/alert/alert.wp.scss new file mode 100644 index 0000000000..a0d53c7145 --- /dev/null +++ b/packages/core/src/components/alert/alert.wp.scss @@ -0,0 +1,641 @@ +@import "../../themes/ionic.globals.wp"; +@import "./alert"; + +// Windows Alerts +// -------------------------------------------------- + +/// @prop - Background of the alert backdrop +$alert-wp-backdrop-background: #fff !default; + +/// @prop - Width of the alert +$alert-wp-width: 100% !default; + +/// @prop - Max width of the alert +$alert-wp-max-width: 520px !default; + +/// @prop - Border width of the alert +$alert-wp-border-width: 1px !default; + +/// @prop - Border style of the alert +$alert-wp-border-style: solid !default; + +/// @prop - Border color of the alert +$alert-wp-border-color: color($colors-wp, primary) !default; + +/// @prop - Border radius of the alert +$alert-wp-border-radius: 0 !default; + +/// @prop - Background color of the alert +$alert-wp-background: #e6e6e6 !default; + +// deprecated +$alert-wp-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-wp-head-padding-top: 20px !default; + +/// @prop - Padding end of the alert head +$alert-wp-head-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert head +$alert-wp-head-padding-bottom: 5px !default; + +/// @prop - Padding start of the alert head +$alert-wp-head-padding-start: 22px !default; + +/// @prop - Text align of the alert head +$alert-wp-head-text-align: start !default; + +/// @prop - Font size of the alert title +$alert-wp-title-font-size: 20px !default; + +/// @prop - Font weight of the alert title +$alert-wp-title-font-weight: 400 !default; + +/// @prop - Font size of the alert sub title +$alert-wp-sub-title-font-size: 16px !default; + +// deprecated +$alert-wp-message-padding: null !default; + +/// @prop - Padding top of the alert message +$alert-wp-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-wp-message-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert message +$alert-wp-message-padding-bottom: 8px !default; + +/// @prop - Padding start of the alert message +$alert-wp-message-padding-start: 22px !default; + +// deprecated +$alert-wp-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-wp-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-wp-message-empty-padding-end: $alert-wp-message-empty-padding-top !default; + +/// @prop - Padding bottom of the alert empty message +$alert-wp-message-empty-padding-bottom: $alert-wp-message-empty-padding-top !default; + +/// @prop - Padding start of the alert empty message +$alert-wp-message-empty-padding-start: $alert-wp-message-empty-padding-end !default; + +/// @prop - Text color of the alert message +$alert-wp-message-text-color: #000 !default; + +/// @prop - Font size of the alert message +$alert-wp-message-font-size: 13px !default; + +/// @prop - Maximum height of the alert content +$alert-wp-content-max-height: 240px !default; + +// deprecated +$alert-wp-input-margin: null !default; + +/// @prop - Margin top of the alert input +$alert-wp-input-margin-top: 5px !default; + +/// @prop - Margin end of the alert input +$alert-wp-input-margin-end: 0 !default; + +/// @prop - Margin bottom of the alert input +$alert-wp-input-margin-bottom: 5px !default; + +/// @prop - Margin start of the alert input +$alert-wp-input-margin-start: 0 !default; + +// deprecated +$alert-wp-input-padding: null !default; + +/// @prop - Padding top on the alert input +$alert-wp-input-padding-top: 0 !default; + +/// @prop - Padding end on the alert input +$alert-wp-input-padding-end: 8px !default; + +/// @prop - Padding bottom on the alert input +$alert-wp-input-padding-bottom: $alert-wp-input-padding-top !default; + +/// @prop - Padding start on the alert input +$alert-wp-input-padding-start: $alert-wp-input-padding-end !default; + +/// @prop - Border width of the alert input +$alert-wp-input-border-width: 2px !default; + +/// @prop - Border style of the alert input +$alert-wp-input-border-style: $alert-wp-border-style !default; + +/// @prop - Border color of the alert input +$alert-wp-input-border-color: $input-wp-border-color !default; + +/// @prop - Border color of the alert input when focused +$alert-wp-input-border-color-focused: color($colors-wp, primary) !default; + +/// @prop - Line height of the alert input +$alert-wp-input-line-height: 3rem !default; + +/// @prop - Color of the text in the alert input +$alert-wp-input-text-color: #000 !default; + +// deprecated +$alert-wp-button-padding: null !default; + +/// @prop - Padding top of the alert button +$alert-wp-button-padding-top: 5px !default; + +/// @prop - Padding end of the alert button +$alert-wp-button-padding-end: $alert-wp-button-padding-top !default; + +/// @prop - Padding bottom of the alert button +$alert-wp-button-padding-bottom: $alert-wp-button-padding-top !default; + +/// @prop - Padding start of the alert button +$alert-wp-button-padding-start: $alert-wp-button-padding-end !default; + +/// @prop - Width of the alert button +$alert-wp-button-width: 49.5% !default; + +/// @prop - Border radius of the alert button +$alert-wp-button-border-radius: 0 !default; + +/// @prop - Font weight of the alert button +$alert-wp-button-font-weight: 400 !default; + +/// @prop - Color of the text in the alert button +$alert-wp-button-text-color: #000 !default; + +/// @prop - Background color of the alert button +$alert-wp-button-background: #b8b8b8 !default; + +/// @prop - Background color of the activated alert button +$alert-wp-button-background-activated: color-shade($alert-wp-button-background) !default; + +// deprecated +$alert-wp-button-margin-right: 1% !default; +/// @prop - Margin end of the alert button +$alert-wp-button-margin-end: $alert-wp-button-margin-right !default; + +$alert-wp-button-group-padding: null !default; + +/// @prop - Padding top of the alert button group +$alert-wp-button-group-padding-top: 20px !default; + +/// @prop - Padding end of the alert button group +$alert-wp-button-group-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert button group +$alert-wp-button-group-padding-bottom: 20px !default; + +/// @prop - Padding start of the alert button group +$alert-wp-button-group-padding-start: 22px !default; + + +/// @prop - Justify content of the alert button group +$alert-wp-button-group-justify-content: flex-end !default; + +/// @prop - Flex wrap of the alert button group +$alert-wp-button-group-flex-wrap: wrap-reverse !default; + +/// @prop - Vertical width of the vertical alert button group +$alert-wp-button-group-vertical-width: 100% !default; + +/// @prop - Margin top of the vertical alert button group +$alert-wp-button-group-vertical-margin-top: 5px !default; + + +/// @prop - Background color of the radio alert +$alert-wp-radio-background: color($colors-wp, primary) !default; + +/// @prop - Border color of the radio alert +$alert-wp-radio-border-color: $input-wp-border-color !default; + +// deprecated +$alert-wp-radio-label-padding: null !default; + +/// @prop - Padding top of the label for the radio alert +$alert-wp-radio-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the radio alert +$alert-wp-radio-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the radio alert +$alert-wp-radio-label-padding-bottom: $alert-wp-radio-label-padding-top !default; + +/// @prop - Padding start of the label for the radio alert +$alert-wp-radio-label-padding-start: $alert-wp-radio-label-padding-end !default; + + +/// @prop - Text color of the label for the radio alert +$alert-wp-radio-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked radio alert +$alert-wp-radio-label-text-color-checked: $alert-wp-button-text-color !default; + +/// @prop - Top of the radio alert +$alert-wp-radio-top: 0 !default; + +/// @prop - Left of the radio alert +$alert-wp-radio-left: 13px !default; + +/// @prop - Width of the radio alert +$alert-wp-radio-width: 16px !default; + +/// @prop - Height of the radio alert +$alert-wp-radio-height: 16px !default; + +/// @prop - Border width of the radio alert +$alert-wp-radio-border-width: 2px !default; + +/// @prop - Border style of the radio alert +$alert-wp-radio-border-style: solid !default; + +/// @prop - Border radius of the radio alert +$alert-wp-radio-border-radius: 50% !default; + +/// @prop - Border color of the radio alert +$alert-wp-radio-border-color: $input-wp-border-color !default; + +/// @prop - Top of the icon in the radio alert +$alert-wp-radio-icon-top: 2px !default; + +// deprecated +$alert-wp-radio-icon-left: 2px !default; +/// @prop - Start of the icon in the radio alert +$alert-wp-radio-icon-start: $alert-wp-radio-icon-left !default; + +/// @prop - Width of the icon in the radio alert +$alert-wp-radio-icon-width: 8px !default; + +/// @prop - Height of the icon in the radio alert +$alert-wp-radio-icon-height: 8px !default; + +/// @prop - Border radius of the icon in the radio alert +$alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default; + +// deprecated +$alert-wp-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-bottom: $alert-wp-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-start: $alert-wp-checkbox-label-padding-end !default; + +/// @prop - Text color of the label for the checkbox in the alert +$alert-wp-checkbox-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked checkbox in the alert +$alert-wp-checkbox-label-text-color-checked: initial !default; + +/// @prop - Top of the checkbox in the alert +$alert-wp-checkbox-top: 0 !default; + +/// @prop - Left of the checkbox in the alert +$alert-wp-checkbox-left: 13px !default; + +/// @prop - Width of the checkbox in the alert +$alert-wp-checkbox-width: 16px !default; + +/// @prop - Height of the checkbox in the alert +$alert-wp-checkbox-height: 16px !default; + +/// @prop - Border width of the checkbox in the alert +$alert-wp-checkbox-border-width: 2px !default; + +/// @prop - Border style of the checkbox in the alert +$alert-wp-checkbox-border-style: solid !default; + +/// @prop - Border radius of the checkbox in the alert +$alert-wp-checkbox-border-radius: 0 !default; + +/// @prop - Border color of the checkbox in the alert +$alert-wp-checkbox-border-color: $input-wp-border-color !default; + +/// @prop - Background color of the checkbox in the alert when off +$alert-wp-checkbox-background-off: transparent !default; + +/// @prop - Background color of the checkbox in the alert when on +$alert-wp-checkbox-background-on: color($colors-wp, primary) !default; + +/// @prop - Top of the icon in the checkbox alert +$alert-wp-checkbox-icon-top: -2px !default; + +// deprecated +$alert-wp-checkbox-icon-left: 3px !default; +/// @prop - Start of the icon in the checkbox alert +$alert-wp-checkbox-icon-start: $alert-wp-checkbox-icon-left !default; + +/// @prop - Width of the icon in the checkbox alert +$alert-wp-checkbox-icon-width: 6px !default; + +/// @prop - Height of the icon in the checkbox alert +$alert-wp-checkbox-icon-height: 12px !default; + +/// @prop - Border width of the icon in the checkbox alert +$alert-wp-checkbox-icon-border-width: 1px !default; + +/// @prop - Border style of the icon in the checkbox alert +$alert-wp-checkbox-icon-border-style: solid !default; + +/// @prop - Border color of the icon in the checkbox alert +$alert-wp-checkbox-icon-border-color: color-contrast($colors-wp, $alert-wp-checkbox-background-on) !default; + +/// @prop - Transform of the icon in the checkbox alert +$alert-wp-checkbox-icon-transform: rotate(45deg) !default; + + +.alert-wp ion-backdrop { + background: $alert-wp-backdrop-background; +} + +.alert-wp .alert-wrapper { + @include border-radius($alert-wp-border-radius); + + width: $alert-wp-width; + max-width: $alert-wp-max-width; + + border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color; + background: $alert-wp-background; +} + +// Windows Alert Header +// -------------------------------------------------- + +.alert-wp .alert-head { + @include text-align($alert-wp-head-text-align); + + @include deprecated-variable(padding, $alert-wp-head-padding) { + @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start); + } +} + +.alert-wp .alert-title { + font-size: $alert-wp-title-font-size; + font-weight: $alert-wp-title-font-weight; +} + +.alert-wp .alert-sub-title { + font-size: $alert-wp-sub-title-font-size; +} + + +// Windows Alert Message +// -------------------------------------------------- + +.alert-wp .alert-message, +.alert-wp .alert-input-group { + color: $alert-wp-message-text-color; + + @include deprecated-variable(padding, $alert-wp-message-padding) { + @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start); + } +} + +.alert-wp .alert-message { + max-height: $alert-wp-content-max-height; + + font-size: $alert-wp-message-font-size; +} + +.alert-wp .alert-message:empty { + @include deprecated-variable(padding, $alert-wp-message-padding-empty) { + @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start); + } +} + + +// Windows Alert Input +// -------------------------------------------------- + +.alert-wp .alert-input { + border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color; + line-height: $alert-wp-input-line-height; + color: $alert-wp-input-text-color; + + @include deprecated-variable(margin, $alert-wp-input-margin) { + @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start); + } + + @include deprecated-variable(padding, $alert-wp-input-padding) { + @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start); + } +} + +.alert-wp .alert-input:focus { + border-color: $alert-wp-input-border-color-focused; +} + + +// Windows Alert Radio/Checkbox Group +// -------------------------------------------------- + +.alert-wp .alert-radio-group, +.alert-wp .alert-checkbox-group { + position: relative; + overflow: auto; + + max-height: $alert-wp-content-max-height; +} + +.alert-wp .alert-tappable { + position: relative; + display: flex; + + overflow: hidden; + + // TODO this should be a variable that matches item + min-height: 4.4rem; +} + + +// Windows Alert Radio Label +// -------------------------------------------------- + +.alert-wp .alert-radio-label { + overflow: hidden; + + flex: 1; + + text-overflow: ellipsis; + white-space: nowrap; + + color: $alert-wp-radio-label-text-color; + + @include deprecated-variable(padding, $alert-wp-radio-label-padding) { + @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start); + } +} + +// Windows Alert Radio Unchecked Circle +// --------------------------------------------------- + +.alert-wp .alert-radio-icon { + @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left); + @include margin(0); + @include border-radius($alert-wp-radio-border-radius); + + position: relative; + display: block; + + width: $alert-wp-radio-width; + height: $alert-wp-radio-height; + + border-width: $alert-wp-radio-border-width; + border-style: $alert-wp-radio-border-style; + border-color: $alert-wp-radio-border-color; +} + +// Windows Alert Radio Checked Dot +// --------------------------------------------------- + +.alert-wp .alert-radio-inner { + @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start); + @include border-radius($alert-wp-radio-icon-border-radius); + + position: absolute; + display: none; + + width: $alert-wp-radio-icon-width; + height: $alert-wp-radio-icon-height; + + background: $alert-wp-radio-background; +} + +// Windows Alert Radio Checked +// --------------------------------------------------- + +.alert-wp [aria-checked=true] .alert-radio-label { + color: $alert-wp-radio-label-text-color-checked; +} + +.alert-wp [aria-checked=true] .alert-radio-icon { + border-color: $alert-wp-radio-border-color; +} + +.alert-wp [aria-checked=true] .alert-radio-inner { + display: block; +} + + +// Windows Alert Checkbox Label +// -------------------------------------------------- + +.alert-wp .alert-checkbox-label { + overflow: hidden; + + flex: 1; + + text-overflow: ellipsis; + white-space: nowrap; + + color: $alert-wp-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-wp-checkbox-label-padding) { + @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start); + } +} + +.alert-wp [aria-checked=true] .alert-checkbox-label { + color: $alert-wp-checkbox-label-text-color-checked; +} + +// Windows Alert Checkbox Outline: Unchecked +// -------------------------------------------------- + +.alert-wp .alert-checkbox-icon { + @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left); + @include border-radius($alert-wp-checkbox-border-radius); + + position: relative; + + width: $alert-wp-checkbox-width; + height: $alert-wp-checkbox-height; + + border-width: $alert-wp-checkbox-border-width; + border-style: $alert-wp-checkbox-border-style; + border-color: $alert-wp-checkbox-border-color; + background: $alert-wp-checkbox-background-off; +} + +// Windows Alert Checkbox Outline: Checked +// -------------------------------------------------- + +.alert-wp [aria-checked=true] .alert-checkbox-icon { + border-color: $alert-wp-checkbox-background-on; + background: $alert-wp-checkbox-background-on; +} + +// Windows Alert Checkbox Checkmark: Checked +// -------------------------------------------------- + +.alert-wp [aria-checked=true] .alert-checkbox-inner { + @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start); + + position: absolute; + + width: $alert-wp-checkbox-icon-width; + height: $alert-wp-checkbox-icon-height; + + border-width: $alert-wp-checkbox-icon-border-width; + border-top-width: 0; + border-left-width: 0; + border-style: $alert-wp-checkbox-icon-border-style; + border-color: $alert-wp-checkbox-icon-border-color; + transform: $alert-wp-checkbox-icon-transform; +} + + +// Windows Alert Button +// -------------------------------------------------- + +.alert-wp .alert-button-group { + flex-wrap: $alert-wp-button-group-flex-wrap; + justify-content: $alert-wp-button-group-justify-content; + + @include deprecated-variable(padding, $alert-wp-button-group-padding) { + @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start); + } +} + +.alert-wp .alert-button-group-vertical .alert-button { + @include margin($alert-wp-button-group-vertical-margin-top, null, null, null); + + width: $alert-wp-button-group-vertical-width; +} + +.alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) { + @include margin(0, 0, null, null); +} + +.alert-wp .alert-button { + @include border-radius($alert-wp-button-border-radius); + + width: $alert-wp-button-width; + + font-weight: $alert-wp-button-font-weight; + color: $alert-wp-button-text-color; + background: $alert-wp-button-background; + + @include deprecated-variable(padding, $alert-wp-button-padding) { + @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start); + } +} + +.alert-wp .alert-button:first-child:not(:only-child) { + @include margin-horizontal(null, $alert-wp-button-margin-end); +} + +.alert-wp .alert-button.activated { + background: $alert-wp-button-background-activated; +} diff --git a/packages/core/src/components/alert/animations/ios.enter.ts b/packages/core/src/components/alert/animations/ios.enter.ts new file mode 100644 index 0000000000..a315ecf245 --- /dev/null +++ b/packages/core/src/components/alert/animations/ios.enter.ts @@ -0,0 +1,25 @@ +import { Animation } from '../../../index'; + +/** + * iOS Alert Enter Animation + */ +export default function(Animation: Animation, baseElm: HTMLElement) { + const baseAnimation = new Animation(); + + const backdropAnimation = new Animation(); + backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop')); + + const wrapperAnimation = new Animation(); + wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper')); + + backdropAnimation.fromTo('opacity', 0.01, 0.3); + + wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1); + + return baseAnimation + .addElement(baseElm) + .easing('ease-in-out') + .duration(200) + .add(backdropAnimation) + .add(wrapperAnimation); +} diff --git a/packages/core/src/components/alert/animations/ios.leave.ts b/packages/core/src/components/alert/animations/ios.leave.ts new file mode 100644 index 0000000000..295f49cf58 --- /dev/null +++ b/packages/core/src/components/alert/animations/ios.leave.ts @@ -0,0 +1,25 @@ +import { Animation } from '../../../index'; + +/** + * iOS Alert Leave Animation + */ +export default function(Animation: Animation, baseElm: HTMLElement) { + const baseAnimation = new Animation(); + + const backdropAnimation = new Animation(); + backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop')); + + const wrapperAnimation = new Animation(); + wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper')); + + backdropAnimation.fromTo('opacity', 0.3, 0); + + wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9); + + return baseAnimation + .addElement(baseElm) + .easing('ease-in-out') + .duration(200) + .add(backdropAnimation) + .add(wrapperAnimation); +} diff --git a/packages/core/src/components/alert/test/basic.html b/packages/core/src/components/alert/test/basic.html new file mode 100644 index 0000000000..21cd93d382 --- /dev/null +++ b/packages/core/src/components/alert/test/basic.html @@ -0,0 +1,292 @@ + + + + + + Alert Basic + + + + + + + + + Alerts + + + + + + + Alert + Alert Long Message + Multiple Buttons (>2) + Alert No Message + Confirm + Prompt + Radio + Checkbox + + + + + + + \ No newline at end of file diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 232c3c07be..c25bf67e9b 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -1,6 +1,8 @@ import { Animation, AnimationBuilder, AnimationController } from './components/animation-controller/animation-interface'; import { ActionSheet, ActionSheetButton, ActionSheetEvent, ActionSheetOptions } from './components/action-sheet/action-sheet'; import { ActionSheetController } from './components/action-sheet-controller/action-sheet-controller'; +import { Alert, AlertButton, AlertEvent, AlertInput, AlertOptions } from './components/alert/alert'; +import { AlertController } from './components/alert-controller/alert-controller'; import { Backdrop } from './components/backdrop/backdrop' import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading'; import { LoadingController } from './components/loading-controller/loading-controller'; @@ -56,6 +58,12 @@ export { ActionSheetEvent, ActionSheetOptions, ActionSheetController, + Alert, + AlertButton, + AlertEvent, + AlertInput, + AlertOptions, + AlertController, Animation, AnimationBuilder, AnimationController, diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js index 4b4544924f..94aef0d4d0 100644 --- a/packages/core/stencil.config.js +++ b/packages/core/stencil.config.js @@ -7,6 +7,7 @@ exports.config = { { components: ['ion-animation-controller'] }, { components: ['ion-app', 'ion-content', 'ion-fixed', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] }, { components: ['ion-action-sheet', 'ion-action-sheet-controller'] }, + { components: ['ion-alert', 'ion-alert-controller'] }, { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] }, { components: ['ion-backdrop'] }, { components: ['ion-button', 'ion-buttons', 'ion-icon'] }, @@ -23,6 +24,7 @@ exports.config = { { components: ['ion-popover', 'ion-popover-controller'] }, { components: ['ion-searchbar'] }, { components: ['ion-segment', 'ion-segment-button'] }, + { components: ['ion-select', 'ion-select-option', 'ion-select-popover'] }, { components: ['ion-slides', 'ion-slide'] }, { components: ['ion-spinner'] }, { components: ['ion-tabs', 'ion-tab', 'ion-tab-bar', 'ion-tab-button', 'ion-tab-highlight'] },