npm - @zanichelli/albe-web-components - Versions diffs - 17.0.0-RC4 → 17.0.1 - Mend

@zanichelli/albe-web-components 17.0.0-RC4 → 17.0.1

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.

Files changed (820) hide show

package/dist/esm/z-navigation-tabs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-navigation-tabs.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,4mIAA4mI,CAAC;AAC/nI,8BAAe,SAAS;;MCaX,eAAe;;;;;;;QAyDlB,eAAU,GAAG,SAAS,CAAC;yBApDnB,EAAE;2BAMC,yBAAyB,CAAC,UAAU;oBAM3C,kBAAkB,CAAC,GAAG;2BAQR,SAAS;;;;;;;;IA0C/B,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,WAAW,IAAI,yBAAyB,CAAC,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC;KAClF;;;;IAKD,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,WAAW,IAAI,yBAAyB,CAAC,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;KACtF;IAED,IAAI,IAAI;QACN,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAkB,CAAC;KACvD;;;;IAOO,WAAW,CAAC,UAAuB;QACzC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,UAAU,CAAC,cAAc,iBACvB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;;;;IAKO,iBAAiB;QACvB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;YAChB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC;YAC3E,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;;;;IAKO,eAAe;QACrB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;YAChB,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC;YAC7G,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;;;;IAKO,iBAAiB,CAAC,CAAgB;QACxC,OAAO,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAmC,CAAC,CAAC;KACpG;;;;IAKO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;KAC9F;;;;IAMD,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,eAAe;YAClB,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QAClH,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC;KAChE;;;;IAMD,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YACvB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1C,MAAM,UAAU,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;YACtD,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,EAAE;gBAC1B,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC3C,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBAClB,IAAI,KAAK,EAAE;oBACT,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;iBACzB;gBAED,OAAO;aACR;YAED,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,SAAS,CAAC;aACrC;YACD,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SAC3C,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;SAC/C;KACF;;;;;IAOD,cAAc,CAAC,KAAiB;QAC9B,MAAM,UAAU,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAc,cAAc,CAAC,CAAC;QACtF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE;YAC1D,OAAO;SACR;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;KAClD;;;;IAMD,YAAY,CAAC,KAAiB;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAC,CAAC;QACxF,IAAI,OAAO,KAAK,CAAC,CAAC,EAAE;YAClB,OAAO;SACR;QAED,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC3C;QACD,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;KAC9C;;;;IAMD,mBAAmB,CAAC,KAAoB;QACtC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;YACzG,OAAO,IAAI,CAAC;SACb;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,4BAA4B,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,yBAAyB,CAAC,UAAU;aAC5G,KAAK,CAAC,GAAG,KAAK,4BAA4B,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,IAAI,yBAAyB,CAAC,QAAQ,CAAC,EAC3G;;YAEA,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACvC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;aACrB;SACF;aAAM,IACL,CAAC,KAAK,CAAC,GAAG,KAAK,4BAA4B,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,IAAI,yBAAyB,CAAC,UAAU;aAC3G,KAAK,CAAC,GAAG,KAAK,4BAA4B,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IAAI,yBAAyB,CAAC,QAAQ,CAAC,EACzG;;YAEA,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;gBACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;aACxC;SACF;;QAED,IACE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO,EAC/D;YACA,OAAO,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;SACxC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;KAC9C;;;;IAMD,aAAa,CAAC,KAAiB;;QAC7B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC,EAAE;YAC9E,IAAI,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;YAC9C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;SAC7B;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;KAC3E;IAED,gBAAgB;;;QAEd,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG;YACpB,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YAChC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SACnB,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC;QACrG,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE;YACzB,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;YAClC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;YACvC,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;SAC3B;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACvC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACnC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,kBAAkB,CAAC,KAAK;gBACvD,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,kBAAkB,CAAC,KAAK;aACxD,EACD,UAAU,EAAE,IAAI,CAAC,WAAW,IAE5B,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,gBACpB,4BAA4B,EACvC,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW,IAEzB,+DACE,IAAI,EAAE,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU,GAAG,cAAc,GAAG,YAAY,EAC/F,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,EAET,4DACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,SAAS,EAC1B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,GAAG,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,sBAC1B,IAAI,CAAC,WAAW,IAElC,8DAAa,CACT,EAEN,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,gBACpB,4BAA4B,EACvC,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW,IAEzB,+DACE,IAAI,EAAE,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,EAClG,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACJ,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n --z-navigation-tabs-nav-buttons-bg: ;\n --z-navigation-tabs-nav-buttons-fg: ;\n\n position: relative;\n z-index: 0;\n display: flex;\n overflow: hidden;\n flex-direction: row;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n display: none;\n}\n\nz-navigation-tabs .navigation-button {\n position: absolute;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n border-radius: var(--border-no-radius);\n box-shadow: 0 0 4px 1px var(--shadow-color-base);\n cursor: pointer;\n fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n display: none;\n}\n\nz-navigation-tabs > nav {\n z-index: 0;\n display: flex;\n overflow: auto;\n align-items: center;\n justify-content: flex-start;\n scroll-behavior: smooth;\n\n /* hide scrollbar in Firefox /\n scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n top: 0;\n width: calc(var(--space-unit) 4);\n height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n right: 0;\n}\n\n/* Orientation vertical /\nz-navigation-tabs[orientation=\"vertical\"] {\n width: fit-content;\n flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n left: 0;\n width: 100%;\n height: calc(var(--space-unit) 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs /\n\nz-navigation-tabs > nav > {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: auto;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n border: none;\n margin: 0;\n background-color: unset;\n border-radius: var(--border-no-radius);\n color: var(--color-primary01);\n cursor: pointer;\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: inherit;\n gap: var(--space-unit);\n letter-spacing: inherit;\n line-height: inherit;\n outline: none;\n text-align: center;\n white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n text-decoration: none;\n}\n\nz-navigation-tabs > nav > :focus:focus-visible {\n z-index: 1;\n box-shadow: inset 0 0 4px 3px var(--blue800);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n background-color: var(--color-surface02);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n color: var(--color-disabled03);\n cursor: not-allowed;\n fill: currentcolor;\n pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n color: var(--color-hover-secondary);\n fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n position: absolute;\n background-color: var(--color-hover-secondary);\n content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > z-icon {\n --z-icon-width: calc(var(--space-unit) * 2);\n --z-icon-height: calc(var(--space-unit) * 2);\n\n display: flex;\n margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) /\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n/* Orientation Vertical /\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > {\n padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n top: 0;\n right: 0;\n width: var(--border-size-large);\n height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/*\n Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n /\n@Component({\n tag: \"z-navigation-tabs\",\n styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n /\n Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n /\n @Prop()\n ariaLabel = \"\";\n\n /\n Navigation tabs orientation.\n /\n @Prop({reflect: true})\n orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n /\n Navigation tabs size.\n /\n @Prop({reflect: true})\n size? = NavigationTabsSize.BIG;\n\n /\n Index of the selected tab.\n * Useful to programmatically select a tab.\n * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n /\n @Prop({mutable: true})\n selectedTab: number = undefined;\n\n /\n Emitted when the selected tab changes.\n * Contains the index of the new selected tab in the `detail` of the event.\n /\n @Event()\n selected: EventEmitter<number>;\n\n /\n Whether to show navigation buttons.\n /\n @State()\n canNavigate: boolean;\n\n /\n Whether backwards navigation is allowed.\n /\n @State()\n canNavigatePrev: boolean;\n\n /\n Whether forward navigation is allowed.\n /\n @State()\n canNavigateNext: boolean;\n\n @Element() host: HTMLZNavigationTabsElement;\n\n /\n Index of the last tab that held focus.\n /\n private focusedTab = undefined;\n\n /\n Reference to the `<nav>` element\n /\n private nav: HTMLElement;\n\n /\n Getter for the direction to check based on current orientation.\n /\n get direction(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n }\n\n /\n Getter for the dimension to check based on current orientation.\n /\n get dimension(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n }\n\n get tabs(): HTMLElement[] {\n return Array.from(this.nav.children) as HTMLElement[];\n }\n\n private resizeObserver: ResizeObserver;\n\n /\n Scroll into view to center the tab.\n /\n private scrollToTab(tabElement: HTMLElement): void {\n const scrollOptions = (\n this.orientation === NavigationTabsOrientation.HORIZONTAL\n ? {block: \"nearest\", inline: \"center\"}\n : {block: \"center\", inline: \"nearest\"}\n ) as ScrollIntoViewOptions;\n\n tabElement.scrollIntoView({\n behavior: \"smooth\",\n ...scrollOptions,\n });\n }\n\n /\n Scroll the navigation bar half of its size backward.\n /\n private navigateBackwards(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Scroll the navigation bar half of its size forward.\n /\n private navigateForward(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if a keyboard event was triggered by an arrow key.\n /\n private isArrowNavigation(e: KeyboardEvent): boolean {\n return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n }\n\n /\n Check if the navigation buttons are needed.\n /\n private checkScrollVisible(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n }\n\n /\n Check if navigation buttons can be enabled for each direction.\n /\n @Watch(\"canNavigate\")\n checkScrollEnabled(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigateNext =\n this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n }\n\n /\n When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n /\n @Watch(\"selectedTab\")\n onTabSelected(): void {\n this.tabs.forEach((tab, i) => {\n const zicon = tab.querySelector(\"z-icon\");\n const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n if (zicon) {\n zicon.name = strokeIcon;\n }\n\n return;\n }\n\n if (zicon) {\n zicon.name = `${strokeIcon}-filled`;\n }\n tab.setAttribute(\"aria-selected\", \"true\");\n });\n this.selected.emit(this.selectedTab);\n if (this.selectedTab !== undefined) {\n this.scrollToTab(this.tabs[this.selectedTab]);\n }\n }\n\n /\n Handle click on the tabs.\n * @param event `click` event triggered by a child tab\n /\n @Listen(\"click\")\n handleTabClick(event: MouseEvent): void {\n const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n if (!this.tabs.some((child) => child.contains(clickedTab))) {\n return;\n }\n\n this.selectedTab = this.tabs.indexOf(clickedTab);\n }\n\n /\n When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n /\n @Listen(\"focusin\")\n onTabFocusIn(event: FocusEvent): void {\n const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n if (focused === -1) {\n return;\n }\n\n if (this.selectedTab !== undefined) {\n this.tabs[this.selectedTab].tabIndex = -1;\n }\n this.focusedTab = focused;\n this.tabs[this.focusedTab].tabIndex = -1;\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n Handle keyboard navigation through tabs with arrow keys.\n /\n @Listen(\"keydown\")\n navigateThroughTabs(event: KeyboardEvent): void \| boolean {\n if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) \|\| !this.isArrowNavigation(event)) {\n return true;\n }\n\n event.preventDefault();\n if (\n (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move forward\n this.focusedTab++;\n if (this.focusedTab >= this.tabs.length) {\n this.focusedTab = 0;\n }\n } else if (\n (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move backward\n this.focusedTab--;\n if (this.focusedTab < 0) {\n this.focusedTab = this.tabs.length - 1;\n }\n }\n // Ignore disabled tabs\n if (\n this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n ) {\n return this.navigateThroughTabs(event);\n }\n\n this.tabs[this.focusedTab].focus();\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n */\n @Listen(\"focusout\")\n onTabFocusOut(event: FocusEvent): void {\n if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n this.focusedTab = undefined;\n }\n }\n\n connectedCallback(): void {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n }\n\n componentDidLoad(): void {\n // Set role and tabindex to each slotted tab\n this.tabs.forEach((tab) => {\n tab.setAttribute(\"role\", \"tab\");\n tab.tabIndex = -1;\n });\n\n const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n if (preselectedTab !== -1) {\n this.selectedTab = preselectedTab;\n this.tabs[preselectedTab].tabIndex = 0;\n this.onTabSelected();\n } else {\n this.tabs[0].tabIndex = 0;\n }\n\n this.resizeObserver.observe(this.nav);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZNavigationTabsElement {\n return (\n <Host\n class={{\n \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n }}\n scrollable={this.canNavigate}\n >\n <button\n class=\"navigation-button\"\n onClick={this.navigateBackwards.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigatePrev}\n aria-label=\"Mostra elementi precedenti\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n </button>\n\n <nav\n role=\"tablist\"\n aria-label={this.ariaLabel}\n ref={(el) => (this.nav = el ?? this.nav)}\n onScroll={this.checkScrollEnabled.bind(this)}\n aria-orientation={this.orientation}\n >\n <slot></slot>\n </nav>\n\n <button\n class=\"navigation-button\"\n onClick={this.navigateForward.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigateNext}\n aria-label=\"Mostra elementi successivi\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n width={16}\n height={16}\n />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-navigation-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n --z-navigation-tabs-nav-buttons-bg: ;\n --z-navigation-tabs-nav-buttons-fg: ;\n\n position: relative;\n z-index: 0;\n display: flex;\n overflow: hidden;\n flex-direction: row;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n display: none;\n}\n\nz-navigation-tabs .navigation-button {\n position: absolute;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: 0;\n background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n border-radius: var(--border-no-radius);\n box-shadow: 0 0 4px 1px var(--shadow-color-base);\n cursor: pointer;\n fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n display: none;\n}\n\nz-navigation-tabs > nav {\n z-index: 0;\n display: flex;\n overflow: auto;\n align-items: center;\n justify-content: flex-start;\n scroll-behavior: smooth;\n\n /* hide scrollbar in Firefox /\n scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n top: 0;\n width: calc(var(--space-unit) 4);\n height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n right: 0;\n}\n\n/* Orientation vertical /\nz-navigation-tabs[orientation=\"vertical\"] {\n width: fit-content;\n flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n left: 0;\n width: 100%;\n height: calc(var(--space-unit) 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs /\n\nz-navigation-tabs > nav > {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: auto;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n border: none;\n margin: 0;\n background-color: unset;\n border-radius: var(--border-no-radius);\n color: var(--color-primary01);\n cursor: pointer;\n fill: currentcolor;\n font-family: var(--font-family-sans);\n font-size: inherit;\n gap: var(--space-unit);\n letter-spacing: inherit;\n line-height: inherit;\n outline: none;\n text-align: center;\n white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n text-decoration: none;\n}\n\nz-navigation-tabs > nav > :focus:focus-visible {\n z-index: 1;\n box-shadow: inset 0 0 4px 3px var(--blue800);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n background-color: var(--color-background);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n color: var(--color-disabled03);\n cursor: not-allowed;\n fill: currentcolor;\n pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n color: var(--color-hover-primary);\n fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n position: absolute;\n background-color: var(--color-hover-primary);\n content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > z-icon {\n --z-icon-width: calc(var(--space-unit) * 2);\n --z-icon-height: calc(var(--space-unit) * 2);\n\n display: flex;\n margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) /\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n --z-icon-width: 14px;\n --z-icon-height: 14px;\n}\n\n/* Orientation Vertical /\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > {\n padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n top: 0;\n right: 0;\n width: var(--border-size-large);\n height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/*\n Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n /\n@Component({\n tag: \"z-navigation-tabs\",\n styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n /\n Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n /\n @Prop()\n ariaLabel = \"\";\n\n /\n Navigation tabs orientation.\n /\n @Prop({reflect: true})\n orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n /\n Navigation tabs size.\n /\n @Prop({reflect: true})\n size? = NavigationTabsSize.BIG;\n\n /\n Index of the selected tab.\n * Useful to programmatically select a tab.\n * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n /\n @Prop({mutable: true})\n selectedTab: number = undefined;\n\n /\n Emitted when the selected tab changes.\n * Contains the index of the new selected tab in the `detail` of the event.\n /\n @Event()\n selected: EventEmitter<number>;\n\n /\n Whether to show navigation buttons.\n /\n @State()\n canNavigate: boolean;\n\n /\n Whether backwards navigation is allowed.\n /\n @State()\n canNavigatePrev: boolean;\n\n /\n Whether forward navigation is allowed.\n /\n @State()\n canNavigateNext: boolean;\n\n @Element() host: HTMLZNavigationTabsElement;\n\n /\n Index of the last tab that held focus.\n /\n private focusedTab = undefined;\n\n /\n Reference to the `<nav>` element\n /\n private nav: HTMLElement;\n\n /\n Getter for the direction to check based on current orientation.\n /\n get direction(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n }\n\n /\n Getter for the dimension to check based on current orientation.\n /\n get dimension(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n }\n\n get tabs(): HTMLElement[] {\n return Array.from(this.nav.children) as HTMLElement[];\n }\n\n private resizeObserver: ResizeObserver;\n\n /\n Scroll into view to center the tab.\n /\n private scrollToTab(tabElement: HTMLElement): void {\n const scrollOptions = (\n this.orientation === NavigationTabsOrientation.HORIZONTAL\n ? {block: \"nearest\", inline: \"center\"}\n : {block: \"center\", inline: \"nearest\"}\n ) as ScrollIntoViewOptions;\n\n tabElement.scrollIntoView({\n behavior: \"smooth\",\n ...scrollOptions,\n });\n }\n\n /\n Scroll the navigation bar half of its size backward.\n /\n private navigateBackwards(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Scroll the navigation bar half of its size forward.\n /\n private navigateForward(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if a keyboard event was triggered by an arrow key.\n /\n private isArrowNavigation(e: KeyboardEvent): boolean {\n return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n }\n\n /\n Check if the navigation buttons are needed.\n /\n private checkScrollVisible(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n }\n\n /\n Check if navigation buttons can be enabled for each direction.\n /\n @Watch(\"canNavigate\")\n checkScrollEnabled(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigateNext =\n this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n }\n\n /\n When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n /\n @Watch(\"selectedTab\")\n onTabSelected(): void {\n this.tabs.forEach((tab, i) => {\n const zicon = tab.querySelector(\"z-icon\");\n const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n if (zicon) {\n zicon.name = strokeIcon;\n }\n\n return;\n }\n\n if (zicon) {\n zicon.name = `${strokeIcon}-filled`;\n }\n tab.setAttribute(\"aria-selected\", \"true\");\n });\n this.selected.emit(this.selectedTab);\n if (this.selectedTab !== undefined) {\n this.scrollToTab(this.tabs[this.selectedTab]);\n }\n }\n\n /\n Handle click on the tabs.\n * @param event `click` event triggered by a child tab\n /\n @Listen(\"click\")\n handleTabClick(event: MouseEvent): void {\n const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n if (!this.tabs.some((child) => child.contains(clickedTab))) {\n return;\n }\n\n this.selectedTab = this.tabs.indexOf(clickedTab);\n }\n\n /\n When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n /\n @Listen(\"focusin\")\n onTabFocusIn(event: FocusEvent): void {\n const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n if (focused === -1) {\n return;\n }\n\n if (this.selectedTab !== undefined) {\n this.tabs[this.selectedTab].tabIndex = -1;\n }\n this.focusedTab = focused;\n this.tabs[this.focusedTab].tabIndex = -1;\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n Handle keyboard navigation through tabs with arrow keys.\n /\n @Listen(\"keydown\")\n navigateThroughTabs(event: KeyboardEvent): void \| boolean {\n if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) \|\| !this.isArrowNavigation(event)) {\n return true;\n }\n\n event.preventDefault();\n if (\n (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move forward\n this.focusedTab++;\n if (this.focusedTab >= this.tabs.length) {\n this.focusedTab = 0;\n }\n } else if (\n (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move backward\n this.focusedTab--;\n if (this.focusedTab < 0) {\n this.focusedTab = this.tabs.length - 1;\n }\n }\n // Ignore disabled tabs\n if (\n this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n ) {\n return this.navigateThroughTabs(event);\n }\n\n this.tabs[this.focusedTab].focus();\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n */\n @Listen(\"focusout\")\n onTabFocusOut(event: FocusEvent): void {\n if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n this.focusedTab = undefined;\n }\n }\n\n connectedCallback(): void {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n }\n\n componentDidLoad(): void {\n // Set role and tabindex to each slotted tab\n this.tabs.forEach((tab) => {\n tab.setAttribute(\"role\", \"tab\");\n tab.tabIndex = -1;\n });\n\n const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n if (preselectedTab !== -1) {\n this.selectedTab = preselectedTab;\n this.tabs[preselectedTab].tabIndex = 0;\n this.onTabSelected();\n } else {\n this.tabs[0].tabIndex = 0;\n }\n\n this.resizeObserver.observe(this.nav);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZNavigationTabsElement {\n return (\n <Host\n class={{\n \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n }}\n scrollable={this.canNavigate}\n >\n <button\n class=\"navigation-button\"\n onClick={this.navigateBackwards.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigatePrev}\n aria-label=\"Mostra elementi precedenti\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n </button>\n\n <nav\n role=\"tablist\"\n aria-label={this.ariaLabel}\n ref={(el) => (this.nav = el ?? this.nav)}\n onScroll={this.checkScrollEnabled.bind(this)}\n aria-orientation={this.orientation}\n >\n <slot></slot>\n </nav>\n\n <button\n class=\"navigation-button\"\n onClick={this.navigateForward.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigateNext}\n aria-label=\"Mostra elementi successivi\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n width={16}\n height={16}\n />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-notification.entry.js CHANGED Viewed

@@ -27,7 +27,7 @@ const ZNotification = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5bc1e8046c14e46f02f9667939709a267cb1265a' }, this.contenticonname && (h("z-icon", { key: '7a944afae100f5fea48ca8499b6a0a035a6d289e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '038391eb846f043bc83c236e6e18998797bcb7a3', class: "content-container" }, h("div", { key: '330233ee7524fb271ffa5231a86b6cd906b2994d', class: "content-text" }, h("slot", { key: '290343fa633f1969d4f1059047797b16c3da9860' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '096b5cfdb55bac40adc9b2f56b9a4dc739ad4cc1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '80d985cbcd6501f9640dc2e16ac978de731a0d24', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'd7fe5573c93ac7ab36ccbecc01972b8d3cccc8bd', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: 'a9024960c6f2dc0ece7aa520041ca72c8b57a480' }, this.contenticonname && (h("z-icon", { key: '8e03da23ac3ea16294466b45cf571003299e12ff', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '65872d76a4f4be94181a60eede48ba8729be6fe4', class: "content-container" }, h("div", { key: '6f1abfbd2e8f86f4cfdf63f3ffaa87fb7d0abcd7', class: "content-text" }, h("slot", { key: '8537004a8679d3e1fb5eed9ca4fc36611b7355a3' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '8fff1a74d49404718d7b9e160a26fb659ded1855', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1969d8f6609b65444366b5b757729a7930d91630', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'ebfb4631d790f2406c7475b8adc123872db7e145', name: "multiply-circle", width: 16, height: 16 })))));
     }
 };
 ZNotification.style = ZNotificationStyle0;

package/dist/esm/z-otp.entry.js CHANGED Viewed

@@ -20,7 +20,7 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: 'ef073bc38e7b79bde2973898d73007aa4adfe103', class: "otp-container" }, h("div", { key: 'cfe112903058316aa1388a409887a36b8851b8e2', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '94853e28f7436d7d36a714903652859b8946d815', class: "otp-container" }, h("div", { key: '064503a5920f0b6db493b0a0514019674647ce65', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -31,7 +31,7 @@ const ZOtp = class {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '421d350536cc5a6b7de7ba47868bcd98c204c166', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '915a9e80bb6c9e775e029fa6c2680f9fe4720f4b', message: this.message, status: this.status })));
     }
 };
 ZOtp.style = ZOtpStyle0;

package/dist/esm/z-panel-elem.entry.js CHANGED Viewed

@@ -18,11 +18,12 @@ const ZPanelElem = class {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '28f5d98850bf13270b4ddf9585722c39f87ee12e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '065c198cfef6d982df79871d084454f425e0d57d', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5b42b99982e78dea89cf144a717e619b65904ab9', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'd15c0e008ca2f5172228217b5418d263a59af932', class: "panel-elem-link" }, h("a", { key: 'ef3343aa91a3656095a61731fa3b81be4362023a', class: {
+        return (h("div", { key: 'f7a46055c7c9c6b8c55f7eab312975c2469d92f3', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '7371ab7dcd59e19ddc29e92cdcd7d53791736b2a', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '84b88cb9a9fe9fa95052cbfc200fa82b157fff19', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'f0e28a73c56a4d348c8b2b9c05fc6fa205136bac', class: "panel-elem-link" }, h("a", { key: 'cc34e31fa64a26eaf94941840d19af34623da9dd', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'bff6dd92beba473e54fa0c78649bef7c975acfdc', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '3ec7ae15ca7f0593d74c5c31a93e87a4035bbab5', class: "panel-elem-desc" }, h("slot", { key: 'd46b701a9f39089119719eb80a3a54f814eff0af', name: this.descrSlotName })))));
+                "z-link-blue": true,
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '438e5e90d9754effc32825029f2198a3ea0d4be3', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '8ba6727d7d11fe869a3e973a1a065b70b42dfe43', class: "panel-elem-desc" }, h("slot", { key: '887ea4cfc7950c97226fe8566e3ef49b0ecbf87b', name: this.descrSlotName })))));
     }
 };
 ZPanelElem.style = ZPanelElemStyle0;

package/dist/esm/z-panel-elem.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-panel-elem.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,2zBAA2zB,CAAC;AAC90B,yBAAe,SAAS;;MCUX,UAAU;;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;IAM5B,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAE9C,QACE,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,MAC1B,2EACc,MAAM,EAClB,KAAK,EAAC,iBAAiB,IAEvB,4DACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACE,CACP,EACD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAClC,aAAa,EAAE,IAAI;aACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,+DACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX,EACT,IAAI,CAAC,SAAS,CACb,CACA,EACL,IAAI,CAAC,aAAa,KACjB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,EACN;KACH;;;;;;","names":[],"sources":["src/components/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n width: inherit;\n font-family: var(--font-family sans);\n font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n width: 100%;\n}\n\n.panel-elem-icon {\n margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n display: block;\n max-width: 96px;\n height: 32px;\n margin: auto;\n object-fit: contain;\n}\n\n.panel-elem-link {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: var(--space-unit) auto 0;\n border-radius: var(--border-no-radius);\n font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n padding: calc(var(--space-unit) * 0.5) 0;\n font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n padding-top: var(--space-unit);\n margin: 0;\n letter-spacing: 0.16px;\n text-align: center;\n}\n\na > z-icon {\n margin-right: var(--space-unit);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n/*\n @slot `descrSlotName` - description content\n /\n@Component({\n tag: \"z-panel-elem\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZPanelElem {\n /* html element id (optional) /\n @Prop()\n elemid?: string;\n\n /* image url source (optional) /\n @Prop()\n imgurl?: string;\n\n /* alternative image text (optional) /\n @Prop()\n imgalt?: string;\n\n /* icon link name (optional) /\n @Prop()\n linkicon?: string;\n\n /* link label text/\n @Prop()\n linklabel: string;\n\n /* link url /\n @Prop()\n url: string;\n\n /* link target (optional) /\n @Prop()\n target?: string = \"_blank\";\n\n /* disabled status flag (optional) /\n @Prop()\n isdisabled?: boolean = false;\n\n /* name of slot container (optional) */\n @Prop()\n descrSlotName?: string;\n\n render(): HTMLDivElement {\n const elemId = this.elemid ? this.elemid : \"\";\n\n return (\n <div class=\"panel-elem-container\">\n {(this.imgurl \|\| this.imgalt) && (\n <div\n aria-hidden=\"true\"\n class=\"panel-elem-icon\"\n >\n <img\n src={this.imgurl}\n alt={this.imgalt}\n />\n </div>\n )}\n <div class=\"panel-elem-link\">\n <a\n class={{\n \"z-link\": true,\n \"z-link-disabled\": this.isdisabled,\n \"z-link-icon\": true,\n }}\n id={elemId + \"link_id\"}\n href={this.url}\n target={this.target}\n >\n <z-icon\n height={14}\n width={14}\n name={this.linkicon}\n ></z-icon>\n {this.linklabel}\n </a>\n </div>\n {this.descrSlotName && (\n <div class=\"panel-elem-desc\">\n <slot name={this.descrSlotName} />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-panel-elem.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,2zBAA2zB,CAAC;AAC90B,yBAAe,SAAS;;MCUX,UAAU;;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;IAM5B,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAE9C,QACE,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,MAC1B,2EACc,MAAM,EAClB,KAAK,EAAC,iBAAiB,IAEvB,4DACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACE,CACP,EACD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAClC,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI;aACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,+DACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX,EACT,IAAI,CAAC,SAAS,CACb,CACA,EACL,IAAI,CAAC,aAAa,KACjB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,EACN;KACH;;;;;;","names":[],"sources":["src/components/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n width: inherit;\n font-family: var(--font-family sans);\n font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n width: 100%;\n}\n\n.panel-elem-icon {\n margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n display: block;\n max-width: 96px;\n height: 32px;\n margin: auto;\n object-fit: contain;\n}\n\n.panel-elem-link {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: var(--space-unit) auto 0;\n border-radius: var(--border-no-radius);\n font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n padding: calc(var(--space-unit) * 0.5) 0;\n font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n padding-top: var(--space-unit);\n margin: 0;\n letter-spacing: 0.16px;\n text-align: center;\n}\n\na > z-icon {\n margin-right: var(--space-unit);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n/*\n @slot `descrSlotName` - description content\n /\n@Component({\n tag: \"z-panel-elem\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZPanelElem {\n /* html element id (optional) /\n @Prop()\n elemid?: string;\n\n /* image url source (optional) /\n @Prop()\n imgurl?: string;\n\n /* alternative image text (optional) /\n @Prop()\n imgalt?: string;\n\n /* icon link name (optional) /\n @Prop()\n linkicon?: string;\n\n /* link label text/\n @Prop()\n linklabel: string;\n\n /* link url /\n @Prop()\n url: string;\n\n /* link target (optional) /\n @Prop()\n target?: string = \"_blank\";\n\n /* disabled status flag (optional) /\n @Prop()\n isdisabled?: boolean = false;\n\n /* name of slot container (optional) */\n @Prop()\n descrSlotName?: string;\n\n render(): HTMLDivElement {\n const elemId = this.elemid ? this.elemid : \"\";\n\n return (\n <div class=\"panel-elem-container\">\n {(this.imgurl \|\| this.imgalt) && (\n <div\n aria-hidden=\"true\"\n class=\"panel-elem-icon\"\n >\n <img\n src={this.imgurl}\n alt={this.imgalt}\n />\n </div>\n )}\n <div class=\"panel-elem-link\">\n <a\n class={{\n \"z-link\": true,\n \"z-link-disabled\": this.isdisabled,\n \"z-link-icon\": true,\n \"z-link-blue\": true,\n }}\n id={elemId + \"link_id\"}\n href={this.url}\n target={this.target}\n >\n <z-icon\n height={14}\n width={14}\n name={this.linkicon}\n ></z-icon>\n {this.linklabel}\n </a>\n </div>\n {this.descrSlotName && (\n <div class=\"panel-elem-desc\">\n <slot name={this.descrSlotName} />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-popover.entry.js CHANGED Viewed

@@ -300,7 +300,7 @@ const ZPopover = class {
         this.onOpen();
     }
     render() {
-        return h("slot", { key: '8f4f0fe9ef6306cd1f3470912baf791c2da33358' });
+        return h("slot", { key: 'ea2b46de2cec89ebd692407e0ddb51e47d552e73' });
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-range-picker.entry.js CHANGED Viewed

@@ -334,14 +334,14 @@ const ZRangePicker = class {
             onStopTyping: this.onStopTyping.bind(this),
             value: "",
         };
-        return (h("div", { key: '218859a883b75a370836a60ee42a611cee89829a', class: {
+        return (h("div", { key: 'a53d148ab03744a1f3db628f7b246c24c5974c64', class: {
                 ["range-pickers-container"]: true,
                 [this.mode]: true,
                 [this.activeInput]: true,
                 [this.flatpickrPosition]: true,
-            } }, h("div", { key: '6367639ca9b53bb5052a4313e0232466dd64750a', class: `${this.rangePickerId}-1-wrapper` }, h("div", { key: '31bb99a98433f3c2a6c454dae3dfa93886e05d66', class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({ key: 'b5d3566e21429694e585169d32876c1b2767d03b' }, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
+            } }, h("div", { key: 'b48ad8c0946dbf4d293ab727d48434377754bcd2', class: `${this.rangePickerId}-1-wrapper` }, h("div", { key: 'fdf59e2f5910fa066ab81ad9e43af5e88f26ec17', class: `${this.rangePickerId}-1-container` }, h("z-input", Object.assign({ key: 'd850efc6a9d2d1405b201fc200cd1b624e0fd3db' }, zInputProps, { placeholder: this.firstPickerPlaceholder, readonly: this.firstPickerReadOnly, "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && InputStatus.ERROR, onStartTyping: () => {
                 this.firstInputError = false;
-            } })))), h("div", { key: 'daa8bcca99e4647b3baf28ab509f7dceb4de6819', class: `${this.rangePickerId}-2-wrapper` }, h("div", { key: 'fb9c4f6d22da2f354f6b96cf2e7171f797a49904', class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({ key: '616fb784c3d748b76249c503ffea58883ec84c6e' }, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
+            } })))), h("div", { key: '5d033db058bb143ac0cca9020605f6ab9153cc0d', class: `${this.rangePickerId}-2-wrapper` }, h("div", { key: 'eabdc4b1a5703a349c8b3d978970b77278352a53', class: `${this.rangePickerId}-2-container` }, h("z-input", Object.assign({ key: 'bfd97975a2dd54710ce8da89c8debb68b7fc3af3' }, zInputProps, { placeholder: this.lastPickerPlaceholder, readonly: this.lastPickerReadOnly, "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && InputStatus.ERROR, onStartTyping: () => {
                 this.lastInputError = false;
             } }))))));
     }

package/dist/esm/z-section-title.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const ZSectionTitle = class {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: '210ee0186531e1ec5e3fce429377bd623a5a5e7e' }, h("slot", { key: '6762e419de9b01f89a196fdbba849de55a395c0f', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '46292b4fe512a726fa41b35b48329f2e419377b8', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '5f1ea29a3a742d12c41b58a6e7b6004c5819bac8', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '43f9b568633850a8fb94457ecf091b37d16e6b49', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: 'cc1204e8c23b71671a14fbaedd761f748f277cfa' }, h("slot", { key: '8272a7661bda0190963225a5ffaa192e22601363', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '7eae53ac6122253f61d985c79549ff65b85e10ff', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '9b86031ca0776ac5faae2393e62ad8104d5e804e', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '6d3de14737fc2187f8a32d5e27aeae12ab9e83c5', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/z-select.entry.js CHANGED Viewed

@@ -322,7 +322,7 @@ const ZSelect = class {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
     }
     render() {
-        return (h("div", { key: '325c38217b549ab622be127a8a901dff1fad2958', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '1ad24c71d6838f434592d96047388b0fb3886127', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-skip-to-content.entry.js CHANGED Viewed

@@ -48,7 +48,7 @@ const ZSkipToContent = class {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '650e3f4b6003f0acbe974f84772c0ec12bea6688', class: {
+        return (h(Host, { key: '3887a0d40964e8bb4dd860e49dccca7863f2a902', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {
@@ -57,8 +57,7 @@ const ZSkipToContent = class {
                     "body-1-sb": true,
                     "z-link": true,
                     "z-link-underline": true,
-                    "z-link-white": this.variant === ThemeVariant.DARK,
-                    "z-link-black": this.variant !== ThemeVariant.DARK,
+                    "z-link-inverse": this.variant === ThemeVariant.DARK,
                     "link-visible": id == this.visibleLink,
                     "link-invisible": id != this.visibleLink,
                 }, "aria-label": link.ariaLabel || link.label, href: link.href, onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label)));

package/dist/esm/z-skip-to-content.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-skip-to-content.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,w3DAAw3D,CAAC;AAC34D,6BAAe,SAAS;;MCYX,cAAc;;;;qBAOa,EAAE;uBAG9B,KAAK;2BAGD,EAAE;;IAKhB,2BAA2B,CAAC,CAAa;QACvC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAGD,wBAAwB,CAAC,CAAa;QACpC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;SACnF;KACF;IAEO,iBAAiB,CAAC,IAAI;QAC5B,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAa,KAAK,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,mBAAmB,CAAC,CAAC;QAErG,OAAO,CAAC,CAAC,UAAU,CAAC;KACrB;IAEO,cAAc;;QACpB,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,0CAAG,CAAC,CAAC,CAAC;QAClD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,EAAE,CAAC;SAClC;KACF;IAEO,eAAe;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;gBACpB,yBAAyB,EAAE,IAAI,CAAC,OAAO;aACxC,IAEC,IAAI,CAAC,KAA6B,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YAC/C,MAAM,EAAE,GAAG,mBAAmB,CAAC,EAAE,CAAC;YAElC,QACE,WAAK,KAAK,EAAC,gBAAgB,IACzB,SACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI;oBACjB,QAAQ,EAAE,IAAI;oBACd,kBAAkB,EAAE,IAAI;oBACxB,~~cAAc~~,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,IAAI;~~oBAClD~~,cAAc,EAAE,~~IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,IAAI;oBAClD,cAAc,~~EAAE,~~EAAE,~~IAAI,IAAI,CAAC,WAAW;oBACtC,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW;iBACzC,gBACW,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACtC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,OAAO,EAAE,CAAC,CAAC,KAAK,oBAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAEvE,IAAI,CAAC,KAAK,CACT,CACA,EACN;SACH,CAAC,CACG,EACP;KACH;;;;;;;","names":[],"sources":["src/components/z-skip-to-content/styles.css?tag=z-skip-to-content&encapsulation=scoped","src/components/z-skip-to-content/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n left: -100%;\n height: 60px;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);\n background-color: #24f4ff;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n text-align: center;\n}\n\n:host > .link-container {\n display: inline-flex;\n height: 100%;\n align-items: center;\n}\n\n:host.skip-to-content-visible,\n:host:focus {\n position: static;\n display: block;\n}\n\n:host > .link-container > a.z-link.link-invisible {\n overflow: hidden;\n width: 0;\n height: 0;\n}\n\n:host > .link-container > a.z-link.link-visible {\n width: initial;\n height: initial;\n}\n\n:host.dark {\n background-color: var(--color-surface05);\n color: var(--color-surface01);\n}\n\n:host.light {\n border: var(--border-size-medium) solid var(--color-surface05);\n background-color: var(--color-surface01);\n color: var(--color-default-text);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host {\n text-align: start;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n :host > .link-container {\n padding: 0 calc(var(--space-unit) 3);\n border-right: var(--border-size-small) solid var(--color-surface05);\n }\n\n :host > .link-container > a.z-link.link-invisible {\n overflow: initial;\n width: initial;\n height: initial;\n }\n\n :host > .link-container:first-child {\n padding-left: 0;\n }\n\n :host > .link-container:last-child,\n :host.dark > .link-container:last-child,\n :host.light > .link-container:last-child {\n padding-right: 0;\n border-right: none;\n }\n\n :host.dark > .link-container {\n border-right: var(--border-size-small) solid var(--color-surface01);\n }\n}\n","import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {SkipToContentLink, ThemeVariant} from \"../../beans\";\nimport {getElementTree, handleKeyboardSubmit} from \"../../utils/utils\";\n\n/*\n Component short description.\n /\n@Component({\n tag: \"z-skip-to-content\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZSkipToContent {\n /* Graphical variant: `dark`, `light`. /\n @Prop({reflect: true})\n variant?: ThemeVariant;\n\n /* Array to fill link into skip-content */\n @Prop({mutable: true})\n links: string \| SkipToContentLink[] = [];\n\n @State()\n visible = false;\n\n @State()\n visibleLink = \"\";\n\n @Element() hostElement: HTMLZSkipToContentElement;\n\n @Listen(\"focusout\", {target: \"document\"})\n handleFocusOutSkipToContent(e: FocusEvent): void {\n if (this.isInSkipToContent(e.target)) {\n this.visible = false;\n }\n }\n\n @Listen(\"focusin\", {target: \"document\"})\n handleFocusSkipToContent(e: FocusEvent): void {\n if (this.isInSkipToContent(e.target)) {\n this.visible = true;\n }\n }\n\n componentDidLoad(): void {\n this.showFirstChild();\n }\n\n componentWillRender(): void {\n if (this.links) {\n this.links = typeof this.links === \"string\" ? JSON.parse(this.links) : this.links;\n }\n }\n\n private isInSkipToContent(elem): boolean {\n const tree = getElementTree(elem);\n const menuParent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-skip-to-content\");\n\n return !!menuParent;\n }\n\n private showFirstChild(): void {\n const firstChild = this.hostElement.children?.[0];\n if (firstChild) {\n this.visibleLink = firstChild.id;\n }\n }\n\n private handleLinkClick(): void {\n this.visible = false;\n }\n\n render(): HTMLZSkipToContentElement {\n return (\n <Host\n class={{\n [this.variant]: true,\n \"skip-to-content-visible\": this.visible,\n }}\n >\n {(this.links as SkipToContentLink[]).map((link, i) => {\n const id = `skip-to-content-${i}`;\n\n return (\n <div class=\"link-container\">\n <a\n id={id}\n class={{\n \"body-1-sb\": true,\n \"z-link\": true,\n \"z-link-underline\": true,\n \"z-link-~~white~~\": this.variant === ThemeVariant.DARK,\n \"z-link-~~black\": this.variant !== ThemeVariant.DARK,\n \"link-~~visible\": id == this.visibleLink,\n \"link-invisible\": id != this.visibleLink,\n }}\n aria-label={link.ariaLabel \|\| link.label}\n href={link.href}\n onFocus={() => (this.visibleLink = id)}\n onClick={() => this.handleLinkClick()}\n onKeyUp={(e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this))}\n >\n {link.label}\n </a>\n </div>\n );\n })}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-skip-to-content.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,w3DAAw3D,CAAC;AAC34D,6BAAe,SAAS;;MCYX,cAAc;;;;qBAOa,EAAE;uBAG9B,KAAK;2BAGD,EAAE;;IAKhB,2BAA2B,CAAC,CAAa;QACvC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAGD,wBAAwB,CAAC,CAAa;QACpC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;SACnF;KACF;IAEO,iBAAiB,CAAC,IAAI;QAC5B,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAa,KAAK,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,mBAAmB,CAAC,CAAC;QAErG,OAAO,CAAC,CAAC,UAAU,CAAC;KACrB;IAEO,cAAc;;QACpB,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,0CAAG,CAAC,CAAC,CAAC;QAClD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,EAAE,CAAC;SAClC;KACF;IAEO,eAAe;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;gBACpB,yBAAyB,EAAE,IAAI,CAAC,OAAO;aACxC,IAEC,IAAI,CAAC,KAA6B,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YAC/C,MAAM,EAAE,GAAG,mBAAmB,CAAC,EAAE,CAAC;YAElC,QACE,WAAK,KAAK,EAAC,gBAAgB,IACzB,SACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI;oBACjB,QAAQ,EAAE,IAAI;oBACd,kBAAkB,EAAE,IAAI;oBACxB,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,IAAI;oBACpD,cAAc,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW;oBACtC,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW;iBACzC,gBACW,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACtC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,OAAO,EAAE,CAAC,CAAC,KAAK,oBAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAEvE,IAAI,CAAC,KAAK,CACT,CACA,EACN;SACH,CAAC,CACG,EACP;KACH;;;;;;;","names":[],"sources":["src/components/z-skip-to-content/styles.css?tag=z-skip-to-content&encapsulation=scoped","src/components/z-skip-to-content/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n left: -100%;\n height: 60px;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);\n background-color: #24f4ff;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n text-align: center;\n}\n\n:host > .link-container {\n display: inline-flex;\n height: 100%;\n align-items: center;\n}\n\n:host.skip-to-content-visible,\n:host:focus {\n position: static;\n display: block;\n}\n\n:host > .link-container > a.z-link.link-invisible {\n overflow: hidden;\n width: 0;\n height: 0;\n}\n\n:host > .link-container > a.z-link.link-visible {\n width: initial;\n height: initial;\n}\n\n:host.dark {\n background-color: var(--color-surface05);\n color: var(--color-surface01);\n}\n\n:host.light {\n border: var(--border-size-medium) solid var(--color-surface05);\n background-color: var(--color-surface01);\n color: var(--color-default-text);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host {\n text-align: start;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n :host > .link-container {\n padding: 0 calc(var(--space-unit) 3);\n border-right: var(--border-size-small) solid var(--color-surface05);\n }\n\n :host > .link-container > a.z-link.link-invisible {\n overflow: initial;\n width: initial;\n height: initial;\n }\n\n :host > .link-container:first-child {\n padding-left: 0;\n }\n\n :host > .link-container:last-child,\n :host.dark > .link-container:last-child,\n :host.light > .link-container:last-child {\n padding-right: 0;\n border-right: none;\n }\n\n :host.dark > .link-container {\n border-right: var(--border-size-small) solid var(--color-surface01);\n }\n}\n","import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {SkipToContentLink, ThemeVariant} from \"../../beans\";\nimport {getElementTree, handleKeyboardSubmit} from \"../../utils/utils\";\n\n/*\n Component short description.\n /\n@Component({\n tag: \"z-skip-to-content\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZSkipToContent {\n /* Graphical variant: `dark`, `light`. /\n @Prop({reflect: true})\n variant?: ThemeVariant;\n\n /* Array to fill link into skip-content */\n @Prop({mutable: true})\n links: string \| SkipToContentLink[] = [];\n\n @State()\n visible = false;\n\n @State()\n visibleLink = \"\";\n\n @Element() hostElement: HTMLZSkipToContentElement;\n\n @Listen(\"focusout\", {target: \"document\"})\n handleFocusOutSkipToContent(e: FocusEvent): void {\n if (this.isInSkipToContent(e.target)) {\n this.visible = false;\n }\n }\n\n @Listen(\"focusin\", {target: \"document\"})\n handleFocusSkipToContent(e: FocusEvent): void {\n if (this.isInSkipToContent(e.target)) {\n this.visible = true;\n }\n }\n\n componentDidLoad(): void {\n this.showFirstChild();\n }\n\n componentWillRender(): void {\n if (this.links) {\n this.links = typeof this.links === \"string\" ? JSON.parse(this.links) : this.links;\n }\n }\n\n private isInSkipToContent(elem): boolean {\n const tree = getElementTree(elem);\n const menuParent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-skip-to-content\");\n\n return !!menuParent;\n }\n\n private showFirstChild(): void {\n const firstChild = this.hostElement.children?.[0];\n if (firstChild) {\n this.visibleLink = firstChild.id;\n }\n }\n\n private handleLinkClick(): void {\n this.visible = false;\n }\n\n render(): HTMLZSkipToContentElement {\n return (\n <Host\n class={{\n [this.variant]: true,\n \"skip-to-content-visible\": this.visible,\n }}\n >\n {(this.links as SkipToContentLink[]).map((link, i) => {\n const id = `skip-to-content-${i}`;\n\n return (\n <div class=\"link-container\">\n <a\n id={id}\n class={{\n \"body-1-sb\": true,\n \"z-link\": true,\n \"z-link-underline\": true,\n \"z-link-inverse\": this.variant === ThemeVariant.DARK,\n \"link-visible\": id == this.visibleLink,\n \"link-invisible\": id != this.visibleLink,\n }}\n aria-label={link.ariaLabel \|\| link.label}\n href={link.href}\n onFocus={() => (this.visibleLink = id)}\n onClick={() => this.handleLinkClick()}\n onKeyUp={(e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this))}\n >\n {link.label}\n </a>\n </div>\n );\n })}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-slideshow.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { p as Device } from './index-ee40e66b.js';
 import { i as convertJson, g as getDevice, d as handleKeyboardSubmit } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
-const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";
+const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-background);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-background);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";
 const ZSlideshowStyle0 = stylesCss;
 /**

package/dist/esm/z-slideshow.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-slideshow.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,k1DAAk1D,CAAC;AACr2D,yBAAe,SAAS;;ACGxB;;;;;AAKA,SAAS,aAAa,CAAC,IAAa;IAClC,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,KAAc,KAAsB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC;AAC3G,CAAC;MAWY,UAAU;;;;;;4BAeN,CAAC;;IAKhB,SAAS;QACP,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAElB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACjE;IAED,kBAAkB;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAEO,YAAY;QAClB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAEO,UAAU;;QAChB,QAAQ,OAAO,IAAI,CAAC,IAAI;YACtB,KAAK,QAAQ,EAAE;gBACb,MAAM,MAAM,GAAG,MAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC;gBAC5C,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE;oBAC1B,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;iBAC3C;gBAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBACpB,MAAM;aACP;YACD;gBACE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;gBACvB,MAAM;SACT;KACF;IAEO,QAAQ;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;QAC7E,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAChE,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;QAClC,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAE5C,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,SAAS,IAAI,CAAC;QACzC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,KAAK,GAAG,IAAI,CAAC,YAAY,KAAK,CAAC;QACzE,SAAS,CAAC,OAAO,CAAC,CAAC,IAAiB;YAClC,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACtC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;SAChC,CAAC,CAAC;KACJ;IAEO,SAAS;QACf,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;KAC3B;IAEO,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC3B;IAEO,kBAAkB;QACxB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAK,MAAM,CAAC,MAAM;gBAChB,OAAO,EAAE,CAAC;YACZ,KAAK,MAAM,CAAC,MAAM;gBAChB,OAAO,EAAE,CAAC;YACZ;gBACE,OAAO,EAAE,CAAC;SACb;KACF;IAEO,YAAY,CAAC,KAAe;QAClC,QACE,WAAK,EAAE,EAAC,QAAQ,IACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,CAAS,MACjC,WACE,EAAE,EAAE,OAAO,GAAG,CAAC,EACf,KAAK,EAAE,SAAS,IAAI,CAAC,YAAY,KAAK,CAAC,IAAI,MAAM,EAAE,IAEnD,WAAK,GAAG,EAAE,IAAI,GAAI,CACd,CACP,CAAC,CACE,EACN;KACH;IAEO,YAAY,CAAC,SAA2B;QAC9C,IAAI,QAAQ,GAAG,KAAK,EAClB,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QAEhC,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC;YACnC,SAAS,EAAE,CAAC;SACb;aAAM,IAAI,SAAS,KAAK,OAAO,EAAE;YAChC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YACvD,SAAS,EAAE,CAAC;SACb;QAED,QACE,cACE,KAAK,EAAE,UAAU,SAAS,IAAI,QAAQ,IAAI,UAAU,EAAE,EACtD,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,EACjC,IAAI,EAAE,WAAW,SAAS,SAAS,EACnC,OAAO,EAAE;gBACP,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;aAC9C,EACD,OAAO,EAAE,CAAC,CAAgB,KACxB,CAAC,QAAQ;gBACT,oBAAoB,CAAC,CAAC,EAAE;oBACtB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;iBACjC,CAAC,EAEJ,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,GACb,EACF;KACH;IAEO,mBAAmB;QACzB,QACE,gBACG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CACtB,EACP;KACH;IAEO,YAAY,CAAC,CAAS;QAC5B,QACE,SACE,KAAK,EAAE,UAAU,IAAI,CAAC,YAAY,KAAK,CAAC,IAAI,UAAU,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACtC,OAAO,EAAE,CAAC,CAAgB,KAAK,oBAAoB,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EACrF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,GACV,EACL;KACH;IAEO,qBAAqB;QAC3B,QACE,kBACE,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,WAAK,KAAK,EAAC,kBAAkB,IAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAO,CACpG,EACN,WAAK,KAAK,EAAC,cAAc,IACvB,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,CACC,EACT;KACH;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACrC,OAAO,cAAO,CAAC;SAChB;QAED,QACE,WAAK,EAAE,EAAE,IAAI,CAAC,WAAW,IACtB,IAAI,CAAC,mBAAmB,EAAE,EAC1B,IAAI,CAAC,qBAAqB,EAAE,CACzB,EACN;KACH;;;;;;;;;;","names":[],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n display: block;\n width: inherit;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n flex-direction: column;\n}\n\nmain {\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n\nmain z-icon.scroll {\n position: absolute;\n z-index: 10;\n top: 50%;\n width: auto;\n margin: 0 var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01);\n transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\nmain .scroll.right {\n right: 0;\n}\n\n#slides {\n display: flex;\n flex-wrap: wrap;\n line-height: 0px;\n overflow-y: hidden;\n transition: all 300ms;\n}\n\nfooter {\n display: grid;\n width: 100%;\n height: 56px;\n align-items: center;\n border-top: var(--border-size-medium) solid var(--color-surface02);\n grid-template: 2 / 2;\n grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n width: 100%;\n align-items: center;\n}\n\nfooter .footer-center {\n grid-area: center;\n}\n\nfooter .footer-left {\n grid-area: left;\n}\n\nfooter .footer-right {\n grid-area: right;\n}\n\nfooter .bullet-container {\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n width: 8px;\n height: 8px;\n margin: var(--space-unit) 2px;\n background-color: var(--gray200);\n border-radius: 50%;\n pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n background-color: var(--gray400);\n}\n\nmain z-icon:focus,\nfooter .bullet-container .bullet:focus {\n border-radius: 50%;\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n/* Tablet breakpoint /\n\n@media only screen and (min-width: 768px) {\n footer {\n height: 76px;\n border-top: var(--border-size-medium) solid var(--color-surface02);\n grid-template: 1 / 1fr 2fr 1fr;\n grid-template-areas: \"left center right\";\n }\n\n footer .bullet-container .bullet {\n width: 10px;\n height: 10px;\n margin: var(--space-unit) 3px;\n }\n}\n\n/ Desktop breakpoint /\n\n@media only screen and (min-width: 1025px) {\n main z-icon.scroll {\n margin: 0 10px;\n }\n\n footer .bullet-container .bullet {\n width: 16px;\n height: 16px;\n margin: var(--space-unit) calc(var(--space-unit) 0.5);\n cursor: pointer;\n pointer-events: auto;\n }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/*\n Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n /\nfunction isStringArray(data: unknown): data is string[] {\n return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/\n @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n /\n@Component({\n tag: \"z-slideshow\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSlideshow {\n @Element() el: HTMLZSlideshowElement;\n\n /* slideshow id /\n @Prop()\n slideshowid: string;\n\n /* array or JSON stringified images urls /\n @Prop()\n data: string[] \| string;\n\n @State()\n device: Device;\n\n @State()\n currentSlide = 0;\n\n private links: string[];\n\n @Watch(\"data\")\n watchData(): void {\n this.parseLinks();\n }\n\n componentWillLoad(): void {\n this.parseLinks();\n\n this.setDevice();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n componentDidRender(): void {\n this.setStyle();\n }\n\n private handleResize(): void {\n this.setDevice();\n this.setStyle();\n }\n\n private parseLinks(): void {\n switch (typeof this.data) {\n case \"string\": {\n const parsed = convertJson(this.data) ?? [];\n if (!isStringArray(parsed)) {\n throw new Error(\"Passed data is invalid\");\n }\n\n this.links = parsed;\n break;\n }\n default:\n this.links = this.data;\n break;\n }\n }\n\n private setStyle(): void {\n const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n if (!refSlides) {\n return;\n }\n\n const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n const width = this.el.offsetWidth;\n const fullwidth = width this.links.length;\n\n refSlides.style.width = `${fullwidth}px`;\n refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n allImages.forEach((item: HTMLElement) => {\n const img = item.querySelector(\"img\");\n img.style.width = `${width}px`;\n });\n }\n\n private setDevice(): void {\n this.device = getDevice();\n }\n\n private setCurrentSlide(index: number): void {\n this.currentSlide = index;\n }\n\n private getBulletDimension(): number {\n switch (this.device) {\n case Device.MOBILE:\n return 24;\n case Device.TABLET:\n return 32;\n default:\n return 40;\n }\n }\n\n private renderSlides(items: string[]): HTMLElement {\n return (\n <div id=\"slides\">\n {items.map((item: string, i: number) => (\n <div\n id={\"slide\" + i}\n class={`slide ${this.currentSlide !== i && \"hide\"}`}\n >\n <img src={item} />\n </div>\n ))}\n </div>\n );\n }\n\n private renderScroll(direction: \"left\" \| \"right\"): HTMLZIconElement {\n let disabled = false,\n nextSlide = this.currentSlide;\n\n if (direction === \"left\") {\n disabled = this.currentSlide === 0;\n nextSlide--;\n } else if (direction === \"right\") {\n disabled = this.currentSlide === this.links.length - 1;\n nextSlide++;\n }\n\n return (\n <z-icon\n class={`scroll ${direction} ${disabled && \"disabled\"}`}\n width={this.getBulletDimension()}\n height={this.getBulletDimension()}\n name={`chevron-${direction}-circle`}\n onClick={() => {\n !disabled && this.setCurrentSlide(nextSlide);\n }}\n onKeyUp={(e: KeyboardEvent) =>\n !disabled &&\n handleKeyboardSubmit(e, () => {\n this.setCurrentSlide(nextSlide);\n })\n }\n tabindex={0}\n role=\"button\"\n />\n );\n }\n\n private renderSlideshowMain(): HTMLElement {\n return (\n <main>\n {this.renderScroll(\"left\")}\n {this.renderSlides(this.links)}\n {this.renderScroll(\"right\")}\n </main>\n );\n }\n\n private renderBullet(i: number): HTMLElement {\n return (\n <a\n class={`bullet ${this.currentSlide === i && \"selected\"}`}\n onClick={() => this.setCurrentSlide(i)}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n tabindex={0}\n role=\"button\"\n ></a>\n );\n }\n\n private renderSlideshowFooter(): HTMLElement {\n return (\n <footer>\n <div class=\"footer-left\">\n <slot name=\"footer-left\" />\n </div>\n <div class=\"footer-center\">\n <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n </div>\n <div class=\"footer-right\">\n <slot name=\"footer-right\" />\n </div>\n </footer>\n );\n }\n\n render(): HTMLElement {\n if (!this.links \|\| !this.links.length) {\n return <div />;\n }\n\n return (\n <div id={this.slideshowid}>\n {this.renderSlideshowMain()}\n {this.renderSlideshowFooter()}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-slideshow.entry.js","mappings":"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","names":[],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n display: block;\n width: inherit;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n flex-direction: column;\n}\n\nmain {\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n\nmain z-icon.scroll {\n position: absolute;\n z-index: 10;\n top: 50%;\n width: auto;\n margin: 0 var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01);\n transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\nmain .scroll.right {\n right: 0;\n}\n\n#slides {\n display: flex;\n flex-wrap: wrap;\n line-height: 0px;\n overflow-y: hidden;\n transition: all 300ms;\n}\n\nfooter {\n display: grid;\n width: 100%;\n height: 56px;\n align-items: center;\n border-top: var(--border-size-medium) solid var(--color-background);\n grid-template: 2 / 2;\n grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n width: 100%;\n align-items: center;\n}\n\nfooter .footer-center {\n grid-area: center;\n}\n\nfooter .footer-left {\n grid-area: left;\n}\n\nfooter .footer-right {\n grid-area: right;\n}\n\nfooter .bullet-container {\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n width: 8px;\n height: 8px;\n margin: var(--space-unit) 2px;\n background-color: var(--gray200);\n border-radius: 50%;\n pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n background-color: var(--gray400);\n}\n\nmain z-icon:focus,\nfooter .bullet-container .bullet:focus {\n border-radius: 50%;\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n/* Tablet breakpoint /\n\n@media only screen and (min-width: 768px) {\n footer {\n height: 76px;\n border-top: var(--border-size-medium) solid var(--color-background);\n grid-template: 1 / 1fr 2fr 1fr;\n grid-template-areas: \"left center right\";\n }\n\n footer .bullet-container .bullet {\n width: 10px;\n height: 10px;\n margin: var(--space-unit) 3px;\n }\n}\n\n/ Desktop breakpoint /\n\n@media only screen and (min-width: 1025px) {\n main z-icon.scroll {\n margin: 0 10px;\n }\n\n footer .bullet-container .bullet {\n width: 16px;\n height: 16px;\n margin: var(--space-unit) calc(var(--space-unit) 0.5);\n cursor: pointer;\n pointer-events: auto;\n }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/*\n Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n /\nfunction isStringArray(data: unknown): data is string[] {\n return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/\n @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n /\n@Component({\n tag: \"z-slideshow\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSlideshow {\n @Element() el: HTMLZSlideshowElement;\n\n /* slideshow id /\n @Prop()\n slideshowid: string;\n\n /* array or JSON stringified images urls /\n @Prop()\n data: string[] \| string;\n\n @State()\n device: Device;\n\n @State()\n currentSlide = 0;\n\n private links: string[];\n\n @Watch(\"data\")\n watchData(): void {\n this.parseLinks();\n }\n\n componentWillLoad(): void {\n this.parseLinks();\n\n this.setDevice();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n componentDidRender(): void {\n this.setStyle();\n }\n\n private handleResize(): void {\n this.setDevice();\n this.setStyle();\n }\n\n private parseLinks(): void {\n switch (typeof this.data) {\n case \"string\": {\n const parsed = convertJson(this.data) ?? [];\n if (!isStringArray(parsed)) {\n throw new Error(\"Passed data is invalid\");\n }\n\n this.links = parsed;\n break;\n }\n default:\n this.links = this.data;\n break;\n }\n }\n\n private setStyle(): void {\n const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n if (!refSlides) {\n return;\n }\n\n const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n const width = this.el.offsetWidth;\n const fullwidth = width this.links.length;\n\n refSlides.style.width = `${fullwidth}px`;\n refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n allImages.forEach((item: HTMLElement) => {\n const img = item.querySelector(\"img\");\n img.style.width = `${width}px`;\n });\n }\n\n private setDevice(): void {\n this.device = getDevice();\n }\n\n private setCurrentSlide(index: number): void {\n this.currentSlide = index;\n }\n\n private getBulletDimension(): number {\n switch (this.device) {\n case Device.MOBILE:\n return 24;\n case Device.TABLET:\n return 32;\n default:\n return 40;\n }\n }\n\n private renderSlides(items: string[]): HTMLElement {\n return (\n <div id=\"slides\">\n {items.map((item: string, i: number) => (\n <div\n id={\"slide\" + i}\n class={`slide ${this.currentSlide !== i && \"hide\"}`}\n >\n <img src={item} />\n </div>\n ))}\n </div>\n );\n }\n\n private renderScroll(direction: \"left\" \| \"right\"): HTMLZIconElement {\n let disabled = false,\n nextSlide = this.currentSlide;\n\n if (direction === \"left\") {\n disabled = this.currentSlide === 0;\n nextSlide--;\n } else if (direction === \"right\") {\n disabled = this.currentSlide === this.links.length - 1;\n nextSlide++;\n }\n\n return (\n <z-icon\n class={`scroll ${direction} ${disabled && \"disabled\"}`}\n width={this.getBulletDimension()}\n height={this.getBulletDimension()}\n name={`chevron-${direction}-circle`}\n onClick={() => {\n !disabled && this.setCurrentSlide(nextSlide);\n }}\n onKeyUp={(e: KeyboardEvent) =>\n !disabled &&\n handleKeyboardSubmit(e, () => {\n this.setCurrentSlide(nextSlide);\n })\n }\n tabindex={0}\n role=\"button\"\n />\n );\n }\n\n private renderSlideshowMain(): HTMLElement {\n return (\n <main>\n {this.renderScroll(\"left\")}\n {this.renderSlides(this.links)}\n {this.renderScroll(\"right\")}\n </main>\n );\n }\n\n private renderBullet(i: number): HTMLElement {\n return (\n <a\n class={`bullet ${this.currentSlide === i && \"selected\"}`}\n onClick={() => this.setCurrentSlide(i)}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n tabindex={0}\n role=\"button\"\n ></a>\n );\n }\n\n private renderSlideshowFooter(): HTMLElement {\n return (\n <footer>\n <div class=\"footer-left\">\n <slot name=\"footer-left\" />\n </div>\n <div class=\"footer-center\">\n <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n </div>\n <div class=\"footer-right\">\n <slot name=\"footer-right\" />\n </div>\n </footer>\n );\n }\n\n render(): HTMLElement {\n if (!this.links \|\| !this.links.length) {\n return <div />;\n }\n\n return (\n <div id={this.slideshowid}>\n {this.renderSlideshowMain()}\n {this.renderSlideshowFooter()}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-stepper-item.entry.js CHANGED Viewed

@@ -20,7 +20,7 @@ const ZStepperItem = class {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: 'f8a0f271d547b905319ca2e80996c108014d38a0', role: "listitem" }, h("button", Object.assign({ key: '6dba08cfde906db5a15cb0832f144a7e3df58252', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'ac991a5b351766e7ced9af2e4126e26aebf4f672', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e844c4090022591132232e5c900228da281db3f3' }, h("slot", { key: '67928b105765cbe691e51c221ebefda23d7351c2' })))));
+        return (h(Host, { key: '2e45354c628f043ce2a9246a0ffb8e94235ae669', role: "listitem" }, h("button", Object.assign({ key: '854de9a3ea272425e75c81e0d116bd04fcda2c2d', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '06754f85e70407535e1ae0e80dcf8015d33a8112', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '9bfeda701f57ba6c263be0a986abe03c76009acd' }, h("slot", { key: 'c3abd1dae057323d41ee7a14bf5398e2e2a71ccf' })))));
     }
 };
 ZStepperItem.style = ZStepperItemStyle0;

package/dist/esm/z-stepper.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZStepper = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'ae157efced49b287a294c00090b5a104a4317401', role: "list" }, h("slot", { key: 'a1509aa8285d3166f3fe18c51205a829053fad33' })));
+        return (h(Host, { key: '1dd60e057dc5910e320df088512d2bd3dd5b1e4a', role: "list" }, h("slot", { key: '721b83774cdf84979db9c204986c84174d56fc0a' })));
     }
 };
 ZStepper.style = ZStepperStyle0;

package/dist/esm/z-table.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import './index-358dea59.js';
-import './index-daf6dc52.js';
-import './index-a71eb5f5.js';
-import './index-13d1f531.js';
+import './index-9adfcd0d.js';
+import './index-04335eea.js';
+import './index-5dff449e.js';
+import './index-8df19678.js';
 import './utils-ed82ce58.js';
 import './index-ee40e66b.js';
 import './breakpoints-d148bfde.js';
-import './index-bf3d3447.js';
-import './index-f372e39c.js';
+import './index-735d4f23.js';
+import './index-90f624c1.js';
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
 const ZTableStyle0 = stylesCss;
@@ -41,7 +41,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '7602276238afd3af11a9c726342c74bbbfac85d0', expandable: this.expandable }, h("div", { key: '4e3828976db3f5544e5e7cd06e7b202cea4d057b', class: "table", role: "table" }, h("slot", { key: '3ef322ee93aad5a10b0124c37cf0ec705887de78' }))));
+        return (h(Host, { key: '8cc330079f36a6c9112ef15dd5bb66f7c0e07db5', expandable: this.expandable }, h("div", { key: '5b9783130bb30d5e0dc3e62c132b043900cb746f', class: "table", role: "table" }, h("slot", { key: 'e339c4892e8c433fb79e054ac47e45c8a6ac40e5' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/z-tbody.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Z as z_tbody } from './index-358dea59.js';
+export { Z as z_tbody } from './index-9adfcd0d.js';
 import './index-c8ceadeb.js';
 //# sourceMappingURL=z-tbody.entry.js.map

package/dist/esm/z-td.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Z as z_td } from './index-bf3d3447.js';
+export { Z as z_td } from './index-735d4f23.js';
 import './index-c8ceadeb.js';
 import './index-ee40e66b.js';

package/dist/esm/z-tfoot.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Z as z_tfoot } from './index-daf6dc52.js';
+export { Z as z_tfoot } from './index-04335eea.js';
 import './index-c8ceadeb.js';
 //# sourceMappingURL=z-tfoot.entry.js.map

package/dist/esm/z-th.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Z as z_th } from './index-f372e39c.js';
+export { Z as z_th } from './index-90f624c1.js';
 import './index-c8ceadeb.js';
 import './index-ee40e66b.js';

package/dist/esm/z-thead.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Z as z_thead } from './index-a71eb5f5.js';
+export { Z as z_thead } from './index-5dff449e.js';
 import './index-c8ceadeb.js';
 //# sourceMappingURL=z-thead.entry.js.map

package/dist/esm/z-toast-notification-list.entry.js CHANGED Viewed

@@ -41,7 +41,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return h("slot", { key: 'cd4b2b969f72e982a2af778217d5db44a53a241d', name: "toasts" });
+        return h("slot", { key: 'fcca8c71a9eca7ada8de9d23d4930ec6796b2925', name: "toasts" });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-toast-notification.entry.js CHANGED Viewed

@@ -2826,7 +2826,7 @@ const ZToastNotification = class {
             } }, h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (h(Host, { key: '6996fc6d26f43d53ce4a84af8ce88f2f7b0881d6', style: {
+        return (h(Host, { key: 'c8254b294f52c92c404a2e610e95247597be5e69', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

package/dist/esm/z-toggle-button.entry.js CHANGED Viewed

@@ -21,10 +21,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '618ba6196aca932ec95f09ac4257490a7b44307e', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '9f61896b532d6b2ff5871b819c696e5841c1a846', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/esm/z-toggle-switch.entry.js CHANGED Viewed

@@ -29,14 +29,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '0c2885fb82345e947645a79c3e5def0a3b737662' }, h("input", { key: 'c0efd12ba3be01dd9a1690ae986307610f89bf82', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '650981ed46a574db5080cf8e80d80d8dd061abeb', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'b572a91e4ed2f91cbe0b7a393371425a5b9b896a' }, h("input", { key: 'acff3447044eba6dd7622feb954a03d5503111f1', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '58b70932d34e39bb1c078947eea614d6384b9660', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '08db77612f5a9ccc4063b0f52ccbb7344d9425e3' }, h("slot", { key: 'f0b2dafb9cca88f76cd35d745bbcc303d6d70eb2' })), h("span", { key: 'dd04ef3a424de42010ba1045d408864c3717bc13', class: {
+            } }, h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '4972f1e42c31aac73c38154c8a876dc724051e1d', class: "circle" }, this.checked && (h("z-icon", { key: '8fe5b87e25cf8bd654c3d5724b6be55bcdbe0526', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

package/dist/esm/z-tooltip.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '831b57e3c75c0bc9429a5e887b8cc30cc8eec4f9', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'b578489e880d9aad1e4a116444d2594025db32e6' })));
+        return (h("z-popover", { key: 'fdca98f95640bac81d7cf60e1fc0f8c4536f7021', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'd2143919460695e98cf114c4cb07ae75108c9f1d' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/esm/z-tr.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
-export { Z as z_tr } from './index-13d1f531.js';
+export { Z as z_tr } from './index-8df19678.js';
 import './index-c8ceadeb.js';
 import './utils-ed82ce58.js';
 import './index-ee40e66b.js';
 import './breakpoints-d148bfde.js';
-import './index-bf3d3447.js';
-import './index-f372e39c.js';
+import './index-735d4f23.js';
+import './index-90f624c1.js';
 //# sourceMappingURL=z-tr.entry.js.map

package/dist/esm/z-visually-hidden.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZVisuallyHidden = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("slot", { key: 'f34bff11c258d464016d3963268b24ea73e2e6ac' });
+        return h("slot", { key: '7c7caddb01b7e2278f956face2065ac1c843ddc5' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/types/components/css-components/z-link/index.stories.d.ts CHANGED Viewed

@@ -30,7 +30,6 @@ declare const _default: {
         text: string;
         icon: any;
         "z-link-active": boolean;
-        "z-link-inverse": boolean;
         "z-link-disabled": boolean;
         "z-link-underline": boolean;
         "z-link-icon": boolean;

package/dist/types/components/file-upload/z-dragdrop-area/index.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { EventEmitter } from "../../../stencil-public-runtime";
 export declare class ZDragdropArea {
     /** drag & drop button label */
     dragAndDropLabel: string;
+    /** State that indicates if the user is dragging a file over the drag & drop area */
+    dragging: boolean;
     /** Emitted when user drop one or more files */
     fileDropped: EventEmitter;
-    private fileDroppedHandler;
-    private dragDropContainer;
-    private renderOnDragOverMessage;
-    render(): HTMLDivElement;
+    private onDrop;
+    render(): HTMLZDragdropAreaElement;
 }