/**
 * {@link Ext.ActionSheet ActionSheets} are used to display a list of {@link Ext.Button buttons}
 * in a popup dialog.
 *
 * The key difference between ActionSheet and {@link Ext.Sheet} is that ActionSheets are
 * docked at the bottom of the screen, and the {@link #defaultType} is set to
 * {@link Ext.Button button}.
 *
 * ## Example
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * var actionSheet = Ext.create('Ext.ActionSheet', {
 *     items: [
 *         {
 *             text: 'Delete draft',
 *             ui  : 'decline'
 *         },
 *         {
 *             text: 'Save draft'
 *         },
 *         {
 *             text: 'Cancel',
 *             ui  : 'confirm'
 *         }
 *     ]
 * });
 *
 * Ext.Viewport.add(actionSheet);
 * actionSheet.show();
 * ```
 *
 * ## Edge Menus
 * Action Sheets can be used with {@link Ext.Viewport#setMenu}. They can be linked with
 * any side of the screen (top, left, bottom or right). To use this menu you will call various
 * menu related functions on the {@link Ext.Viewport Viewport} such as
 * {@link Ext.Viewport#showMenu}, {@link Ext.Viewport#hideMenu}, {@link Ext.Viewport#toggleMenu},
 * {@link Ext.Viewport#hideOtherMenus}, or {@link Ext.Viewport#hideAllMenus}.
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * var menu = Ext.create({
 *     xtype: 'actionsheet',
 *     items: [{
 *         text: 'Settings',
 *         iconCls: 'settings'
 *     }, {
 *         text: 'New Item',
 *         iconCls: 'compose'
 *     }, {
 *         text: 'Star',
 *         iconCls: 'star'
 *     }]
 * });
 *
 * Ext.Viewport.add({
 *     xtype: 'panel',
 *     html: 'Main View Content'
 * });
 *
 * Ext.Viewport.setMenu(menu, {
 *     side: 'left',
 *     // omitting the reveal config defaults the animation to 'cover'
 *     reveal: true
 * });
 *
 * Ext.Viewport.showMenu('left');
 * ```
 *
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-container layout="center">
 *     <ext-actionsheet displayed="true">
 *         <ext-button ui="decline" text="Delete Draft"></ext-button>
 *         <ext-button text="Save Draft"></ext-button>
 *         <ext-button text="Cancel"></ext-button>
 *     </ext-actionsheet>
 * </ext-container>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', tab: 2, packages: ['ext-web-components']})
 * import '@sencha/ext-web-components/dist/ext-container.component';
 * import '@sencha/ext-web-components/dist/ext-actionsheet.component';
 * import '@sencha/ext-web-components/dist/ext-button.component';
 * 
 * export default class ActionSheetComponent {} 
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtContainer, ExtActionSheet, ExtButton } from '@sencha/ext-react';
 *
 * export default class MyExample extends Component {
 *    render() {
 *        return (
 *            <ExtContainer>
 *                <ExtActionSheet displayed>
 *                    <ExtButton ui="decline" text="Delete Draft"/>
 *                    <ExtButton text="Save Draft"/>
 *                    <ExtButton text="Cancel"/>
 *                </ExtActionSheet>
 *            </ExtContainer>
 *        )
 *    }
 * }
 * ```
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 *  import { Component } from '@angular/core'
 *  declare var Ext: any;
 *
 *  @Component({
 *      selector: 'app-root-1',
 *      styles: [`
 *              `],
 *      template: `
 *          <ExtContainer>
 *              <ExtActionSheet [displayed]="true">
 *                  <ExtButton ui="decline" text="Delete Draft"></ExtButton>
 *                  <ExtButton text="Save Draft"></ExtButton>
 *                  <ExtButton text="Cancel"></ExtButton>
 *              </ExtActionSheet>
 *          </ExtContainer>
 *              `
 *  })
 *  export class AppComponent {
 *  
 *  }
 * ```
 */
Ext.define('Ext.ActionSheet', {
    extend: 'Ext.Sheet',
    requires: ['Ext.Button'],
    xtype: 'actionsheet',
    classCls: Ext.baseCSSPrefix + 'actionsheet',
    centered: false,
    layout: 'vbox',
    side: 'bottom',
    defaultType: 'button'
});