diff --git a/packages/core/demos/action-sheet/basic.html b/packages/core/demos/action-sheet/basic.html
index a95359d4db..8e921e110d 100644
--- a/packages/core/demos/action-sheet/basic.html
+++ b/packages/core/demos/action-sheet/basic.html
@@ -3,7 +3,7 @@
- Ionic Slides Basic
+ Action Sheet Basic
diff --git a/packages/core/src/components/action-sheet-controller/action-sheet-controller.scss b/packages/core/src/components/action-sheet-controller/action-sheet-controller.scss
index a54010e525..ecccd1ad9a 100644
--- a/packages/core/src/components/action-sheet-controller/action-sheet-controller.scss
+++ b/packages/core/src/components/action-sheet-controller/action-sheet-controller.scss
@@ -1,32 +1,10 @@
@import "../../themes/ionic.globals";
-// Loading Controller
+// ActionSheet Controller
// --------------------------------------------------
-ion-loading-controller {
+ion-action-sheet-controller {
display: none;
}
-
-// Loading Controller Backdrop
-// --------------------------------------------------
-
-/// @prop - Color of the backdrop
-$loading-backdrop-color: #000 !default;
-
-
-.loading-backdrop {
- position: absolute;
- top: 0;
- left: 0;
- z-index: $z-index-backdrop;
- display: block;
-
- width: 100%;
- height: 100%;
-
- background-color: $loading-backdrop-color;
- opacity: .01;
- transform: translateZ(0);
-}
diff --git a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
index 248679da5f..6ecab0d17a 100644
--- a/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
+++ b/packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -1,6 +1,11 @@
import { Component, Listen } from '@stencil/core';
-import { ActionSheetEvent, ActionSheetOptions, ActionSheet, IonicControllerApi, Ionic } from '../../index';
-
+import {
+ ActionSheetEvent,
+ ActionSheetOptions,
+ ActionSheet,
+ IonicControllerApi,
+ Ionic
+} from '../../index';
@Component({
tag: 'ion-action-sheet-controller',
@@ -8,17 +13,15 @@ import { ActionSheetEvent, ActionSheetOptions, ActionSheet, IonicControllerApi,
})
export class ActionSheetController implements IonicControllerApi {
private ids = 0;
- private actionsheetResolves: {[actionsheetId: string]: Function} = {};
+ private actionsheetResolves: { [actionsheetId: string]: Function } = {};
private actionsheets: ActionSheet[] = [];
private appRoot: Element;
-
ionViewDidLoad() {
this.appRoot = document.querySelector('ion-app') || document.body;
Ionic.registerController('action-sheet', this);
}
-
load(opts?: ActionSheetOptions) {
// create ionic's wrapping ion-actionsheet component
const actionsheet = document.createElement('ion-action-sheet');
@@ -41,7 +44,6 @@ export class ActionSheetController implements IonicControllerApi {
});
}
-
@Listen('body:ionActionSheetDidLoad')
viewDidLoad(ev: ActionSheetEvent) {
const actionsheet = ev.detail.actionsheet;
@@ -52,13 +54,11 @@ export class ActionSheetController implements IonicControllerApi {
}
}
-
@Listen('body:ionActionSheetWillPresent')
willPresent(ev: ActionSheetEvent) {
this.actionsheets.push(ev.detail.actionsheet);
}
-
@Listen('body:ionActionSheetWillDismiss, body:ionActionSheetDidUnload')
willDismiss(ev: ActionSheetEvent) {
const index = this.actionsheets.indexOf(ev.detail.actionsheet);
@@ -67,7 +67,6 @@ export class ActionSheetController implements IonicControllerApi {
}
}
-
@Listen('body:keyup.escape')
escapeKeyUp() {
const lastActionSheet = this.actionsheets[this.actionsheets.length - 1];
@@ -75,5 +74,4 @@ export class ActionSheetController implements IonicControllerApi {
lastActionSheet.dismiss();
}
}
-
}
diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss
index ce21fb9f27..f8fda62644 100644
--- a/packages/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss
@@ -1,109 +1,159 @@
@import "../../themes/ionic.globals.ios";
-@import "./loading";
+@import "./action-sheet";
-
-// iOS Loading Indicator
+// iOS Action Sheet
// --------------------------------------------------
+/// @prop - Text align of the action sheet
+$action-sheet-ios-text-align: center !default;
+
// deprecated
-$loading-ios-padding: null !default;
+$action-sheet-ios-padding: null !default;
-/// @prop - Padding top of the loading wrapper
-$loading-ios-padding-top: 24px !default;
+/// @prop - Padding top of the action sheet
+$action-sheet-ios-padding-top: 0 !default;
-/// @prop - Padding end of the loading wrapper
-$loading-ios-padding-end: 34px !default;
+/// @prop - Padding end of the action sheet
+$action-sheet-ios-padding-end: 10px !default;
-/// @prop - Padding bottom of the loading wrapper
-$loading-ios-padding-bottom: $loading-ios-padding-top !default;
+/// @prop - Padding bottom of the action sheet
+$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;
-/// @prop - Padding start of the loading wrapper
-$loading-ios-padding-start: $loading-ios-padding-end !default;
+/// @prop - Padding start of the action sheet
+$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
-/// @prop - Max width of the loading wrapper
-$loading-ios-max-width: 270px !default;
+/// @prop - Bottom margin of the action sheet button group
+$action-sheet-ios-group-margin-bottom: 10px !default;
-/// @prop - Maximum height of the loading wrapper
-$loading-ios-max-height: 90% !default;
+/// @prop - Background color of the action sheet
+$action-sheet-ios-background: #f9f9f9 !default;
-/// @prop - Border radius of the loading wrapper
-$loading-ios-border-radius: 8px !default;
+/// @prop - Border color of the action sheet
+$action-sheet-ios-border-color: #d6d6da !default;
-/// @prop - Text color of the loading wrapper
-$loading-ios-text-color: #000 !default;
+/// @prop - Border radius of the action sheet
+$action-sheet-ios-border-radius: 13px !default;
-/// @prop - Background of the loading wrapper
-$loading-ios-background: #f8f8f8 !default;
+/// @prop - Padding of the action sheet title
+$action-sheet-ios-title-padding: 1.5rem !default;
-/// @prop - Font weight of the loading content
-$loading-ios-content-font-weight: bold !default;
+/// @prop - Color of the action sheet title
+$action-sheet-ios-title-color: #8f8f8f !default;
-/// @prop - Color of the loading spinner
-$loading-ios-spinner-color: #69717d !default;
+/// @prop - Font size of the action sheet title
+$action-sheet-ios-title-font-size: 1.3rem !default;
-/// @prop - Color of the ios loading spinner
-$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
+/// @prop - Font weight of the action sheet title
+$action-sheet-ios-title-font-weight: 400 !default;
-/// @prop - Color of the bubbles loading spinner
-$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
+/// @prop - Border radius of the action sheet title
+$action-sheet-ios-title-border-radius: 0 !default;
-/// @prop - Color of the circles loading spinner
-$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
+/// @prop - Minimum height of the action sheet button
+$action-sheet-ios-button-min-height: 5.6rem !default;
-/// @prop - Color of the crescent loading spinner
-$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
+/// @prop - Padding of the action sheet button
+$action-sheet-ios-button-padding: 18px !default;
-/// @prop - Color of the dots loading spinner
-$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
+/// @prop - Text color of the action sheet button
+$action-sheet-ios-button-text-color: #007aff !default;
+
+/// @prop - Font size of the action sheet button
+$action-sheet-ios-button-font-size: 2rem !default;
+
+/// @prop - Border width of the action sheet button
+$action-sheet-ios-button-border-width: $hairlines-width !default;
+
+/// @prop - Border style of the action sheet button
+$action-sheet-ios-button-border-style: solid !default;
+
+/// @prop - Border color of the action sheet button
+$action-sheet-ios-button-border-color: #d1d3d6 !default;
+
+/// @prop - Background color of the action sheet button
+$action-sheet-ios-button-background: transparent !default;
+
+/// @prop - Background color of the activated action sheet button
+$action-sheet-ios-button-background-activated: #ebebeb !default;
+
+/// @prop - Destructive text color of the action sheet button
+$action-sheet-ios-button-destructive-text-color: #f53d3d !default;
+
+/// @prop - Background color of the action sheet cancel button
+$action-sheet-ios-button-cancel-background: #fff !default;
+
+/// @prop - Font weight of the action sheet cancel button
+$action-sheet-ios-button-cancel-font-weight: 600 !default;
-.loading-ios .loading-wrapper {
- @include border-radius($loading-ios-border-radius);
+.action-sheet-ios {
+ @include text-align($action-sheet-ios-text-align);
+}
- max-width: $loading-ios-max-width;
- max-height: $loading-ios-max-height;
-
- color: $loading-ios-text-color;
- background: $loading-ios-background;
-
- @include deprecated-variable(padding, $loading-ios-padding) {
- @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
+.action-sheet-ios .action-sheet-container {
+ @include deprecated-variable(padding, $action-sheet-ios-padding) {
+ @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
}
}
+.action-sheet-ios .action-sheet-group {
+ @include border-radius($action-sheet-ios-border-radius);
+ @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
-// iOS Loading Content
-// -----------------------------------------
+ overflow: hidden;
-.loading-ios .loading-content {
- font-weight: $loading-ios-content-font-weight;
+ background: $action-sheet-ios-background;
}
-.loading-ios .loading-spinner + .loading-content {
- @include margin-horizontal(16px, null);
+.action-sheet-ios .action-sheet-group:last-child {
+ @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
}
+.action-sheet-ios .action-sheet-title {
+ @include padding($action-sheet-ios-title-padding);
+ @include text-align($action-sheet-ios-text-align);
+ @include border-radius($action-sheet-ios-title-border-radius);
-// iOS Loading Spinner fill colors
-// -----------------------------------------
-
-.loading-ios .spinner-ios line,
-.loading-ios .spinner-ios-small line {
- stroke: $loading-ios-spinner-ios-color;
+ border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
+ font-size: $action-sheet-ios-title-font-size;
+ font-weight: $action-sheet-ios-title-font-weight;
+ color: $action-sheet-ios-title-color;
}
-.loading-ios .spinner-bubbles circle {
- fill: $loading-ios-spinner-bubbles-color;
+.action-sheet-ios .action-sheet-button {
+ @include margin(0);
+ @include padding($action-sheet-ios-button-padding);
+
+ min-height: $action-sheet-ios-button-min-height;
+
+ border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
+ font-size: $action-sheet-ios-button-font-size;
+ color: $action-sheet-ios-button-text-color;
+ background: $action-sheet-ios-button-background;
}
-.loading-ios .spinner-circles circle {
- fill: $loading-ios-spinner-circles-color;
+.action-sheet-ios .action-sheet-button:last-child {
+ border-bottom-color: transparent;
}
-.loading-ios .spinner-crescent circle {
- stroke: $loading-ios-spinner-crescent-color;
+.action-sheet-ios .action-sheet-button.activated {
+ @include margin(-$action-sheet-ios-button-border-width, null, null, null);
+
+ border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
+ border-bottom-color: $action-sheet-ios-button-background-activated;
+ background: $action-sheet-ios-button-background-activated;
}
-.loading-ios .spinner-dots circle {
- fill: $loading-ios-spinner-dots-color;
+.action-sheet-ios .action-sheet-selected {
+ font-weight: bold;
+ background: #fff;
+}
+
+.action-sheet-ios .action-sheet-destructive {
+ color: $action-sheet-ios-button-destructive-text-color;
+}
+
+.action-sheet-ios .action-sheet-cancel {
+ font-weight: $action-sheet-ios-button-cancel-font-weight;
+ background: $action-sheet-ios-button-cancel-background;
}
diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx
index 9eaf3b1ec1..cd00b30e7a 100644
--- a/packages/core/src/components/action-sheet/action-sheet.tsx
+++ b/packages/core/src/components/action-sheet/action-sheet.tsx
@@ -15,9 +15,9 @@ import iOSLeaveAnimation from './animations/ios.leave';
@Component({
tag: 'ion-action-sheet',
styleUrls: {
- // ios: 'action-sheet.ios.scss',
- md: 'action-sheet.md.scss'
- // wp: 'action-sheet.wp.scss'
+ ios: 'action-sheet.ios.scss',
+ md: 'action-sheet.md.scss',
+ wp: 'action-sheet.wp.scss'
},
host: {
theme: 'action-sheet'
@@ -39,7 +39,7 @@ export class ActionSheet {
@Prop() cssClass: string;
@Prop() title: string;
@Prop() subTitle: string;
- @Prop() buttons: ActionSheetButtons[];
+ @Prop() buttons: ActionSheetButton[];
@Prop() enableBackdropDismiss: boolean = true;
@Prop() showBackdrop: boolean = true;
@@ -130,7 +130,7 @@ export class ActionSheet {
}
}
- click(button: ActionSheetButtons) {
+ click(button: ActionSheetButton) {
let shouldDismiss = true;
if (button.handler) {
if (button.handler() === false) {
@@ -180,11 +180,11 @@ export interface ActionSheetOptions {
title?: string;
subTitle?: string;
cssClass?: string;
- buttons?: (ActionSheetButtons | string)[];
+ buttons?: (ActionSheetButton | string)[];
enableBackdropDismiss?: boolean;
}
-export interface ActionSheetButtons {
+export interface ActionSheetButton {
text?: string;
role?: string;
icon?: string;
diff --git a/packages/core/src/components/action-sheet/action-sheet.wp.scss b/packages/core/src/components/action-sheet/action-sheet.wp.scss
index e373bd6cb3..0ca6929f63 100644
--- a/packages/core/src/components/action-sheet/action-sheet.wp.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.wp.scss
@@ -1,102 +1,168 @@
@import "../../themes/ionic.globals.wp";
-@import "./loading";
+@import "./action-sheet";
-
-// Windows Loading Indicator
+// Windows Action Sheet
// --------------------------------------------------
+/// @prop - Text align of the action sheet
+$action-sheet-wp-text-align: start !default;
+
+/// @prop - Background color of the action sheet
+$action-sheet-wp-background: #fff !default;
+
+/// @prop - Box shadow color of the action sheet
+$action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default;
+
+/// @prop - Box shadow of the action sheet
+$action-sheet-wp-box-shadow: 0 -1px 0 $action-sheet-wp-box-shadow-color !default;
+
// deprecated
-$loading-wp-padding: null !default;
+$action-sheet-wp-title-padding: null !default;
-/// @prop - Padding top of the loading wrapper
-$loading-wp-padding-top: 20px !default;
+/// @prop - Padding top of the action sheet title
+$action-sheet-wp-title-padding-top: 11px !default;
-/// @prop - Padding end of the loading wrapper
-$loading-wp-padding-end: $loading-wp-padding-top !default;
+/// @prop - Padding end of the action sheet title
+$action-sheet-wp-title-padding-end: 16px !default;
-/// @prop - Padding bottom of the loading wrapper
-$loading-wp-padding-bottom: $loading-wp-padding-top !default;
+/// @prop - Padding bottom of the action sheet title
+$action-sheet-wp-title-padding-bottom: 17px !default;
-/// @prop - Padding start of the loading wrapper
-$loading-wp-padding-start: $loading-wp-padding-end !default;
+/// @prop - Padding start of the action sheet title
+$action-sheet-wp-title-padding-start: $action-sheet-wp-title-padding-end !default;
-/// @prop - Max width of the loading wrapper
-$loading-wp-max-width: 280px !default;
+/// @prop - Font size of the action sheet title
+$action-sheet-wp-title-font-size: 2rem !default;
-/// @prop - Maximum height of the loading wrapper
-$loading-wp-max-height: 90% !default;
+/// @prop - Color of the action sheet title
+$action-sheet-wp-title-color: #4d4d4d !default;
-/// @prop - Border radius of the loading wrapper
-$loading-wp-border-radius: 2px !default;
+/// @prop - Text align of the action sheet title
+$action-sheet-wp-title-text-align: $action-sheet-wp-text-align !default;
-/// @prop - Text color of the loading wrapper
-$loading-wp-text-color: #fff !default;
+/// @prop - Height of the action sheet button
+$action-sheet-wp-button-height: 4.8rem !default;
-/// @prop - Background of the loading wrapper
-$loading-wp-background: #000 !default;
+/// @prop - Text color of the action sheet button
+$action-sheet-wp-button-text-color: #4d4d4d !default;
-/// @prop - Color of the loading spinner
-$loading-wp-spinner-color: $loading-wp-text-color !default;
+/// @prop - Font size of the action sheet button
+$action-sheet-wp-button-font-size: 1.5rem !default;
-/// @prop - Color of the ios loading spinner
-$loading-wp-spinner-ios-color: $loading-wp-spinner-color !default;
+// deprecated
+$action-sheet-wp-button-padding: null !default;
-/// @prop - Color of the bubbles loading spinner
-$loading-wp-spinner-bubbles-color: $loading-wp-spinner-color !default;
+/// @prop - Padding top of the action sheet button
+$action-sheet-wp-button-padding-top: 0 !default;
-/// @prop - Color of the circles loading spinner
-$loading-wp-spinner-circles-color: $loading-wp-spinner-color !default;
+/// @prop - Padding end of the action sheet button
+$action-sheet-wp-button-padding-end: 16px !default;
-/// @prop - Color of the crescent loading spinner
-$loading-wp-spinner-crescent-color: $loading-wp-spinner-color !default;
+/// @prop - Padding bottom of the action sheet button
+$action-sheet-wp-button-padding-bottom: $action-sheet-wp-button-padding-top !default;
-/// @prop - Color of the dots loading spinner
-$loading-wp-spinner-dots-color: $loading-wp-spinner-color !default;
+/// @prop - Padding start of the action sheet button
+$action-sheet-wp-button-padding-start: $action-sheet-wp-button-padding-end !default;
+
+/// @prop - Text align of the action sheet button
+$action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default;
+
+/// @prop - Background color of the action sheet button
+$action-sheet-wp-button-background: transparent !default;
+
+/// @prop - Background color of the action sheet activated button
+$action-sheet-wp-button-background-activated: $list-wp-activated-background-color !default;
+
+/// @prop - Font size of the icon in the action sheet button
+$action-sheet-wp-icon-font-size: 2.4rem !default;
+
+/// @prop - Width of the icon in the action sheet button
+$action-sheet-wp-icon-width: 2.3rem !default;
+
+/// @prop - Text align of the icon in the action sheet button
+$action-sheet-wp-icon-text-align: center !default;
+
+/// @prop - Vertical align of the icon in the action sheet button
+$action-sheet-wp-icon-vertical-align: middle !default;
+
+// deprecated
+$action-sheet-wp-icon-margin: null !default;
+
+/// @prop - Margin top of the icon in the action sheet button
+$action-sheet-wp-icon-margin-top: 0 !default;
+
+/// @prop - Margin end of the icon in the action sheet button
+$action-sheet-wp-icon-margin-end: 20px !default;
+
+/// @prop - Margin bottom of the icon in the action sheet button
+$action-sheet-wp-icon-margin-bottom: 0 !default;
+
+/// @prop - Margin start of the icon in the action sheet button
+$action-sheet-wp-icon-margin-start: 0 !default;
-.loading-wp .loading-wrapper {
- @include border-radius($loading-wp-border-radius);
+.action-sheet-wp .action-sheet-wrapper {
+ box-shadow: $action-sheet-wp-box-shadow;
+}
- max-width: $loading-wp-max-width;
- max-height: $loading-wp-max-height;
+.action-sheet-wp .action-sheet-title {
+ @include text-align($action-sheet-wp-title-text-align);
- color: $loading-wp-text-color;
- background: $loading-wp-background;
+ font-size: $action-sheet-wp-title-font-size;
+ color: $action-sheet-wp-title-color;
- @include deprecated-variable(padding, $loading-wp-padding) {
- @include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start);
+ @include deprecated-variable(padding, $action-sheet-wp-title-padding) {
+ @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
}
}
+.action-sheet-wp .action-sheet-button {
+ @include text-align($action-sheet-wp-button-text-align);
-// Windows Loading Content
-// -----------------------------------------
+ min-height: $action-sheet-wp-button-height;
-.loading-wp .loading-spinner + .loading-content {
- @include margin-horizontal(16px, null);
+ font-size: $action-sheet-wp-button-font-size;
+ color: $action-sheet-wp-button-text-color;
+ background: $action-sheet-wp-button-background;
+
+ @include deprecated-variable(padding, $action-sheet-wp-button-padding) {
+ @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
+ }
}
-
-// Windows Loading Spinner fill colors
-// -----------------------------------------
-
-.loading-wp .spinner-ios line,
-.loading-wp .spinner-ios-small line {
- stroke: $loading-wp-spinner-ios-color;
+.action-sheet-wp .action-sheet-button.activated {
+ background: $action-sheet-wp-button-background-activated;
}
-.loading-wp .spinner-bubbles circle {
- fill: $loading-wp-spinner-bubbles-color;
+.action-sheet-wp .action-sheet-icon {
+ @include padding(0);
+ @include text-align($action-sheet-wp-icon-text-align);
+
+ width: $action-sheet-wp-icon-width;
+
+ font-size: $action-sheet-wp-icon-font-size;
+ vertical-align: $action-sheet-wp-icon-vertical-align;
+
+ @include deprecated-variable(margin, $action-sheet-wp-icon-margin) {
+ @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
+ }
}
-.loading-wp .spinner-circles circle {
- fill: $loading-wp-spinner-circles-color;
+.action-sheet-wp .action-sheet-container {
+ @include padding(.8rem, 0);
+
+ background: $action-sheet-wp-background;
}
-.loading-wp .spinner-crescent circle {
- stroke: $loading-wp-spinner-crescent-color;
+.action-sheet-wp .action-sheet-group .button-inner {
+ justify-content: flex-start;
}
-.loading-wp .spinner-dots circle {
- fill: $loading-wp-spinner-dots-color;
+.action-sheet-wp .action-sheet-selected {
+ font-weight: bold;
}
+
+.action-sheet-wp .action-sheet-cancel {
+ background: $action-sheet-wp-button-background;
+}
+
diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts
index add8349d02..49df3133ea 100644
--- a/packages/core/src/index.d.ts
+++ b/packages/core/src/index.d.ts
@@ -1,6 +1,6 @@
-import { AnimationController } from './components/animation/animation';
-import { Animation, AnimationBuilder } from './components/animation/animation-interface';
-import { ActionSheet, ActionSheetButtons, ActionSheetEvent, ActionSheetOptions } from './components/action-sheet/action-sheet';
+import { AnimationController } from './components/animation-controller/animation-controller';
+import { Animation, AnimationBuilder } 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 { Backdrop } from './components/backdrop/backdrop'
import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading';
@@ -49,7 +49,7 @@ export interface BooleanInputComponent extends BaseInputComponent {
export {
ActionSheet,
- ActionSheetButtons,
+ ActionSheetButton,
ActionSheetEvent,
ActionSheetOptions,
ActionSheetController,