1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as getIonMode } from './ionic-global.js';
|
6 |
|
7 | const fabCss = ":host{position:absolute;z-index:999}:host(.fab-horizontal-center){left:50%;margin-left:-28px}:host-context([dir=rtl]):host(.fab-horizontal-center),:host-context([dir=rtl]).fab-horizontal-center{left:unset;right:unset;right:50%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-horizontal-center){margin-left:unset;-webkit-margin-start:-28px;margin-inline-start:-28px}}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:-28px}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:-28px}:host(.fab-vertical-center){margin-top:-28px;top:50%}";
|
8 |
|
9 | const Fab = proxyCustomElement(class extends HTMLElement {
|
10 | constructor() {
|
11 | super();
|
12 | this.__registerHost();
|
13 | this.__attachShadow();
|
14 | |
15 |
|
16 |
|
17 |
|
18 |
|
19 | this.edge = false;
|
20 | |
21 |
|
22 |
|
23 |
|
24 | this.activated = false;
|
25 | this.onClick = () => {
|
26 | const hasList = !!this.el.querySelector('ion-fab-list');
|
27 | const getButton = this.getFab();
|
28 | const isButtonDisabled = getButton && getButton.disabled;
|
29 | if (hasList && !isButtonDisabled) {
|
30 | this.activated = !this.activated;
|
31 | }
|
32 | };
|
33 | }
|
34 | activatedChanged() {
|
35 | const activated = this.activated;
|
36 | const fab = this.getFab();
|
37 | if (fab) {
|
38 | fab.activated = activated;
|
39 | }
|
40 | Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => {
|
41 | list.activated = activated;
|
42 | });
|
43 | }
|
44 | componentDidLoad() {
|
45 | if (this.activated) {
|
46 | this.activatedChanged();
|
47 | }
|
48 | }
|
49 | |
50 |
|
51 |
|
52 | async close() {
|
53 | this.activated = false;
|
54 | }
|
55 | getFab() {
|
56 | return this.el.querySelector('ion-fab-button');
|
57 | }
|
58 | render() {
|
59 | const { horizontal, vertical, edge } = this;
|
60 | const mode = getIonMode(this);
|
61 | return (h(Host, { onClick: this.onClick, class: {
|
62 | [mode]: true,
|
63 | [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
|
64 | [`fab-vertical-${vertical}`]: vertical !== undefined,
|
65 | 'fab-edge': edge
|
66 | } }, h("slot", null)));
|
67 | }
|
68 | get el() { return this; }
|
69 | static get watchers() { return {
|
70 | "activated": ["activatedChanged"]
|
71 | }; }
|
72 | static get style() { return fabCss; }
|
73 | }, [1, "ion-fab", {
|
74 | "horizontal": [1],
|
75 | "vertical": [1],
|
76 | "edge": [4],
|
77 | "activated": [1028],
|
78 | "close": [64]
|
79 | }]);
|
80 | function defineCustomElement$1() {
|
81 | if (typeof customElements === "undefined") {
|
82 | return;
|
83 | }
|
84 | const components = ["ion-fab"];
|
85 | components.forEach(tagName => { switch (tagName) {
|
86 | case "ion-fab":
|
87 | if (!customElements.get(tagName)) {
|
88 | customElements.define(tagName, Fab);
|
89 | }
|
90 | break;
|
91 | } });
|
92 | }
|
93 |
|
94 | const IonFab = Fab;
|
95 | const defineCustomElement = defineCustomElement$1;
|
96 |
|
97 | export { IonFab, defineCustomElement };
|