@zanichelli/albe-web-components 7.4.0 → 7.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/index-e3299e0a.js +10 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/{z-app-header_13.cjs.entry.js → z-app-header_11.cjs.entry.js} +22 -571
- package/dist/cjs/z-breadcrumb.cjs.entry.js +237 -0
- package/dist/cjs/z-popover.cjs.entry.js +328 -0
- package/dist/cjs/z-section-title.cjs.entry.js +1 -1
- package/dist/collection/components/navigation/z-app-header/index.js +1 -1
- package/dist/collection/components/navigation/z-app-header/styles.css +5 -0
- package/dist/collection/components/z-breadcrumb/styles.css +4 -1
- package/dist/collection/components/z-section-title/styles.css +2 -1
- package/dist/esm/index-a2ca4b97.js +10 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-b7bdd1bf.js → utils-825aed23.js} +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/{z-app-header_13.entry.js → z-app-header_11.entry.js} +24 -571
- package/dist/esm/z-breadcrumb.entry.js +233 -0
- package/dist/esm/z-chip.entry.js +1 -1
- package/dist/esm/z-combobox.entry.js +1 -1
- package/dist/esm/z-file-upload.entry.js +1 -1
- package/dist/esm/z-myz-card-info.entry.js +1 -1
- package/dist/esm/z-myz-list-item.entry.js +1 -1
- package/dist/esm/z-pocket_3.entry.js +1 -1
- package/dist/esm/z-popover.entry.js +324 -0
- package/dist/esm/z-section-title.entry.js +1 -1
- package/dist/esm/z-select.entry.js +1 -1
- package/dist/esm/z-skip-to-content.entry.js +1 -1
- package/dist/esm/z-slideshow.entry.js +1 -1
- package/dist/esm/z-table-header.entry.js +1 -1
- package/dist/esm/z-toggle-switch.entry.js +1 -1
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/{p-ac5dda12.entry.js → p-073f24c9.entry.js} +1 -1
- package/dist/web-components-library/{p-d011d1b5.entry.js → p-0b942851.entry.js} +1 -1
- package/dist/web-components-library/{p-1e7ef8ca.entry.js → p-0eb7cb35.entry.js} +1 -1
- package/dist/web-components-library/p-0fd40ac5.entry.js +1 -0
- package/dist/web-components-library/{p-0397366d.js → p-14c2c56c.js} +1 -1
- package/{www/build/p-0235869e.entry.js → dist/web-components-library/p-2e7da553.entry.js} +1 -1
- package/dist/web-components-library/p-39863e41.entry.js +1 -0
- package/dist/web-components-library/p-447a7c51.entry.js +1 -0
- package/dist/web-components-library/{p-bda48953.entry.js → p-5825ef19.entry.js} +1 -1
- package/dist/web-components-library/p-98dcf178.entry.js +1 -0
- package/dist/web-components-library/p-98df8460.entry.js +1 -0
- package/dist/web-components-library/{p-a250409a.entry.js → p-9e400a11.entry.js} +1 -1
- package/dist/web-components-library/{p-485bff7b.entry.js → p-b44030d0.entry.js} +1 -1
- package/dist/web-components-library/p-bc331dde.entry.js +1 -0
- package/dist/web-components-library/{p-c8b36560.entry.js → p-dcad3493.entry.js} +1 -1
- package/dist/web-components-library/{p-c8bdfb84.entry.js → p-fa7a11fd.entry.js} +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/{p-ac5dda12.entry.js → p-073f24c9.entry.js} +1 -1
- package/www/build/{p-d011d1b5.entry.js → p-0b942851.entry.js} +1 -1
- package/www/build/{p-1e7ef8ca.entry.js → p-0eb7cb35.entry.js} +1 -1
- package/www/build/p-0fd40ac5.entry.js +1 -0
- package/www/build/{p-0397366d.js → p-14c2c56c.js} +1 -1
- package/{dist/web-components-library/p-0235869e.entry.js → www/build/p-2e7da553.entry.js} +1 -1
- package/www/build/p-39863e41.entry.js +1 -0
- package/www/build/p-447a7c51.entry.js +1 -0
- package/www/build/{p-bda48953.entry.js → p-5825ef19.entry.js} +1 -1
- package/www/build/p-98dcf178.entry.js +1 -0
- package/www/build/p-98df8460.entry.js +1 -0
- package/www/build/{p-a250409a.entry.js → p-9e400a11.entry.js} +1 -1
- package/www/build/p-a6cbf32c.js +1 -0
- package/www/build/{p-485bff7b.entry.js → p-b44030d0.entry.js} +1 -1
- package/www/build/p-bc331dde.entry.js +1 -0
- package/www/build/{p-c8b36560.entry.js → p-dcad3493.entry.js} +1 -1
- package/www/build/{p-c8bdfb84.entry.js → p-fa7a11fd.entry.js} +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -127
- package/dist/web-components-library/p-14ab82cd.entry.js +0 -1
- package/dist/web-components-library/p-515c2acf.entry.js +0 -1
- package/dist/web-components-library/p-685ae50d.entry.js +0 -1
- package/dist/web-components-library/p-a4b91a8f.entry.js +0 -1
- package/www/build/p-14ab82cd.entry.js +0 -1
- package/www/build/p-515c2acf.entry.js +0 -1
- package/www/build/p-685ae50d.entry.js +0 -1
- package/www/build/p-a4b91a8f.entry.js +0 -1
- package/www/build/p-e35c7022.js +0 -1
|
@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-e3299e0a.js');
|
|
6
6
|
const index$1 = require('./index-b7c319f2.js');
|
|
7
|
-
const utils = require('./utils-38f8555a.js');
|
|
8
7
|
const icons = require('./icons-a9849a41.js');
|
|
8
|
+
const utils = require('./utils-38f8555a.js');
|
|
9
9
|
require('./breakpoints-ebe1a437.js');
|
|
10
10
|
|
|
11
|
-
const stylesCss$
|
|
11
|
+
const stylesCss$a = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-text01);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-text01);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:26px}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}.drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
12
12
|
|
|
13
13
|
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
14
14
|
const ZAppHeader = class {
|
|
@@ -107,7 +107,7 @@ const ZAppHeader = class {
|
|
|
107
107
|
return parent;
|
|
108
108
|
}
|
|
109
109
|
get canShowMenu() {
|
|
110
|
-
return this.
|
|
110
|
+
return this.flow !== "offcanvas" && this.currentViewport !== "mobile" && !this.drawerOpen;
|
|
111
111
|
}
|
|
112
112
|
get canShowSearchbar() {
|
|
113
113
|
if (!this.enableSearch) {
|
|
@@ -181,236 +181,9 @@ const ZAppHeader = class {
|
|
|
181
181
|
"stuck": ["onStuckMode"]
|
|
182
182
|
}; }
|
|
183
183
|
};
|
|
184
|
-
ZAppHeader.style = stylesCss$
|
|
184
|
+
ZAppHeader.style = stylesCss$a;
|
|
185
185
|
|
|
186
|
-
const stylesCss$
|
|
187
|
-
|
|
188
|
-
const ZBreadcrumb = class {
|
|
189
|
-
constructor(hostRef) {
|
|
190
|
-
index.registerInstance(this, hostRef);
|
|
191
|
-
this.clickOnNode = index.createEvent(this, "clickOnNode", 7);
|
|
192
|
-
/** [optional] Sets the path style */
|
|
193
|
-
this.pathStyle = index$1.BreadcrumbPathStyle.UNDERLINED;
|
|
194
|
-
/** [optional] Variant of first node */
|
|
195
|
-
this.homepageVariant = index$1.BreadcrumbHomepageVariant.ICON;
|
|
196
|
-
/** [optional] Sets max number of element to show */
|
|
197
|
-
this.maxNodesToShow = 5;
|
|
198
|
-
/** [optional] Controls the behaviour on <a> tag click/enter */
|
|
199
|
-
this.preventFollowUrl = false;
|
|
200
|
-
/** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
|
|
201
|
-
this.overflowMenuItemRows = 0;
|
|
202
|
-
/** [optional] Sets the maximun number of chars per single node */
|
|
203
|
-
this.truncateChar = 30;
|
|
204
|
-
/** Detect whether the length of the nodes shown exceeds the container length */
|
|
205
|
-
this.hasOverflow = false;
|
|
206
|
-
this.popoverEllipsisOpen = false;
|
|
207
|
-
this.collapsedElements = [];
|
|
208
|
-
this.currentIndex = 0;
|
|
209
|
-
this.truncatePosition = null;
|
|
210
|
-
}
|
|
211
|
-
handleResize() {
|
|
212
|
-
this.viewPortWidth = utils.getDevice();
|
|
213
|
-
if (this.viewPortWidth !== index$1.Device.MOBILE &&
|
|
214
|
-
this.wrapElement &&
|
|
215
|
-
this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
|
|
216
|
-
this.hasOverflow = true;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
// eslint-disable-next-line lines-between-class-members
|
|
220
|
-
handlePropChange() {
|
|
221
|
-
this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
|
|
222
|
-
}
|
|
223
|
-
handleResizeUp(newValue, oldValue) {
|
|
224
|
-
if (newValue === index$1.Device.MOBILE ||
|
|
225
|
-
(oldValue === index$1.Device.MOBILE && newValue === index$1.Device.TABLET) ||
|
|
226
|
-
(oldValue === index$1.Device.MOBILE && newValue === index$1.Device.DESKTOP) ||
|
|
227
|
-
(oldValue === index$1.Device.MOBILE && newValue === index$1.Device.DESKTOP_WIDE) ||
|
|
228
|
-
(oldValue === index$1.Device.TABLET && newValue === index$1.Device.DESKTOP) ||
|
|
229
|
-
(oldValue === index$1.Device.TABLET && newValue === index$1.Device.DESKTOP_WIDE) ||
|
|
230
|
-
(oldValue === index$1.Device.DESKTOP && newValue === index$1.Device.DESKTOP_WIDE)) {
|
|
231
|
-
this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
componentWillLoad() {
|
|
235
|
-
this.viewPortWidth = utils.getDevice();
|
|
236
|
-
this.initializeBreadcrumb(this.viewPortWidth === index$1.Device.MOBILE);
|
|
237
|
-
}
|
|
238
|
-
componentWillRender() {
|
|
239
|
-
if (this.viewPortWidth !== index$1.Device.MOBILE && this.hasOverflow) {
|
|
240
|
-
this.checkEllipsisOrOverflowMenu();
|
|
241
|
-
this.hasOverflow = false;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
componentDidRender() {
|
|
245
|
-
if (this.collapsedElementsRef) {
|
|
246
|
-
this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"));
|
|
247
|
-
}
|
|
248
|
-
if (this.viewPortWidth !== index$1.Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
|
|
249
|
-
this.hasOverflow = true;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
initializeBreadcrumb(isMobile) {
|
|
253
|
-
if (isMobile) {
|
|
254
|
-
this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
|
|
255
|
-
}
|
|
256
|
-
else {
|
|
257
|
-
this.pathsList = this.getPathsItemsList();
|
|
258
|
-
}
|
|
259
|
-
this.totalLenght = this.pathsList.length;
|
|
260
|
-
this.homepageNode = this.pathsList.shift();
|
|
261
|
-
this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
|
|
262
|
-
this.collapsedElements = [];
|
|
263
|
-
if (this.totalLenght > this.maxNodesToShow) {
|
|
264
|
-
this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
checkEllipsisOrOverflowMenu() {
|
|
268
|
-
if (this.pathListCopy.length > 0) {
|
|
269
|
-
for (let i = 0; i < this.pathsList.length; i++) {
|
|
270
|
-
if (this.pathsList[i].text.length > this.truncateChar) {
|
|
271
|
-
if (this.truncatePosition !== null) {
|
|
272
|
-
if (this.truncatePosition > 0) {
|
|
273
|
-
const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
|
|
274
|
-
arrayToPush.forEach((item) => {
|
|
275
|
-
this.collapsedElements.push(item);
|
|
276
|
-
});
|
|
277
|
-
this.pathsList.splice(0, this.truncatePosition);
|
|
278
|
-
this.truncatePosition = 0;
|
|
279
|
-
return;
|
|
280
|
-
}
|
|
281
|
-
if (this.truncatePosition === 0) {
|
|
282
|
-
const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
|
|
283
|
-
this.collapsedElements.push(...arrayToPush);
|
|
284
|
-
this.pathsList.splice(0, this.truncatePosition + 1);
|
|
285
|
-
this.truncatePosition = null;
|
|
286
|
-
return;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
if (i !== this.pathsList.length - 1) {
|
|
290
|
-
const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
|
|
291
|
-
this.currentEllipsisText = this.pathsList[i].text;
|
|
292
|
-
this.pathsList[i].text = truncatedString;
|
|
293
|
-
this.pathsList[i].hasTooltip = true;
|
|
294
|
-
this.truncatePosition = i;
|
|
295
|
-
return;
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
truncateWithEllipsis(str, length) {
|
|
302
|
-
const ending = "…";
|
|
303
|
-
if (str.length > length) {
|
|
304
|
-
return str.substring(0, length - 1) + ending;
|
|
305
|
-
}
|
|
306
|
-
return str;
|
|
307
|
-
}
|
|
308
|
-
getPathsItemsList() {
|
|
309
|
-
if (!this.paths) {
|
|
310
|
-
return Array.from(this.hostElement.children).map((item) => {
|
|
311
|
-
return {
|
|
312
|
-
text: item.textContent,
|
|
313
|
-
path: item.href,
|
|
314
|
-
hasTooltip: false,
|
|
315
|
-
};
|
|
316
|
-
});
|
|
317
|
-
}
|
|
318
|
-
const ret = typeof this.paths === "string" ? JSON.parse(this.paths) : this.paths;
|
|
319
|
-
return ret.map((item) => {
|
|
320
|
-
return Object.assign(Object.assign({}, item), { hasTooltip: false });
|
|
321
|
-
});
|
|
322
|
-
}
|
|
323
|
-
renderMobileBreadcrumb() {
|
|
324
|
-
const lastPath = this.pathsList[this.pathsList.length - 1];
|
|
325
|
-
return (index.h("nav", { "aria-label": "Breadcrumb", class: {
|
|
326
|
-
underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
|
|
327
|
-
semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
|
|
328
|
-
} }, index.h("ol", null, this.renderNode(lastPath, true))));
|
|
329
|
-
}
|
|
330
|
-
renderHomepageNode(item) {
|
|
331
|
-
return (index.h("li", null, index.h("a", { class: {
|
|
332
|
-
"homepage-icon": this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON,
|
|
333
|
-
"homepage-text": this.homepageVariant === index$1.BreadcrumbHomepageVariant.TEXT,
|
|
334
|
-
}, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === index$1.BreadcrumbHomepageVariant.ICON ? (index.h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
|
|
335
|
-
}
|
|
336
|
-
renderNode(item, mobile) {
|
|
337
|
-
return (index.h("li", null, item.hasTooltip && (index.h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: index$1.PopoverPosition.BOTTOM, closable: false, showArrow: true }, index.h("span", { class: "tooltip-content" }, this.currentEllipsisText))), index.h("a", { class: {
|
|
338
|
-
"missing-path": !item.path,
|
|
339
|
-
"text-ellipsis": mobile,
|
|
340
|
-
}, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
|
|
341
|
-
if (item.hasTooltip) {
|
|
342
|
-
this.popoverEllipsisOpen = true;
|
|
343
|
-
}
|
|
344
|
-
}, onMouseLeave: () => {
|
|
345
|
-
if (item.hasTooltip) {
|
|
346
|
-
this.popoverEllipsisOpen = false;
|
|
347
|
-
}
|
|
348
|
-
}, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon> ${item.text}` : item.text })));
|
|
349
|
-
}
|
|
350
|
-
renderBreadcrumb() {
|
|
351
|
-
return (index.h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
|
|
352
|
-
underlined: this.pathStyle === index$1.BreadcrumbPathStyle.UNDERLINED,
|
|
353
|
-
semibold: this.pathStyle === index$1.BreadcrumbPathStyle.SEMIBOLD,
|
|
354
|
-
} }, index.h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
|
|
355
|
-
}
|
|
356
|
-
togglePopover() {
|
|
357
|
-
if (!this.collapsedElementsRef.open) {
|
|
358
|
-
this.collapsedElementsRef.open = true;
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
handlePreventFollowUrl(e, item) {
|
|
362
|
-
if (this.preventFollowUrl) {
|
|
363
|
-
e.preventDefault();
|
|
364
|
-
this.clickOnNode.emit(item.path);
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
handleOverflowMenuAccessibility(e) {
|
|
368
|
-
const anchorElementsLenght = this.anchorElements.length;
|
|
369
|
-
if (e.key === index$1.KeyboardCode.TAB) {
|
|
370
|
-
e.preventDefault();
|
|
371
|
-
return;
|
|
372
|
-
}
|
|
373
|
-
e.stopPropagation();
|
|
374
|
-
const arrows = [index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP];
|
|
375
|
-
if (arrows.includes(e.key)) {
|
|
376
|
-
e.preventDefault();
|
|
377
|
-
if (e.key === index$1.KeyboardCode.ARROW_DOWN) {
|
|
378
|
-
this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
|
|
379
|
-
}
|
|
380
|
-
if (e.key === index$1.KeyboardCode.ARROW_UP) {
|
|
381
|
-
this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
|
|
382
|
-
}
|
|
383
|
-
this.anchorElements[this.currentIndex].focus();
|
|
384
|
-
}
|
|
385
|
-
if (e.key === index$1.KeyboardCode.ESC) {
|
|
386
|
-
this.triggerButton.focus();
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
|
-
renderOverflowMenu() {
|
|
390
|
-
if (this.collapsedElements.length) {
|
|
391
|
-
return (index.h("li", null, index.h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: index$1.PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, index.h("div", { class: "popover-content" }, index.h("z-list", null, index.h("z-list-group", { dividerType: index$1.ListDividerType.ELEMENT, size: index$1.ListSize.SMALL }, this.collapsedElements.map((item) => (index.h("z-list-element", { clickable: true }, index.h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)))))))), index.h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
|
|
392
|
-
this.togglePopover();
|
|
393
|
-
}, onKeyDown: (e) => {
|
|
394
|
-
utils.handleKeyboardSubmit(e, this.togglePopover.bind(this));
|
|
395
|
-
setTimeout(() => {
|
|
396
|
-
this.anchorElements[0].focus();
|
|
397
|
-
}, 100);
|
|
398
|
-
} }, "...")));
|
|
399
|
-
}
|
|
400
|
-
}
|
|
401
|
-
render() {
|
|
402
|
-
return (index.h(index.Host, { style: { "--line-clamp": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === index$1.Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
|
|
403
|
-
}
|
|
404
|
-
get hostElement() { return index.getElement(this); }
|
|
405
|
-
static get watchers() { return {
|
|
406
|
-
"paths": ["handlePropChange"],
|
|
407
|
-
"maxNodesToShow": ["handlePropChange"],
|
|
408
|
-
"viewPortWidth": ["handleResizeUp"]
|
|
409
|
-
}; }
|
|
410
|
-
};
|
|
411
|
-
ZBreadcrumb.style = stylesCss$b;
|
|
412
|
-
|
|
413
|
-
const stylesCss$a = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
|
|
186
|
+
const stylesCss$9 = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
|
|
414
187
|
|
|
415
188
|
const ZButton = class {
|
|
416
189
|
constructor(hostRef) {
|
|
@@ -443,9 +216,9 @@ const ZButton = class {
|
|
|
443
216
|
}
|
|
444
217
|
get hostElement() { return index.getElement(this); }
|
|
445
218
|
};
|
|
446
|
-
ZButton.style = stylesCss$
|
|
219
|
+
ZButton.style = stylesCss$9;
|
|
447
220
|
|
|
448
|
-
const stylesCss$
|
|
221
|
+
const stylesCss$8 = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
|
|
449
222
|
|
|
450
223
|
const ZDivider = class {
|
|
451
224
|
constructor(hostRef) {
|
|
@@ -461,9 +234,9 @@ const ZDivider = class {
|
|
|
461
234
|
return (index.h(index.Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
|
|
462
235
|
}
|
|
463
236
|
};
|
|
464
|
-
ZDivider.style = stylesCss$
|
|
237
|
+
ZDivider.style = stylesCss$8;
|
|
465
238
|
|
|
466
|
-
const stylesCss$
|
|
239
|
+
const stylesCss$7 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
|
|
467
240
|
|
|
468
241
|
const ZIcon = class {
|
|
469
242
|
constructor(hostRef) {
|
|
@@ -479,9 +252,9 @@ const ZIcon = class {
|
|
|
479
252
|
return (index.h(index.Host, { "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(icons.ICONS[this.name]))));
|
|
480
253
|
}
|
|
481
254
|
};
|
|
482
|
-
ZIcon.style = stylesCss$
|
|
255
|
+
ZIcon.style = stylesCss$7;
|
|
483
256
|
|
|
484
|
-
const stylesCss$7 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--blue500)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background:var(--color-white) !important;background-clip:text !important;-webkit-transition-delay:99999s !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
|
|
257
|
+
const stylesCss$6 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--blue500)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background:var(--color-white) !important;background-clip:text !important;-webkit-transition-delay:99999s !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
|
|
485
258
|
|
|
486
259
|
const ZInput = class {
|
|
487
260
|
constructor(hostRef) {
|
|
@@ -713,9 +486,9 @@ const ZInput = class {
|
|
|
713
486
|
}
|
|
714
487
|
get hostElement() { return index.getElement(this); }
|
|
715
488
|
};
|
|
716
|
-
ZInput.style = stylesCss$
|
|
489
|
+
ZInput.style = stylesCss$6;
|
|
717
490
|
|
|
718
|
-
const stylesCss$
|
|
491
|
+
const stylesCss$5 = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-text-success)}:host([status=\"error\"]){color:var(--color-text-error)}:host([status=\"warning\"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}";
|
|
719
492
|
|
|
720
493
|
const ZInputMessage = class {
|
|
721
494
|
constructor(hostRef) {
|
|
@@ -741,9 +514,9 @@ const ZInputMessage = class {
|
|
|
741
514
|
"status": ["onMessageChange"]
|
|
742
515
|
}; }
|
|
743
516
|
};
|
|
744
|
-
ZInputMessage.style = stylesCss$
|
|
517
|
+
ZInputMessage.style = stylesCss$5;
|
|
745
518
|
|
|
746
|
-
const stylesCss$
|
|
519
|
+
const stylesCss$4 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
|
|
747
520
|
|
|
748
521
|
const ZList = class {
|
|
749
522
|
constructor(hostRef) {
|
|
@@ -773,9 +546,9 @@ const ZList = class {
|
|
|
773
546
|
}
|
|
774
547
|
get host() { return index.getElement(this); }
|
|
775
548
|
};
|
|
776
|
-
ZList.style = stylesCss$
|
|
549
|
+
ZList.style = stylesCss$4;
|
|
777
550
|
|
|
778
|
-
const stylesCss$
|
|
551
|
+
const stylesCss$3 = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked,:host([clickable]:not([expandable]))>.container-contextual-menu.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-list-content-container{display:flex;align-items:center}";
|
|
779
552
|
|
|
780
553
|
const ZListElement = class {
|
|
781
554
|
/**
|
|
@@ -940,9 +713,9 @@ const ZListElement = class {
|
|
|
940
713
|
}
|
|
941
714
|
get host() { return index.getElement(this); }
|
|
942
715
|
};
|
|
943
|
-
ZListElement.style = stylesCss$
|
|
716
|
+
ZListElement.style = stylesCss$3;
|
|
944
717
|
|
|
945
|
-
const stylesCss$
|
|
718
|
+
const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
|
|
946
719
|
|
|
947
720
|
const ZListGroup = class {
|
|
948
721
|
constructor(hostRef) {
|
|
@@ -992,9 +765,9 @@ const ZListGroup = class {
|
|
|
992
765
|
}
|
|
993
766
|
get host() { return index.getElement(this); }
|
|
994
767
|
};
|
|
995
|
-
ZListGroup.style = stylesCss$
|
|
768
|
+
ZListGroup.style = stylesCss$2;
|
|
996
769
|
|
|
997
|
-
const stylesCss$
|
|
770
|
+
const stylesCss$1 = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg);visibility:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not(.skip-animation){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
|
|
998
771
|
|
|
999
772
|
const ZOffcanvas = class {
|
|
1000
773
|
constructor(hostRef) {
|
|
@@ -1036,327 +809,7 @@ const ZOffcanvas = class {
|
|
|
1036
809
|
"open": ["onOpenChanged"]
|
|
1037
810
|
}; }
|
|
1038
811
|
};
|
|
1039
|
-
ZOffcanvas.style = stylesCss$
|
|
1040
|
-
|
|
1041
|
-
const stylesCss$1 = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-text01);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}";
|
|
1042
|
-
|
|
1043
|
-
const DOCUMENT_ELEMENT = document.documentElement;
|
|
1044
|
-
function getParentElement(element) {
|
|
1045
|
-
if (element.parentNode.host) {
|
|
1046
|
-
return element.parentNode.host;
|
|
1047
|
-
}
|
|
1048
|
-
return element.parentNode;
|
|
1049
|
-
}
|
|
1050
|
-
/**
|
|
1051
|
-
* Find the closest scrollable parent of a node.
|
|
1052
|
-
*
|
|
1053
|
-
* @param {Element} element The node
|
|
1054
|
-
*/
|
|
1055
|
-
function findScrollableParent(element) {
|
|
1056
|
-
let parent = getParentElement(element);
|
|
1057
|
-
while (parent && parent !== DOCUMENT_ELEMENT) {
|
|
1058
|
-
const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
|
|
1059
|
-
if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
|
|
1060
|
-
return parent;
|
|
1061
|
-
}
|
|
1062
|
-
if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
|
|
1063
|
-
(parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
|
|
1064
|
-
return parent;
|
|
1065
|
-
}
|
|
1066
|
-
parent = getParentElement(parent);
|
|
1067
|
-
}
|
|
1068
|
-
return DOCUMENT_ELEMENT;
|
|
1069
|
-
}
|
|
1070
|
-
/**
|
|
1071
|
-
* Calculate computed offset.
|
|
1072
|
-
* It includes matrix transformations.
|
|
1073
|
-
* @param element The target element.
|
|
1074
|
-
* @param targetParentOffset The relative offset parent.
|
|
1075
|
-
* @return A client rect object.
|
|
1076
|
-
*/
|
|
1077
|
-
function computeOffset(element, targetParentOffset) {
|
|
1078
|
-
const rect = element.getBoundingClientRect();
|
|
1079
|
-
const width = rect.width;
|
|
1080
|
-
const height = rect.height;
|
|
1081
|
-
let top = 0;
|
|
1082
|
-
let left = 0;
|
|
1083
|
-
let offsetParent = element;
|
|
1084
|
-
while (offsetParent && offsetParent != targetParentOffset) {
|
|
1085
|
-
left += offsetParent.offsetLeft;
|
|
1086
|
-
// document.body sometimes has offsetTop == 0 but still has an
|
|
1087
|
-
// offset because of children margins!
|
|
1088
|
-
if (offsetParent === document.body) {
|
|
1089
|
-
top += offsetParent.getBoundingClientRect().top + window.scrollY;
|
|
1090
|
-
}
|
|
1091
|
-
else {
|
|
1092
|
-
top += offsetParent.offsetTop;
|
|
1093
|
-
}
|
|
1094
|
-
if (window.DOMMatrix) {
|
|
1095
|
-
const style = window.getComputedStyle(offsetParent);
|
|
1096
|
-
const transform = style.transform || style.webkitTransform;
|
|
1097
|
-
const domMatrix = new DOMMatrix(transform);
|
|
1098
|
-
if (domMatrix) {
|
|
1099
|
-
left += domMatrix.m41;
|
|
1100
|
-
if (offsetParent !== document.body) {
|
|
1101
|
-
top += domMatrix.m42;
|
|
1102
|
-
}
|
|
1103
|
-
}
|
|
1104
|
-
}
|
|
1105
|
-
if (!offsetParent.offsetParent) {
|
|
1106
|
-
break;
|
|
1107
|
-
}
|
|
1108
|
-
offsetParent = offsetParent.offsetParent;
|
|
1109
|
-
}
|
|
1110
|
-
let parentWidth;
|
|
1111
|
-
let parentHeight;
|
|
1112
|
-
if (offsetParent === document.body) {
|
|
1113
|
-
parentWidth = window.innerWidth;
|
|
1114
|
-
parentHeight = window.innerHeight;
|
|
1115
|
-
}
|
|
1116
|
-
else {
|
|
1117
|
-
parentWidth = offsetParent.offsetWidth;
|
|
1118
|
-
parentHeight = offsetParent.offsetHeight;
|
|
1119
|
-
}
|
|
1120
|
-
const right = parentWidth - left - rect.width;
|
|
1121
|
-
const bottom = parentHeight - top - rect.height;
|
|
1122
|
-
return { top, right, bottom, left, width, height };
|
|
1123
|
-
}
|
|
1124
|
-
const ZPopover = class {
|
|
1125
|
-
constructor(hostRef) {
|
|
1126
|
-
index.registerInstance(this, hostRef);
|
|
1127
|
-
this.positionChange = index.createEvent(this, "positionChange", 7);
|
|
1128
|
-
this.openChange = index.createEvent(this, "openChange", 7);
|
|
1129
|
-
/** Popover position. */
|
|
1130
|
-
this.position = index$1.PopoverPosition.AUTO;
|
|
1131
|
-
/**
|
|
1132
|
-
* The open state of the popover.
|
|
1133
|
-
*/
|
|
1134
|
-
this.open = false;
|
|
1135
|
-
/**
|
|
1136
|
-
* Whether to show popover's arrow.
|
|
1137
|
-
*/
|
|
1138
|
-
this.showArrow = false;
|
|
1139
|
-
/**
|
|
1140
|
-
* Whether to center the popup on the main side (according to "position").
|
|
1141
|
-
*/
|
|
1142
|
-
this.center = false;
|
|
1143
|
-
/**
|
|
1144
|
-
* If true, the popover can be closed by clicking outside of it or pressing the escape key.
|
|
1145
|
-
* Otherwise, it will be closed only programmatically (by setting `open` to `false`).
|
|
1146
|
-
*/
|
|
1147
|
-
this.closable = true;
|
|
1148
|
-
}
|
|
1149
|
-
closePopoverWithKeyboard(e) {
|
|
1150
|
-
if (this.closable && e.key === index$1.KeyboardCode.ESC) {
|
|
1151
|
-
this.open = false;
|
|
1152
|
-
}
|
|
1153
|
-
}
|
|
1154
|
-
/**
|
|
1155
|
-
* Close the popover when clicking outside of its content.
|
|
1156
|
-
* Stop event propagation if the click was fired by popover's trigger element,
|
|
1157
|
-
* to prevent close and reopen glitches.
|
|
1158
|
-
* @param {MouseEvent} e
|
|
1159
|
-
*/
|
|
1160
|
-
handleOutsideClick(e) {
|
|
1161
|
-
if (!this.closable || !this.open) {
|
|
1162
|
-
return;
|
|
1163
|
-
}
|
|
1164
|
-
if (!e.composedPath().includes(this.host)) {
|
|
1165
|
-
const target = e.target;
|
|
1166
|
-
const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
|
|
1167
|
-
if (triggerElemClicked) {
|
|
1168
|
-
e.stopPropagation();
|
|
1169
|
-
}
|
|
1170
|
-
this.open = false;
|
|
1171
|
-
this.positionChange.emit({ position: this.currentPosition });
|
|
1172
|
-
}
|
|
1173
|
-
}
|
|
1174
|
-
validatePosition(newValue) {
|
|
1175
|
-
if (newValue && !Object.values(index$1.PopoverPosition).includes(newValue)) {
|
|
1176
|
-
this.position = index$1.PopoverPosition.AUTO;
|
|
1177
|
-
}
|
|
1178
|
-
this.currentPosition = this.position;
|
|
1179
|
-
this.positionChange.emit({ position: this.currentPosition });
|
|
1180
|
-
}
|
|
1181
|
-
/**
|
|
1182
|
-
* Setup popover behaviors on opening.
|
|
1183
|
-
*/
|
|
1184
|
-
onOpen() {
|
|
1185
|
-
cancelAnimationFrame(this.animationFrameRequestId);
|
|
1186
|
-
if (this.open) {
|
|
1187
|
-
const setPosition = () => {
|
|
1188
|
-
if (this.open) {
|
|
1189
|
-
this.setPosition();
|
|
1190
|
-
this.animationFrameRequestId = requestAnimationFrame(setPosition);
|
|
1191
|
-
}
|
|
1192
|
-
};
|
|
1193
|
-
setPosition();
|
|
1194
|
-
}
|
|
1195
|
-
else if (this.host.hasAttribute("current-position")) {
|
|
1196
|
-
this.host.removeAttribute("current-position");
|
|
1197
|
-
this.currentPosition = undefined;
|
|
1198
|
-
}
|
|
1199
|
-
this.openChange.emit({ open: this.open });
|
|
1200
|
-
}
|
|
1201
|
-
disconnectedCallback() {
|
|
1202
|
-
cancelAnimationFrame(this.animationFrameRequestId);
|
|
1203
|
-
}
|
|
1204
|
-
/**
|
|
1205
|
-
* Set the position of the popover.
|
|
1206
|
-
*/
|
|
1207
|
-
setPosition() {
|
|
1208
|
-
let element;
|
|
1209
|
-
if (typeof this.bindTo === "string") {
|
|
1210
|
-
element = this.host.ownerDocument.querySelector(this.bindTo);
|
|
1211
|
-
}
|
|
1212
|
-
else if (this.bindTo) {
|
|
1213
|
-
element = this.bindTo;
|
|
1214
|
-
}
|
|
1215
|
-
else {
|
|
1216
|
-
element = this.host.parentElement;
|
|
1217
|
-
}
|
|
1218
|
-
if (!element) {
|
|
1219
|
-
return;
|
|
1220
|
-
}
|
|
1221
|
-
const scrollContainer = findScrollableParent(element);
|
|
1222
|
-
const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
|
|
1223
|
-
const offsetContainer = this.host.offsetParent;
|
|
1224
|
-
const relativeBoundingRect = offsetContainer
|
|
1225
|
-
? computeOffset(offsetContainer, scrollContainer)
|
|
1226
|
-
: { top: 0, right: 0, bottom: 0, left: 0 };
|
|
1227
|
-
const boundingRect = computeOffset(element, scrollContainer);
|
|
1228
|
-
const top = boundingRect.top - scrollContainer.scrollTop;
|
|
1229
|
-
const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
|
|
1230
|
-
const left = boundingRect.left - scrollContainer.scrollLeft;
|
|
1231
|
-
const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
|
|
1232
|
-
const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
|
|
1233
|
-
const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
|
|
1234
|
-
const availableTop = Math.min(top, top + scrollingBoundingRect.top);
|
|
1235
|
-
const availableBottom = Math.min(bottom, bottom - overflowBottom);
|
|
1236
|
-
const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
|
|
1237
|
-
const availableRight = Math.min(right, right - overflowRight);
|
|
1238
|
-
const availableHeight = availableTop + availableBottom + boundingRect.height;
|
|
1239
|
-
const availableWidth = availableLeft + availableRight + boundingRect.width;
|
|
1240
|
-
let position = this.currentPosition;
|
|
1241
|
-
const positions = [];
|
|
1242
|
-
if (this.position === index$1.PopoverPosition.AUTO) {
|
|
1243
|
-
/**
|
|
1244
|
-
* The `AUTO` position tries to place the popover in the 'safest' area,
|
|
1245
|
-
* where there's more space available.
|
|
1246
|
-
*/
|
|
1247
|
-
if (availableLeft / availableWidth > 0.6) {
|
|
1248
|
-
positions.push(index$1.PopoverPosition.LEFT);
|
|
1249
|
-
}
|
|
1250
|
-
else if (availableLeft / availableWidth < 0.4) {
|
|
1251
|
-
positions.push(index$1.PopoverPosition.RIGHT);
|
|
1252
|
-
}
|
|
1253
|
-
if (availableTop / availableHeight > 0.9) {
|
|
1254
|
-
positions.unshift(index$1.PopoverPosition.TOP);
|
|
1255
|
-
}
|
|
1256
|
-
else if (availableTop / availableHeight > 0.6) {
|
|
1257
|
-
positions.push(index$1.PopoverPosition.TOP);
|
|
1258
|
-
}
|
|
1259
|
-
else if (availableTop / availableHeight < 0.1) {
|
|
1260
|
-
positions.unshift(index$1.PopoverPosition.BOTTOM);
|
|
1261
|
-
}
|
|
1262
|
-
else {
|
|
1263
|
-
positions.push(index$1.PopoverPosition.BOTTOM);
|
|
1264
|
-
}
|
|
1265
|
-
position = positions.join("_");
|
|
1266
|
-
}
|
|
1267
|
-
const style = this.host.style;
|
|
1268
|
-
style.position = "absolute";
|
|
1269
|
-
const offsetTop = boundingRect.top - relativeBoundingRect.top;
|
|
1270
|
-
const offsetRight = boundingRect.right - relativeBoundingRect.right;
|
|
1271
|
-
const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
|
|
1272
|
-
const offsetLeft = boundingRect.left - relativeBoundingRect.left;
|
|
1273
|
-
const offsetModifier = this.center ? 0.5 : 0;
|
|
1274
|
-
const sizeModifier = this.center ? 0.5 : 0;
|
|
1275
|
-
if (position === index$1.PopoverPosition.TOP || position === index$1.PopoverPosition.TOP_RIGHT) {
|
|
1276
|
-
style.top = "auto";
|
|
1277
|
-
style.right = "auto";
|
|
1278
|
-
style.bottom = `${offsetBottom + boundingRect.height}px`;
|
|
1279
|
-
style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
|
|
1280
|
-
style.maxHeight = `${availableTop}px`;
|
|
1281
|
-
if (position === index$1.PopoverPosition.TOP_RIGHT) {
|
|
1282
|
-
style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
|
|
1283
|
-
}
|
|
1284
|
-
}
|
|
1285
|
-
else if (position === index$1.PopoverPosition.TOP_LEFT) {
|
|
1286
|
-
style.top = "auto";
|
|
1287
|
-
style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
|
|
1288
|
-
style.bottom = `${offsetBottom + boundingRect.height}px`;
|
|
1289
|
-
style.left = "auto";
|
|
1290
|
-
style.maxWidth = `${availableLeft}px`;
|
|
1291
|
-
style.maxHeight = `${availableTop}px`;
|
|
1292
|
-
}
|
|
1293
|
-
else if (position === index$1.PopoverPosition.BOTTOM || position === index$1.PopoverPosition.BOTTOM_RIGHT) {
|
|
1294
|
-
style.top = `${offsetTop + boundingRect.height}px`;
|
|
1295
|
-
style.right = "auto";
|
|
1296
|
-
style.bottom = "auto";
|
|
1297
|
-
style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
|
|
1298
|
-
style.maxHeight = `${availableBottom}px`;
|
|
1299
|
-
if (position === index$1.PopoverPosition.BOTTOM_RIGHT) {
|
|
1300
|
-
style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
|
|
1301
|
-
}
|
|
1302
|
-
}
|
|
1303
|
-
else if (position === index$1.PopoverPosition.BOTTOM_LEFT) {
|
|
1304
|
-
style.top = `${offsetTop + boundingRect.height}px`;
|
|
1305
|
-
style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
|
|
1306
|
-
style.bottom = "auto";
|
|
1307
|
-
style.left = "auto";
|
|
1308
|
-
style.maxWidth = `${availableLeft}px`;
|
|
1309
|
-
style.maxHeight = `${availableBottom}px`;
|
|
1310
|
-
}
|
|
1311
|
-
else if (position === index$1.PopoverPosition.RIGHT || position === index$1.PopoverPosition.RIGHT_BOTTOM) {
|
|
1312
|
-
style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
|
|
1313
|
-
style.right = "auto";
|
|
1314
|
-
style.bottom = "auto";
|
|
1315
|
-
style.left = `${offsetLeft + boundingRect.width}px`;
|
|
1316
|
-
style.maxWidth = `${availableRight}px`;
|
|
1317
|
-
style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
|
|
1318
|
-
}
|
|
1319
|
-
else if (position === index$1.PopoverPosition.RIGHT_TOP) {
|
|
1320
|
-
style.top = "auto";
|
|
1321
|
-
style.right = "auto";
|
|
1322
|
-
style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
|
|
1323
|
-
style.left = `${offsetLeft + boundingRect.width}px`;
|
|
1324
|
-
style.maxWidth = `${availableRight}px`;
|
|
1325
|
-
style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
|
|
1326
|
-
}
|
|
1327
|
-
else if (position === index$1.PopoverPosition.LEFT || position === index$1.PopoverPosition.LEFT_BOTTOM) {
|
|
1328
|
-
style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
|
|
1329
|
-
style.right = `${offsetRight + boundingRect.width}px`;
|
|
1330
|
-
style.bottom = "auto";
|
|
1331
|
-
style.left = "auto";
|
|
1332
|
-
style.maxWidth = `${availableLeft}px`;
|
|
1333
|
-
style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
|
|
1334
|
-
}
|
|
1335
|
-
else if (position === index$1.PopoverPosition.LEFT_TOP) {
|
|
1336
|
-
style.top = "auto";
|
|
1337
|
-
style.right = `${offsetRight + boundingRect.width}px`;
|
|
1338
|
-
style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
|
|
1339
|
-
style.left = "auto";
|
|
1340
|
-
style.maxWidth = `${availableLeft}px`;
|
|
1341
|
-
style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
|
|
1342
|
-
}
|
|
1343
|
-
this.currentPosition = position || this.position;
|
|
1344
|
-
this.host.setAttribute("current-position", this.currentPosition);
|
|
1345
|
-
}
|
|
1346
|
-
componentWillLoad() {
|
|
1347
|
-
this.validatePosition(this.position);
|
|
1348
|
-
this.onOpen();
|
|
1349
|
-
}
|
|
1350
|
-
render() {
|
|
1351
|
-
return index.h("slot", null);
|
|
1352
|
-
}
|
|
1353
|
-
get host() { return index.getElement(this); }
|
|
1354
|
-
static get watchers() { return {
|
|
1355
|
-
"position": ["validatePosition"],
|
|
1356
|
-
"open": ["onOpen"]
|
|
1357
|
-
}; }
|
|
1358
|
-
};
|
|
1359
|
-
ZPopover.style = stylesCss$1;
|
|
812
|
+
ZOffcanvas.style = stylesCss$1;
|
|
1360
813
|
|
|
1361
814
|
const stylesCss = ":host{z-index:10;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-text01);text-transform:uppercase}.results z-list-element{display:block}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-text01);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size=\"x-small\"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}";
|
|
1362
815
|
|
|
@@ -1585,7 +1038,6 @@ const ZSearchbar = class {
|
|
|
1585
1038
|
ZSearchbar.style = stylesCss;
|
|
1586
1039
|
|
|
1587
1040
|
exports.z_app_header = ZAppHeader;
|
|
1588
|
-
exports.z_breadcrumb = ZBreadcrumb;
|
|
1589
1041
|
exports.z_button = ZButton;
|
|
1590
1042
|
exports.z_divider = ZDivider;
|
|
1591
1043
|
exports.z_icon = ZIcon;
|
|
@@ -1595,5 +1047,4 @@ exports.z_list = ZList;
|
|
|
1595
1047
|
exports.z_list_element = ZListElement;
|
|
1596
1048
|
exports.z_list_group = ZListGroup;
|
|
1597
1049
|
exports.z_offcanvas = ZOffcanvas;
|
|
1598
|
-
exports.z_popover = ZPopover;
|
|
1599
1050
|
exports.z_searchbar = ZSearchbar;
|