1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | const index = require('./index-a0a08b2a.js');
|
6 | const ionicGlobal = require('./ionic-global-06f21c1a.js');
|
7 |
|
8 | const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none !important;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:0;border-right:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:unset;border-right:unset;-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border)}}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:var(--border);border-right:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:unset;border-right:unset;-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0}}";
|
9 |
|
10 | const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none !important;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:0;border-right:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:unset;border-right:unset;-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border)}}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:var(--border);border-right:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:unset;border-right:unset;-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0}}";
|
11 |
|
12 | const SPLIT_PANE_MAIN = 'split-pane-main';
|
13 | const SPLIT_PANE_SIDE = 'split-pane-side';
|
14 | const QUERY = {
|
15 | 'xs': '(min-width: 0px)',
|
16 | 'sm': '(min-width: 576px)',
|
17 | 'md': '(min-width: 768px)',
|
18 | 'lg': '(min-width: 992px)',
|
19 | 'xl': '(min-width: 1200px)',
|
20 | 'never': ''
|
21 | };
|
22 | const SplitPane = class {
|
23 | constructor(hostRef) {
|
24 | index.registerInstance(this, hostRef);
|
25 | this.ionSplitPaneVisible = index.createEvent(this, "ionSplitPaneVisible", 7);
|
26 | this.visible = false;
|
27 | |
28 |
|
29 |
|
30 | this.disabled = false;
|
31 | |
32 |
|
33 |
|
34 |
|
35 |
|
36 | this.when = QUERY['lg'];
|
37 | }
|
38 | visibleChanged(visible) {
|
39 | const detail = { visible, isPane: this.isPane.bind(this) };
|
40 | this.ionSplitPaneVisible.emit(detail);
|
41 | }
|
42 | connectedCallback() {
|
43 | this.styleChildren();
|
44 | this.updateState();
|
45 | }
|
46 | disconnectedCallback() {
|
47 | if (this.rmL) {
|
48 | this.rmL();
|
49 | this.rmL = undefined;
|
50 | }
|
51 | }
|
52 | updateState() {
|
53 | if (this.rmL) {
|
54 | this.rmL();
|
55 | this.rmL = undefined;
|
56 | }
|
57 |
|
58 | if (this.disabled) {
|
59 | this.visible = false;
|
60 | return;
|
61 | }
|
62 |
|
63 | const query = this.when;
|
64 | if (typeof query === 'boolean') {
|
65 | this.visible = query;
|
66 | return;
|
67 | }
|
68 |
|
69 | const mediaQuery = QUERY[query] || query;
|
70 |
|
71 | if (mediaQuery.length === 0) {
|
72 | this.visible = false;
|
73 | return;
|
74 | }
|
75 | if (window.matchMedia) {
|
76 |
|
77 | const callback = (q) => {
|
78 | this.visible = q.matches;
|
79 | };
|
80 | const mediaList = window.matchMedia(mediaQuery);
|
81 | mediaList.addListener(callback);
|
82 | this.rmL = () => mediaList.removeListener(callback);
|
83 | this.visible = mediaList.matches;
|
84 | }
|
85 | }
|
86 | isPane(element) {
|
87 | if (!this.visible) {
|
88 | return false;
|
89 | }
|
90 | return element.parentElement === this.el
|
91 | && element.classList.contains(SPLIT_PANE_SIDE);
|
92 | }
|
93 | styleChildren() {
|
94 | const contentId = this.contentId;
|
95 | const children = this.el.children;
|
96 | const nu = this.el.childElementCount;
|
97 | let foundMain = false;
|
98 | for (let i = 0; i < nu; i++) {
|
99 | const child = children[i];
|
100 | const isMain = contentId !== undefined && child.id === contentId;
|
101 | if (isMain) {
|
102 | if (foundMain) {
|
103 | console.warn('split pane cannot have more than one main node');
|
104 | return;
|
105 | }
|
106 | foundMain = true;
|
107 | }
|
108 | setPaneClass(child, isMain);
|
109 | }
|
110 | if (!foundMain) {
|
111 | console.warn('split pane does not have a specified main node');
|
112 | }
|
113 | }
|
114 | render() {
|
115 | const mode = ionicGlobal.getIonMode(this);
|
116 | return (index.h(index.Host, { class: {
|
117 | [mode]: true,
|
118 |
|
119 | [`split-pane-${mode}`]: true,
|
120 | 'split-pane-visible': this.visible
|
121 | } }, index.h("slot", null)));
|
122 | }
|
123 | get el() { return index.getElement(this); }
|
124 | static get watchers() { return {
|
125 | "visible": ["visibleChanged"],
|
126 | "disabled": ["updateState"],
|
127 | "when": ["updateState"]
|
128 | }; }
|
129 | };
|
130 | const setPaneClass = (el, isMain) => {
|
131 | let toAdd;
|
132 | let toRemove;
|
133 | if (isMain) {
|
134 | toAdd = SPLIT_PANE_MAIN;
|
135 | toRemove = SPLIT_PANE_SIDE;
|
136 | }
|
137 | else {
|
138 | toAdd = SPLIT_PANE_SIDE;
|
139 | toRemove = SPLIT_PANE_MAIN;
|
140 | }
|
141 | const classList = el.classList;
|
142 | classList.add(toAdd);
|
143 | classList.remove(toRemove);
|
144 | };
|
145 | SplitPane.style = {
|
146 | ios: splitPaneIosCss,
|
147 | md: splitPaneMdCss
|
148 | };
|
149 |
|
150 | exports.ion_split_pane = SplitPane;
|