1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as getIonMode } from './ionic-global.js';
|
6 | import { c as createColorClasses, h as hostContext } from './theme.js';
|
7 |
|
8 | const breadcrumbsIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0;-ms-flex-pack:center;justify-content:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-toolbar){padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}";
|
9 |
|
10 | const breadcrumbsMdCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-toolbar){padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}";
|
11 |
|
12 | const Breadcrumbs = proxyCustomElement(class extends HTMLElement {
|
13 | constructor() {
|
14 | super();
|
15 | this.__registerHost();
|
16 | this.__attachShadow();
|
17 | this.ionCollapsedClick = createEvent(this, "ionCollapsedClick", 7);
|
18 | |
19 |
|
20 |
|
21 |
|
22 | this.itemsBeforeCollapse = 1;
|
23 | |
24 |
|
25 |
|
26 |
|
27 | this.itemsAfterCollapse = 1;
|
28 | this.breadcrumbsInit = () => {
|
29 | this.setBreadcrumbSeparator();
|
30 | this.setMaxItems();
|
31 | };
|
32 | this.resetActiveBreadcrumb = () => {
|
33 | const breadcrumbs = this.getBreadcrumbs();
|
34 |
|
35 |
|
36 | const activeBreadcrumb = breadcrumbs.find(breadcrumb => breadcrumb.active);
|
37 | if (activeBreadcrumb && this.activeChanged) {
|
38 | activeBreadcrumb.active = false;
|
39 | }
|
40 | };
|
41 | this.setMaxItems = () => {
|
42 | const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
|
43 | const breadcrumbs = this.getBreadcrumbs();
|
44 | for (const breadcrumb of breadcrumbs) {
|
45 | breadcrumb.showCollapsedIndicator = false;
|
46 | breadcrumb.collapsed = false;
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 | const shouldCollapse = maxItems !== undefined
|
52 | && breadcrumbs.length > maxItems
|
53 | && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
|
54 | if (shouldCollapse) {
|
55 |
|
56 | breadcrumbs.forEach((breadcrumb, index) => {
|
57 | if (index === itemsBeforeCollapse) {
|
58 | breadcrumb.showCollapsedIndicator = true;
|
59 | }
|
60 |
|
61 |
|
62 |
|
63 | if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
|
64 | breadcrumb.collapsed = true;
|
65 | }
|
66 | });
|
67 | }
|
68 | };
|
69 | this.setBreadcrumbSeparator = () => {
|
70 | const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
|
71 | const breadcrumbs = this.getBreadcrumbs();
|
72 |
|
73 | const active = breadcrumbs.find(breadcrumb => breadcrumb.active);
|
74 |
|
75 | for (const breadcrumb of breadcrumbs) {
|
76 |
|
77 |
|
78 |
|
79 | const last = maxItems !== undefined && itemsAfterCollapse === 0
|
80 | ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
|
81 | : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
|
82 | breadcrumb.last = last;
|
83 |
|
84 |
|
85 |
|
86 | const separator = breadcrumb.separator !== undefined
|
87 | ? breadcrumb.separator
|
88 | : (last ? undefined : true);
|
89 | breadcrumb.separator = separator;
|
90 |
|
91 |
|
92 | if (!active && last) {
|
93 | breadcrumb.active = true;
|
94 | this.activeChanged = true;
|
95 | }
|
96 | }
|
97 | };
|
98 | this.getBreadcrumbs = () => {
|
99 | return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
|
100 | };
|
101 | }
|
102 | onCollapsedClick(ev) {
|
103 | const breadcrumbs = this.getBreadcrumbs();
|
104 | const collapsedBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.collapsed);
|
105 | this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
|
106 | }
|
107 | maxItemsChanged() {
|
108 | this.resetActiveBreadcrumb();
|
109 | this.breadcrumbsInit();
|
110 | }
|
111 | componentWillLoad() {
|
112 | this.breadcrumbsInit();
|
113 | }
|
114 | render() {
|
115 | const { color, collapsed } = this;
|
116 | const mode = getIonMode(this);
|
117 | return (h(Host, { class: createColorClasses(color, {
|
118 | [mode]: true,
|
119 | 'in-toolbar': hostContext('ion-toolbar', this.el),
|
120 | 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
121 | 'breadcrumbs-collapsed': collapsed,
|
122 | }) }, h("slot", null)));
|
123 | }
|
124 | get el() { return this; }
|
125 | static get watchers() { return {
|
126 | "maxItems": ["maxItemsChanged"],
|
127 | "itemsBeforeCollapse": ["maxItemsChanged"],
|
128 | "itemsAfterCollapse": ["maxItemsChanged"]
|
129 | }; }
|
130 | static get style() { return {
|
131 | ios: breadcrumbsIosCss,
|
132 | md: breadcrumbsMdCss
|
133 | }; }
|
134 | }, [33, "ion-breadcrumbs", {
|
135 | "color": [1],
|
136 | "maxItems": [2, "max-items"],
|
137 | "itemsBeforeCollapse": [2, "items-before-collapse"],
|
138 | "itemsAfterCollapse": [2, "items-after-collapse"],
|
139 | "collapsed": [32],
|
140 | "activeChanged": [32]
|
141 | }, [[0, "collapsedClick", "onCollapsedClick"]]]);
|
142 | function defineCustomElement$1() {
|
143 | if (typeof customElements === "undefined") {
|
144 | return;
|
145 | }
|
146 | const components = ["ion-breadcrumbs"];
|
147 | components.forEach(tagName => { switch (tagName) {
|
148 | case "ion-breadcrumbs":
|
149 | if (!customElements.get(tagName)) {
|
150 | customElements.define(tagName, Breadcrumbs);
|
151 | }
|
152 | break;
|
153 | } });
|
154 | }
|
155 |
|
156 | const IonBreadcrumbs = Breadcrumbs;
|
157 | const defineCustomElement = defineCustomElement$1;
|
158 |
|
159 | export { IonBreadcrumbs, defineCustomElement };
|