46 lines
3.7 KiB
JavaScript
Executable file
46 lines
3.7 KiB
JavaScript
Executable file
import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
|
|
import { b as getIonMode } from './ionic-global.js';
|
|
|
|
const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:66px;margin-bottom:66px;display:none;position:absolute;top:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:-ms-flexbox;display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;-webkit-transform:scale(0);transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin-left:5px;margin-right:5px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin-left:unset;margin-right:unset;-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px}}::slotted(.fab-button-in-list.fab-button-show){-webkit-transform:scale(1);transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.fab-list-side-start){margin-left:66px;margin-right:66px;margin-top:0;margin-bottom:0;right:0;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-list-side-start){margin-left:unset;margin-right:unset;-webkit-margin-start:66px;margin-inline-start:66px;-webkit-margin-end:66px;margin-inline-end:66px}}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}:host(.fab-list-side-end){margin-left:66px;margin-right:66px;margin-top:0;margin-bottom:0;left:0;-ms-flex-direction:row;flex-direction:row}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-list-side-end){margin-left:unset;margin-right:unset;-webkit-margin-start:66px;margin-inline-start:66px;-webkit-margin-end:66px;margin-inline-end:66px}}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}";
|
|
|
|
const FabList = class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.__registerHost();
|
|
attachShadow(this);
|
|
/**
|
|
* If `true`, the fab list will show all fab buttons in the list.
|
|
*/
|
|
this.activated = false;
|
|
/**
|
|
* The side the fab list will show on relative to the main fab button.
|
|
*/
|
|
this.side = 'bottom';
|
|
}
|
|
activatedChanged(activated) {
|
|
const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
|
|
// if showing the fabs add a timeout, else show immediately
|
|
const timeout = activated ? 30 : 0;
|
|
fabs.forEach((fab, i) => {
|
|
setTimeout(() => fab.show = activated, i * timeout);
|
|
});
|
|
}
|
|
render() {
|
|
const mode = getIonMode(this);
|
|
return (h(Host, { class: {
|
|
[mode]: true,
|
|
'fab-list-active': this.activated,
|
|
[`fab-list-side-${this.side}`]: true
|
|
} }, h("slot", null)));
|
|
}
|
|
get el() { return this; }
|
|
static get watchers() { return {
|
|
"activated": ["activatedChanged"]
|
|
}; }
|
|
static get style() { return fabListCss; }
|
|
};
|
|
|
|
const IonFabList = /*@__PURE__*/proxyCustomElement(FabList, [1,"ion-fab-list",{"activated":[4],"side":[1]}]);
|
|
|
|
export { IonFabList };
|