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

@zanichelli/albe-web-components 17.0.0-RC3 → 17.0.0

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 (374) hide show

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

	@@ -1 +1 @@
1	- {"file":"z-ghost-loading.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,~~8gBAA8gB~~,CAAC;~~AACjiB~~,4BAAe,SAAS;;MCKX,aAAa;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;","names":[],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n background: var(--color-~~surface02~~);\n border-radius: var(--border-radius);\n transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n display: block;\n width: 100%;\n height: 100%;\n animation: progress 1.6s ease-in-out infinite;\n background-image: linear-gradient(\n 90deg,\n var(--color-~~surface02~~) 0%,\n var(--color-surface03) 95%,\n var(--color-~~surface02~~) 100%\n );\n content: \"\";\n filter: blur(6px);\n}\n\n@keyframes progress {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"],"version":3}
1	+ {"file":"z-ghost-loading.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ihBAAihB,CAAC;AACpiB,4BAAe,SAAS;;MCKX,aAAa;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;","names":[],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n background: var(--color-background);\n border-radius: var(--border-radius);\n transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n display: block;\n width: 100%;\n height: 100%;\n animation: progress 1.6s ease-in-out infinite;\n background-image: linear-gradient(\n 90deg,\n var(--color-background) 0%,\n var(--color-surface03) 95%,\n var(--color-background) 100%\n );\n content: \"\";\n filter: blur(6px);\n}\n\n@keyframes progress {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"],"version":3}

package/dist/esm/z-myz-card-alert.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-c8ceadeb.js';
 import { o as AlertType } from './index-ee40e66b.js';
-const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
+const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-background);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
 const ZMyzCardAlertStyle0 = stylesCss;
 const ZMyzCardAlert = class {

package/dist/esm/z-myz-card-alert.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-alert.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~u7BAAu7B~~,CAAC;~~AAC18B~~,4BAAe,SAAS;;MCOX,aAAa;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,6DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;","names":[],"sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n position: relative;\n display: grid;\n align-items: center;\n padding: 0;\n grid-column-gap: var(--space-unit);\n grid-template-columns: 18px auto 46px;\n grid-template-rows: 1fr;\n outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n border: var(--border-size-medium) solid var(--color-~~surface02~~);\n border-top: none;\n}\n\n:host div.add-alert {\n background: var(--color-success-inverse);\n}\n\n:host div.remove-alert {\n background: var(--color-warning-inverse);\n}\n\n:host div > .content-text {\n color: var(--color-surface05);\n font-size: 14px;\n letter-spacing: 0.16px;\n line-height: 20px;\n}\n\n:host div > .content-action {\n height: 20px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 12px;\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 20px;\n}\n\n:host div > z-icon {\n justify-self: center;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n tag: \"z-myz-card-alert\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardAlert {\n /** icon name /\n @Prop()\n iconname: string;\n\n /* content text /\n @Prop()\n contenttext: string;\n\n /* action button text /\n @Prop()\n actiontext?: string;\n\n /* alert variant type /\n @Prop()\n type: string;\n\n /* undo action click/keyboard event, returns actionType */\n @Event()\n undoAction: EventEmitter;\n\n private emitUndoAction(): void {\n this.undoAction.emit({actionType: this.type});\n }\n\n private handleSpaceKeyPress(e: KeyboardEvent): void {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitUndoAction();\n }\n }\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.emitUndoAction();\n }\n\n private retrieveClass(): string {\n let className = \"\";\n switch (this.type) {\n case \"add\":\n className = \"add-alert\";\n break;\n case \"remove\":\n className = \"remove-alert\";\n break;\n default:\n className = \"\";\n break;\n }\n\n return className;\n }\n\n private getAlertType(): AlertType {\n switch (this.type) {\n case \"add\":\n return AlertType.SUCCESS;\n case \"remove\":\n return AlertType.WARNING;\n default:\n return null;\n }\n }\n\n render(): HTMLDivElement {\n return (\n <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n <z-alert type={this.getAlertType()}>\n <div class=\"relative-container\">\n <z-icon\n name={this.iconname}\n width={18}\n height={18}\n class={this.retrieveClass()}\n ></z-icon>\n <span class=\"content-text\">{this.contenttext}</span>\n {this.actiontext && !!this.actiontext.trim().length && (\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"content-action\"\n onClick={(e: MouseEvent) => {\n this.handleActionButtonClick(e);\n }}\n onKeyPress={(e: KeyboardEvent) => {\n this.handleSpaceKeyPress(e);\n }}\n >\n {this.actiontext}\n </span>\n )}\n </div>\n </z-alert>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-myz-card-alert.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,w7BAAw7B,CAAC;AAC38B,4BAAe,SAAS;;MCOX,aAAa;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,6DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;","names":[],"sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n position: relative;\n display: grid;\n align-items: center;\n padding: 0;\n grid-column-gap: var(--space-unit);\n grid-template-columns: 18px auto 46px;\n grid-template-rows: 1fr;\n outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n border: var(--border-size-medium) solid var(--color-background);\n border-top: none;\n}\n\n:host div.add-alert {\n background: var(--color-success-inverse);\n}\n\n:host div.remove-alert {\n background: var(--color-warning-inverse);\n}\n\n:host div > .content-text {\n color: var(--color-surface05);\n font-size: 14px;\n letter-spacing: 0.16px;\n line-height: 20px;\n}\n\n:host div > .content-action {\n height: 20px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 12px;\n font-weight: var(--font-sb);\n letter-spacing: 0.32px;\n line-height: 20px;\n}\n\n:host div > z-icon {\n justify-self: center;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n tag: \"z-myz-card-alert\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardAlert {\n /** icon name /\n @Prop()\n iconname: string;\n\n /* content text /\n @Prop()\n contenttext: string;\n\n /* action button text /\n @Prop()\n actiontext?: string;\n\n /* alert variant type /\n @Prop()\n type: string;\n\n /* undo action click/keyboard event, returns actionType */\n @Event()\n undoAction: EventEmitter;\n\n private emitUndoAction(): void {\n this.undoAction.emit({actionType: this.type});\n }\n\n private handleSpaceKeyPress(e: KeyboardEvent): void {\n if (e.keyCode == 32 \|\| e.keyCode == 13) {\n e.preventDefault();\n this.emitUndoAction();\n }\n }\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.emitUndoAction();\n }\n\n private retrieveClass(): string {\n let className = \"\";\n switch (this.type) {\n case \"add\":\n className = \"add-alert\";\n break;\n case \"remove\":\n className = \"remove-alert\";\n break;\n default:\n className = \"\";\n break;\n }\n\n return className;\n }\n\n private getAlertType(): AlertType {\n switch (this.type) {\n case \"add\":\n return AlertType.SUCCESS;\n case \"remove\":\n return AlertType.WARNING;\n default:\n return null;\n }\n }\n\n render(): HTMLDivElement {\n return (\n <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n <z-alert type={this.getAlertType()}>\n <div class=\"relative-container\">\n <z-icon\n name={this.iconname}\n width={18}\n height={18}\n class={this.retrieveClass()}\n ></z-icon>\n <span class=\"content-text\">{this.contenttext}</span>\n {this.actiontext && !!this.actiontext.trim().length && (\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"content-action\"\n onClick={(e: MouseEvent) => {\n this.handleActionButtonClick(e);\n }}\n onKeyPress={(e: KeyboardEvent) => {\n this.handleSpaceKeyPress(e);\n }}\n >\n {this.actiontext}\n </span>\n )}\n </div>\n </z-alert>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-myz-card-info.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { P as PopoverPosition } from './index-ee40e66b.js';
 import { d as handleKeyboardSubmit } from './utils-ed82ce58.js';
 import './breakpoints-d148bfde.js';
-const stylesCss = ":host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:\"\";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-secondary02);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
+const stylesCss = ":host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:\"\";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-secondary01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
 const ZMyzCardInfoStyle0 = stylesCss;
 const ZMyzCardInfo = class {

package/dist/esm/z-myz-card-info.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-info.entry.js","mappings":"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","names":[],"sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n width: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n position: relative;\n display: grid;\n width: calc(100% + calc(var(--space-unit) * 2));\n height: 402px;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n border: var(--border-size-small) solid var(--color-primary01);\n margin-left: calc(-1 * var(--space-unit));\n background: var(--color-surface01);\n border-radius: 0;\n box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n position: absolute;\n top: var(--space-unit);\n right: var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n display: flex;\n flex-flow: column nowrap;\n align-self: end;\n justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n position: relative;\n overflow: hidden;\n align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n box-sizing: border-box;\n padding: var(--space-unit) 0;\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n color: var(--color-surface05);\n font-size: 14px;\n line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n content: \"\";\n pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n display: flex;\n justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n color: var(--color-secondary02);\n font-size: 12px;\n font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n color: var(--color-warning01);\n font-size: 12px;\n font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n position: absolute;\n top: 0;\n left: calc(var(--space-unit) * 4);\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/*\n @slot - content\n /\n@Component({\n tag: \"z-myz-card-info\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardInfo {\n /* dictionary info /\n @Prop()\n data: string \| DictionaryData;\n\n /* tabindex link attribute (optional) /\n @Prop()\n htmltabindex?: number = 0;\n\n @State()\n hiddenContent = false;\n\n @State()\n tooltip = false;\n\n private cardData: DictionaryData;\n\n private contentWrapper: HTMLElement;\n\n private infoWrapper: HTMLElement;\n\n private onlineLicenseWrapper: HTMLElement;\n\n private offlineLicenseWrapper: HTMLElement;\n\n /* flip card to front */\n @Event()\n flipCard: EventEmitter;\n\n private emitFlipCard(showBack = false): void {\n this.flipCard.emit(showBack);\n }\n\n constructor() {\n this.emitFlipCard = this.emitFlipCard.bind(this);\n }\n\n componentWillLoad(): void {\n this.setStringOrArray();\n }\n\n componentWillUpdate(): void {\n this.setStringOrArray();\n }\n\n componentDidRender(): void {\n this.handleContentHeight();\n }\n\n private handleContentHeight(): void {\n if (!this.contentWrapper && !this.infoWrapper) {\n this.hiddenContent = false;\n\n return;\n }\n\n if (\n this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight \|\|\n this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n ) {\n const height =\n this.contentWrapper.offsetHeight -\n this.onlineLicenseWrapper.offsetHeight -\n this.offlineLicenseWrapper.offsetHeight;\n this.infoWrapper.style.height = `${height}px`;\n this.hiddenContent = true;\n\n return;\n }\n\n this.hiddenContent = false;\n }\n\n private setStringOrArray(): void {\n if (typeof this.data === \"string\") {\n this.cardData = JSON.parse(this.data);\n } else {\n this.cardData = this.data;\n }\n }\n\n private renderCloseIcon(): HTMLZIconElement {\n return (\n <z-icon\n name=\"multiply-circled-filled\"\n height={18}\n width={18}\n onClick={() => this.emitFlipCard(false)}\n tabindex={this.htmltabindex}\n onKeyUp={(e: KeyboardEvent) => {\n handleKeyboardSubmit(e, this.emitFlipCard, false);\n }}\n />\n );\n }\n\n private renderGeneralSection(): HTMLElement {\n const title = this?.cardData?.title;\n const description = this?.cardData?.description;\n\n return (\n <section\n class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n onClick={() => {\n if (this.hiddenContent) {\n this.tooltip = !this.tooltip;\n }\n }}\n ref={(el) => (this.infoWrapper = el)}\n >\n {this.renderAuthor()}\n {this.renderYear()}\n {title}\n <br />\n {description}\n </section>\n );\n }\n\n private renderAuthor(): HTMLSpanElement {\n const author = this?.cardData?.author;\n if (!author) {\n return null;\n }\n\n return (\n <span>\n Autore: <b>{author}</b>\n <br />\n </span>\n );\n }\n\n private renderYear(): HTMLSpanElement {\n const year = this?.cardData?.year;\n if (!year) {\n return null;\n }\n\n return (\n <span>\n Anno: <b>{year}</b>\n <br />\n </span>\n );\n }\n\n private renderTooltip(): HTMLZPopoverElement {\n if (!this.tooltip) {\n return;\n }\n\n if (!this.cardData) {\n return;\n }\n const {title, year, author, description} = this.cardData;\n\n return (\n <z-popover\n position={PopoverPosition.RIGHT}\n onClick={() => (this.tooltip = false)}\n >\n {`${title} ${year} ${author} ${description}`}\n </z-popover>\n );\n }\n\n private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n if (\n (type === \"online\" && this.cardData.onlineLicense.expired) \|\|\n (type === \"offline\" && this.cardData.offlineLicense.expired)\n ) {\n return <span class=\"expired\">SCADUTA</span>;\n }\n\n if (\n (type === \"online\" && this.cardData.onlineLicense.expiring) \|\|\n (type === \"offline\" && this.cardData.offlineLicense.expiring)\n ) {\n return <span class=\"expiring\">IN SCADENZA</span>;\n }\n }\n\n private renderOnlineLicenseSection(): HTMLElement {\n if (!this?.cardData?.onlineLicense) {\n return;\n }\n\n return (\n <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n <span class=\"license-heading\">\n <span>Licenza online</span>\n {this.setExpirationLicenseMessage(\"online\")}\n </span>\n Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n <br />\n </section>\n );\n }\n\n private renderOfflineLicenseSection(): HTMLElement {\n if (!this?.cardData?.offlineLicense) {\n return;\n }\n\n return (\n <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n <span class=\"license-heading\">\n <span>Licenza offline</span>\n {this.setExpirationLicenseMessage(\"offline\")}\n </span>\n Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n <br />\n Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n </section>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div>\n {this.renderCloseIcon()}\n <div\n class=\"content-wrapper\"\n ref={(el) => (this.contentWrapper = el)}\n >\n {this.renderGeneralSection()}\n {this.renderTooltip()}\n {this.renderOnlineLicenseSection()}\n {this.renderOfflineLicenseSection()}\n </div>\n <div class=\"cta-wrapper\">\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-myz-card-info.entry.js","mappings":"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","names":[],"sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n width: 100%;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n position: relative;\n display: grid;\n width: calc(100% + calc(var(--space-unit) * 2));\n height: 402px;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n border: var(--border-size-small) solid var(--color-primary01);\n margin-left: calc(-1 * var(--space-unit));\n background: var(--color-surface01);\n border-radius: 0;\n box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n position: absolute;\n top: var(--space-unit);\n right: var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n display: flex;\n flex-flow: column nowrap;\n align-self: end;\n justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n position: relative;\n overflow: hidden;\n align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n box-sizing: border-box;\n padding: var(--space-unit) 0;\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n color: var(--color-surface05);\n font-size: 14px;\n line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n content: \"\";\n pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n display: flex;\n justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n color: var(--color-secondary01);\n font-size: 12px;\n font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n color: var(--color-warning01);\n font-size: 12px;\n font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n position: absolute;\n top: 0;\n left: calc(var(--space-unit) * 4);\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/*\n @slot - content\n /\n@Component({\n tag: \"z-myz-card-info\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardInfo {\n /* dictionary info /\n @Prop()\n data: string \| DictionaryData;\n\n /* tabindex link attribute (optional) /\n @Prop()\n htmltabindex?: number = 0;\n\n @State()\n hiddenContent = false;\n\n @State()\n tooltip = false;\n\n private cardData: DictionaryData;\n\n private contentWrapper: HTMLElement;\n\n private infoWrapper: HTMLElement;\n\n private onlineLicenseWrapper: HTMLElement;\n\n private offlineLicenseWrapper: HTMLElement;\n\n /* flip card to front */\n @Event()\n flipCard: EventEmitter;\n\n private emitFlipCard(showBack = false): void {\n this.flipCard.emit(showBack);\n }\n\n constructor() {\n this.emitFlipCard = this.emitFlipCard.bind(this);\n }\n\n componentWillLoad(): void {\n this.setStringOrArray();\n }\n\n componentWillUpdate(): void {\n this.setStringOrArray();\n }\n\n componentDidRender(): void {\n this.handleContentHeight();\n }\n\n private handleContentHeight(): void {\n if (!this.contentWrapper && !this.infoWrapper) {\n this.hiddenContent = false;\n\n return;\n }\n\n if (\n this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight \|\|\n this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n ) {\n const height =\n this.contentWrapper.offsetHeight -\n this.onlineLicenseWrapper.offsetHeight -\n this.offlineLicenseWrapper.offsetHeight;\n this.infoWrapper.style.height = `${height}px`;\n this.hiddenContent = true;\n\n return;\n }\n\n this.hiddenContent = false;\n }\n\n private setStringOrArray(): void {\n if (typeof this.data === \"string\") {\n this.cardData = JSON.parse(this.data);\n } else {\n this.cardData = this.data;\n }\n }\n\n private renderCloseIcon(): HTMLZIconElement {\n return (\n <z-icon\n name=\"multiply-circled-filled\"\n height={18}\n width={18}\n onClick={() => this.emitFlipCard(false)}\n tabindex={this.htmltabindex}\n onKeyUp={(e: KeyboardEvent) => {\n handleKeyboardSubmit(e, this.emitFlipCard, false);\n }}\n />\n );\n }\n\n private renderGeneralSection(): HTMLElement {\n const title = this?.cardData?.title;\n const description = this?.cardData?.description;\n\n return (\n <section\n class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n onClick={() => {\n if (this.hiddenContent) {\n this.tooltip = !this.tooltip;\n }\n }}\n ref={(el) => (this.infoWrapper = el)}\n >\n {this.renderAuthor()}\n {this.renderYear()}\n {title}\n <br />\n {description}\n </section>\n );\n }\n\n private renderAuthor(): HTMLSpanElement {\n const author = this?.cardData?.author;\n if (!author) {\n return null;\n }\n\n return (\n <span>\n Autore: <b>{author}</b>\n <br />\n </span>\n );\n }\n\n private renderYear(): HTMLSpanElement {\n const year = this?.cardData?.year;\n if (!year) {\n return null;\n }\n\n return (\n <span>\n Anno: <b>{year}</b>\n <br />\n </span>\n );\n }\n\n private renderTooltip(): HTMLZPopoverElement {\n if (!this.tooltip) {\n return;\n }\n\n if (!this.cardData) {\n return;\n }\n const {title, year, author, description} = this.cardData;\n\n return (\n <z-popover\n position={PopoverPosition.RIGHT}\n onClick={() => (this.tooltip = false)}\n >\n {`${title} ${year} ${author} ${description}`}\n </z-popover>\n );\n }\n\n private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n if (\n (type === \"online\" && this.cardData.onlineLicense.expired) \|\|\n (type === \"offline\" && this.cardData.offlineLicense.expired)\n ) {\n return <span class=\"expired\">SCADUTA</span>;\n }\n\n if (\n (type === \"online\" && this.cardData.onlineLicense.expiring) \|\|\n (type === \"offline\" && this.cardData.offlineLicense.expiring)\n ) {\n return <span class=\"expiring\">IN SCADENZA</span>;\n }\n }\n\n private renderOnlineLicenseSection(): HTMLElement {\n if (!this?.cardData?.onlineLicense) {\n return;\n }\n\n return (\n <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n <span class=\"license-heading\">\n <span>Licenza online</span>\n {this.setExpirationLicenseMessage(\"online\")}\n </span>\n Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n <br />\n </section>\n );\n }\n\n private renderOfflineLicenseSection(): HTMLElement {\n if (!this?.cardData?.offlineLicense) {\n return;\n }\n\n return (\n <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n <span class=\"license-heading\">\n <span>Licenza offline</span>\n {this.setExpirationLicenseMessage(\"offline\")}\n </span>\n Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n <br />\n Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n </section>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div>\n {this.renderCloseIcon()}\n <div\n class=\"content-wrapper\"\n ref={(el) => (this.contentWrapper = el)}\n >\n {this.renderGeneralSection()}\n {this.renderTooltip()}\n {this.renderOnlineLicenseSection()}\n {this.renderOfflineLicenseSection()}\n </div>\n <div class=\"cta-wrapper\">\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/z-myz-card_4.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-c8ceadeb.js';
 import { L as LicenseType } from './index-ee40e66b.js';
-const stylesCss$3 = ":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-surface02)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
+const stylesCss$3 = ":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-background)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
 const ZMyzCardStyle0 = stylesCss$3;
 const ZMyzCardComponent = class {
@@ -73,7 +73,7 @@ const ZMyzCardCover = class {
 };
 ZMyzCardCover.style = ZMyzCardCoverStyle0;
-const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}slot[name=\"aria-heading\"]::slotted(*){position:absolute;overflow:hidden !important;width:1px !important;height:1px !important;padding:0 !important;border:0 none !important;margin:-1px !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--blue100);background-color:var(--color-primary03)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-surface02)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--blue100);border-right:var(--border-size-medium) solid var(--blue100);border-left:var(--border-size-medium) solid var(--blue100)}";
+const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}slot[name=\"aria-heading\"]::slotted(*){position:absolute;overflow:hidden !important;width:1px !important;height:1px !important;padding:0 !important;border:0 none !important;margin:-1px !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--blue100);background-color:var(--color-primary03)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-background)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--blue100);border-right:var(--border-size-medium) solid var(--blue100);border-left:var(--border-size-medium) solid var(--blue100)}";
 const ZMyzCardHeaderStyle0 = stylesCss;
 const ZMyzCardHeader = class {

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

	@@ -1 +1 @@
1	- {"file":"z-myz-card.z-myz-card-body.z-myz-card-cover.z-myz-card-header.entry.js","mappings":";;;AAAA,MAAMA,WAAS,GAAG,~~ilBAAilB~~,CAAC;~~AACpmB~~,uBAAeA,WAAS;;MCUX,iBAAiB;;;;;yBAWhB,KAAK;6BAID,KAAK;;IAEb,aAAa;QACnB,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI,EAAE;YACtC,WAAW,IAAI,MAAM,CAAC;SACvB;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,KAAK,EAAE;YAC9C,WAAW,IAAI,OAAO,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI,EAAE;YAC7C,WAAW,IAAI,MAAM,CAAC;SACvB;QAED,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,WAAW,IAAI,QAAQ,CAAC;SACzB;aAAM,IAAI,IAAI,CAAC,SAAS,EAAE;YACzB,WAAW,IAAI,UAAU,CAAC;SAC3B;aAAM,IAAI,IAAI,CAAC,aAAa,EAAE;YAC7B,WAAW,IAAI,cAAc,CAAC;SAC/B;QAED,OAAO,WAAW,CAAC;KACpB;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,QAAQ,EAAC,GAAG,IAEZ,8DAAQ,CACJ,EACN;KACH;;;;AC3DH,MAAMA,WAAS,GAAG,2IAA2I,CAAC;AAC9J,2BAAeA,WAAS;;MCUX,YAAY;;;;IACvB,MAAM;QACJ,QACE,8DACE,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,EACN;KACH;;;;ACnBH,MAAMA,WAAS,GAAG,mGAAmG,CAAC;AACtH,4BAAeA,WAAS;;MCMX,aAAa;;;;;;;;IAiBhB,iBAAiB;QACvB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,OAAO,EAC5B,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,GAAG,GACb,EACF;KACH;;;;ACrCH,MAAM,SAAS,GAAG,~~23CAA23C~~,CAAC;~~AAC94C~~,6BAAe,SAAS;;MCWX,cAAc;;;;;;4BAcV,KAAK;;IAIZ,QAAQ;QACd,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAEO,aAAa;QACnB,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI;YACxC,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,KAAK;YAC1C,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI;YACxC,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;KACH;IAED,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACjC,6DAAM,IAAI,EAAC,cAAc,GAAG,EAC5B,6DACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAErB,IAAI,CAAC,MAAM,CACP,EACP,6DAAM,IAAI,EAAC,MAAM,GAAG,CACb,EACT;KACH;;;;;;","names":["stylesCss"],"sources":["src/snowflakes/myz/card/z-myz-card/styles.css?tag=z-myz-card&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card/index.tsx","src/snowflakes/myz/card/z-myz-card-body/styles.css?tag=z-myz-card-body&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-body/index.tsx","src/snowflakes/myz/card/z-myz-card-cover/styles.css?tag=z-myz-card-cover&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-cover/index.tsx","src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":[":host {\n --card-overflow: hidden;\n}\n\ndiv {\n display: flex;\n overflow: var(--card-overflow);\n width: auto;\n width: 256px; /* TODO: width must be 100% - must be handled in dashboard /\n height: 522px;\n box-sizing: border-box;\n flex-direction: column;\n border: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n}\n\ndiv.real,\ndiv.trial,\ndiv.temp {\n border-color: var(--blue100);\n}\n\n/ HIDDEN status /\ndiv.faded {\n border: var(--border-size-medium) solid var(--color-~~surface02~~);\n}\n\n/ HIGHLIGHTED status /\ndiv.highlighted {\n box-shadow: var(--shadow-4);\n outline: none;\n}\n\n/ PRESSED status /\ndiv.pressed {\n box-shadow: var(--shadow-8);\n outline: none;\n}\n\ndiv:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/\n @slot - generic card slot\n /\n@Component({\n tag: \"z-myz-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardComponent {\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* graphic variant (optional) /\n @Prop()\n cardtype?: LicenseType;\n\n /* pressed status /\n @Prop()\n ispressed = false;\n\n /* highlighted status /\n @Prop()\n ishighlighted = false;\n\n private retrieveClass(): string {\n let elemClasses = \"\";\n\n if (this.cardtype === LicenseType.REAL) {\n elemClasses += \"real\";\n } else if (this.cardtype === LicenseType.TRIAL) {\n elemClasses += \"trial\";\n } else if (this.cardtype === LicenseType.TEMP) {\n elemClasses += \"temp\";\n }\n\n if (this.faded) {\n elemClasses += \" faded\";\n } else if (this.ispressed) {\n elemClasses += \" pressed\";\n } else if (this.ishighlighted) {\n elemClasses += \" highlighted\";\n }\n\n return elemClasses;\n }\n\n render(): HTMLDivElement {\n return (\n <div\n class={this.retrieveClass()}\n tabindex=\"0\"\n >\n <slot />\n </div>\n );\n }\n}\n",":host {\n width: auto;\n height: 340px;\n}\n\n:host > div {\n position: relative;\n display: flex;\n width: auto;\n height: 340px;\n align-items: center;\n justify-content: center;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/\n @slot alert - card alert slot\n * @slot cover - book cover slot\n /\n@Component({\n tag: \"z-myz-card-body\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardBody {\n render(): HTMLDivElement {\n return (\n <div>\n <slot name=\"alert\"></slot>\n <slot name=\"cover\" />\n </div>\n );\n }\n}\n","img {\n display: block;\n max-width: 100%;\n height: 340px;\n margin: auto;\n object-fit: cover;\n}\n\nimg.faded {\n opacity: 0.3;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-myz-card-cover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardCover {\n /* image source /\n @Prop()\n img: string;\n\n /* cover alt title /\n @Prop()\n titolo: string;\n\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* default error image source /\n @Prop()\n defaultimg: string;\n\n private hadleOnImageError(): void {\n this.img = this.defaultimg;\n }\n\n render(): HTMLImageElement {\n return (\n <img\n class={this.faded && \"faded\"}\n onError={this.hadleOnImageError.bind(this)}\n alt={this.titolo}\n src={this.img}\n />\n );\n }\n}\n","header {\n position: relative;\n display: flex;\n width: auto;\n height: calc(var(--space-unit) 6);\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted() {\n position: absolute;\n overflow: hidden !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n border: 0 none !important;\n margin: -1px !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n border-bottom: var(--border-size-medium) solid var(--blue100);\n background-color: var(--color-primary03);\n}\n\n.card-title {\n overflow: hidden;\n height: calc(var(--space-unit) 2);\n padding: calc(var(--space-unit) * 2);\n margin: 0;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 12px;\n font-weight: var(--font-sb);\n letter-spacing: 0.22px;\n line-height: calc(var(--space-unit) * 2);\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.faded {\n border-bottom: var(--border-size-medium) solid var(--color-~~surface02~~);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n border-top: var(--border-size-medium) solid var(--blue100);\n border-right: var(--border-size-medium) solid var(--blue100);\n border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/*\n @slot icon - card header icon slot\n /\n@Component({\n tag: \"z-myz-card-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardHeader {\n /* volume title /\n @Prop()\n titolo: string;\n\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* card graphic variant (optional) */\n @Prop()\n cardtype?: LicenseType;\n\n @State()\n allowTooltip = false;\n\n private ellipsis?: HTMLElement;\n\n private getTitle(): string {\n return this.allowTooltip ? this.titolo : \"\";\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis()) {\n this.allowTooltip = true;\n }\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n return {\n real: this.cardtype === LicenseType.REAL,\n trial: this.cardtype === LicenseType.TRIAL,\n temp: this.cardtype === LicenseType.TEMP,\n faded: this.faded,\n };\n }\n\n render(): HTMLElement {\n return (\n <header class={this.retrieveClass()}>\n <slot name=\"aria-heading\" />\n <span\n class=\"card-title\"\n ref={(el) => (this.ellipsis = el as HTMLElement)}\n title={this.getTitle()}\n >\n {this.titolo}\n </span>\n <slot name=\"icon\" />\n </header>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-myz-card.z-myz-card-body.z-myz-card-cover.z-myz-card-header.entry.js","mappings":"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","names":["stylesCss"],"sources":["src/snowflakes/myz/card/z-myz-card/styles.css?tag=z-myz-card&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card/index.tsx","src/snowflakes/myz/card/z-myz-card-body/styles.css?tag=z-myz-card-body&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-body/index.tsx","src/snowflakes/myz/card/z-myz-card-cover/styles.css?tag=z-myz-card-cover&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-cover/index.tsx","src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":[":host {\n --card-overflow: hidden;\n}\n\ndiv {\n display: flex;\n overflow: var(--card-overflow);\n width: auto;\n width: 256px; /* TODO: width must be 100% - must be handled in dashboard /\n height: 522px;\n box-sizing: border-box;\n flex-direction: column;\n border: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n}\n\ndiv.real,\ndiv.trial,\ndiv.temp {\n border-color: var(--blue100);\n}\n\n/ HIDDEN status /\ndiv.faded {\n border: var(--border-size-medium) solid var(--color-background);\n}\n\n/ HIGHLIGHTED status /\ndiv.highlighted {\n box-shadow: var(--shadow-4);\n outline: none;\n}\n\n/ PRESSED status /\ndiv.pressed {\n box-shadow: var(--shadow-8);\n outline: none;\n}\n\ndiv:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/\n @slot - generic card slot\n /\n@Component({\n tag: \"z-myz-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardComponent {\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* graphic variant (optional) /\n @Prop()\n cardtype?: LicenseType;\n\n /* pressed status /\n @Prop()\n ispressed = false;\n\n /* highlighted status /\n @Prop()\n ishighlighted = false;\n\n private retrieveClass(): string {\n let elemClasses = \"\";\n\n if (this.cardtype === LicenseType.REAL) {\n elemClasses += \"real\";\n } else if (this.cardtype === LicenseType.TRIAL) {\n elemClasses += \"trial\";\n } else if (this.cardtype === LicenseType.TEMP) {\n elemClasses += \"temp\";\n }\n\n if (this.faded) {\n elemClasses += \" faded\";\n } else if (this.ispressed) {\n elemClasses += \" pressed\";\n } else if (this.ishighlighted) {\n elemClasses += \" highlighted\";\n }\n\n return elemClasses;\n }\n\n render(): HTMLDivElement {\n return (\n <div\n class={this.retrieveClass()}\n tabindex=\"0\"\n >\n <slot />\n </div>\n );\n }\n}\n",":host {\n width: auto;\n height: 340px;\n}\n\n:host > div {\n position: relative;\n display: flex;\n width: auto;\n height: 340px;\n align-items: center;\n justify-content: center;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/\n @slot alert - card alert slot\n * @slot cover - book cover slot\n /\n@Component({\n tag: \"z-myz-card-body\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardBody {\n render(): HTMLDivElement {\n return (\n <div>\n <slot name=\"alert\"></slot>\n <slot name=\"cover\" />\n </div>\n );\n }\n}\n","img {\n display: block;\n max-width: 100%;\n height: 340px;\n margin: auto;\n object-fit: cover;\n}\n\nimg.faded {\n opacity: 0.3;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-myz-card-cover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardCover {\n /* image source /\n @Prop()\n img: string;\n\n /* cover alt title /\n @Prop()\n titolo: string;\n\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* default error image source /\n @Prop()\n defaultimg: string;\n\n private hadleOnImageError(): void {\n this.img = this.defaultimg;\n }\n\n render(): HTMLImageElement {\n return (\n <img\n class={this.faded && \"faded\"}\n onError={this.hadleOnImageError.bind(this)}\n alt={this.titolo}\n src={this.img}\n />\n );\n }\n}\n","header {\n position: relative;\n display: flex;\n width: auto;\n height: calc(var(--space-unit) 6);\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted() {\n position: absolute;\n overflow: hidden !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n border: 0 none !important;\n margin: -1px !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n border-bottom: var(--border-size-medium) solid var(--blue100);\n background-color: var(--color-primary03);\n}\n\n.card-title {\n overflow: hidden;\n height: calc(var(--space-unit) 2);\n padding: calc(var(--space-unit) * 2);\n margin: 0;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 12px;\n font-weight: var(--font-sb);\n letter-spacing: 0.22px;\n line-height: calc(var(--space-unit) * 2);\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.faded {\n border-bottom: var(--border-size-medium) solid var(--color-background);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n border-top: var(--border-size-medium) solid var(--blue100);\n border-right: var(--border-size-medium) solid var(--blue100);\n border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/*\n @slot icon - card header icon slot\n /\n@Component({\n tag: \"z-myz-card-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMyzCardHeader {\n /* volume title /\n @Prop()\n titolo: string;\n\n /* faded status /\n @Prop()\n faded: boolean;\n\n /* card graphic variant (optional) */\n @Prop()\n cardtype?: LicenseType;\n\n @State()\n allowTooltip = false;\n\n private ellipsis?: HTMLElement;\n\n private getTitle(): string {\n return this.allowTooltip ? this.titolo : \"\";\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis()) {\n this.allowTooltip = true;\n }\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n return {\n real: this.cardtype === LicenseType.REAL,\n trial: this.cardtype === LicenseType.TRIAL,\n temp: this.cardtype === LicenseType.TEMP,\n faded: this.faded,\n };\n }\n\n render(): HTMLElement {\n return (\n <header class={this.retrieveClass()}>\n <slot name=\"aria-heading\" />\n <span\n class=\"card-title\"\n ref={(el) => (this.ellipsis = el as HTMLElement)}\n title={this.getTitle()}\n >\n {this.titolo}\n </span>\n <slot name=\"icon\" />\n </header>\n );\n }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
 import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index-ee40e66b.js';
-const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
+const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
 const ZNavigationTabsStyle0 = stylesCss;
 const ZNavigationTabs = class {

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

	@@ -1 +1 @@
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-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-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}

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: '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: 'ca5a726f71b2dd8de6ddf1f32864bc2cdd823730', 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: 'b8f07a80e9260bb0a142037d3f6a64a64acebafb', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '8d6524f5e8b70798cd846d4c99a2631161ae265d', class: "panel-elem-desc" }, h("slot", { key: 'b122e24bbb3ee418a393b348157f54fad3a6f1a9', 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-skip-to-content.entry.js CHANGED Viewed

@@ -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":"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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-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-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-bcd128c9.js';
+import './index-03fd6621.js';
 import './utils-ed82ce58.js';
 import './index-ee40e66b.js';
 import './breakpoints-d148bfde.js';
 import './index-bf3d3447.js';
-import './index-f372e39c.js';
+import './index-2e00cecb.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;

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-2e00cecb.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-bcd128c9.js';
 import './index-c8ceadeb.js';
 //# sourceMappingURL=z-thead.entry.js.map

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-03fd6621.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-2e00cecb.js';
 //# sourceMappingURL=z-tr.entry.js.map