@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

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

@@ -1,14 +1,15 @@
-import { r as registerInstance, h } from './index-ByN2sYu6.js';
-import { L as LicenseType } from './index-BKCj6NR2.js';
+import { r as registerInstance, h } from './index-c8ceadeb.js';
+import { L as LicenseType } from './index-106473a8.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-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 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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** pressed status */
+        this.faded = undefined;
+        this.cardtype = undefined;
         this.ispressed = false;
-        /** highlighted status */
         this.ishighlighted = false;
     }
     retrieveClass() {
@@ -34,43 +35,53 @@ const ZMyzCardComponent = class {
         return elemClasses;
     }
     render() {
-        return (h("div", { key: '11ac2aca15e484cda4eee931bbaefa81eec16fbb', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '14461bb8ccc78eae10ab81c755085d6cb8d484f6' })));
+        return (h("div", { key: 'f67975d8bf57387a4e4b0fc45df88e5b570c23e4', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'be9495f0b9a9c8270c22511d2afa68f940eae945' })));
     }
 };
-ZMyzCardComponent.style = stylesCss$3();
+ZMyzCardComponent.style = ZMyzCardStyle0;
 
-const stylesCss$2 = () => `:host{width:auto;height:340px}:host>div{position:relative;display:flex;width:auto;height:340px;align-items:center;justify-content:center}`;
+const stylesCss$2 = ":host{width:auto;height:340px}:host>div{position:relative;display:flex;width:auto;height:340px;align-items:center;justify-content:center}";
+const ZMyzCardBodyStyle0 = stylesCss$2;
 
 const ZMyzCardBody = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '3bfa929950fa7d4acb0a7a7f8857cf1d94a02cbc' }, h("slot", { key: '871cdb03423b9d52131023290648378e2ad6b439', name: "alert" }), h("slot", { key: 'c48ec3615b98643b44b6d592143412d9fd2c4304', name: "cover" })));
+        return (h("div", { key: 'f979e99bc3e8640e4c6ff7603d0bdba1bcd4f10f' }, h("slot", { key: 'e246c5398ab2e8d1917f3a42c1037c3caedee6fa', name: "alert" }), h("slot", { key: 'aa79cbf40366c68b839aa335b705ba4a8af20b7f', name: "cover" })));
     }
 };
-ZMyzCardBody.style = stylesCss$2();
+ZMyzCardBody.style = ZMyzCardBodyStyle0;
 
-const stylesCss$1 = () => `img{display:block;max-width:100%;height:340px;margin:auto;object-fit:cover}img.faded{opacity:0.3}`;
+const stylesCss$1 = "img{display:block;max-width:100%;height:340px;margin:auto;object-fit:cover}img.faded{opacity:0.3}";
+const ZMyzCardCoverStyle0 = stylesCss$1;
 
 const ZMyzCardCover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.img = undefined;
+        this.titolo = undefined;
+        this.faded = undefined;
+        this.defaultimg = undefined;
     }
     hadleOnImageError() {
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: '5d148d2ef8ab0f6075a368593da59a860ce575be', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: 'ca8f2207563979810f396544be243792903af17c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
 };
-ZMyzCardCover.style = stylesCss$1();
+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-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 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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.titolo = undefined;
+        this.faded = undefined;
+        this.cardtype = undefined;
         this.allowTooltip = false;
     }
     getTitle() {
@@ -93,9 +104,11 @@ const ZMyzCardHeader = class {
         };
     }
     render() {
-        return (h("header", { key: '8e8ab719ee2980ea4de54b3fcb217aacfd578c20', class: this.retrieveClass() }, h("slot", { key: '9c504020c8d7535a8ef719b2e9b64a1c9cd6b8bd', name: "aria-heading" }), h("span", { key: 'bf58a2840947b828a8a3cc73b5164c0f05fb9b57', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '7ba079e3389b6b5908e2296a397a28980b901e28', name: "icon" })));
+        return (h("header", { key: '3a55d0bf3dfd589c1880526191ddbdd311ba6b86', class: this.retrieveClass() }, h("slot", { key: 'faedfbb21b4fd7f56bd08093e5347a4655797008', name: "aria-heading" }), h("span", { key: '53805e713dec6b891a878388d98f9f0749951f31', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '68479fd579921c6fd623fa92b27dafd24bc41d18', name: "icon" })));
     }
 };
-ZMyzCardHeader.style = stylesCss();
+ZMyzCardHeader.style = ZMyzCardHeaderStyle0;
 
 export { ZMyzCardComponent as z_myz_card, ZMyzCardBody as z_myz_card_body, ZMyzCardCover as z_myz_card_cover, ZMyzCardHeader as z_myz_card_header };
+
+//# sourceMappingURL=z-myz-card_4.entry.js.map

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

@@ -0,0 +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-myz-list-item.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h } from './index-ByN2sYu6.js';
-import { h as handleKeyboardSubmit } from './utils-0PByxJyN.js';
-import './index-BKCj6NR2.js';
-import './breakpoints-Q-tWjk7P.js';
+import { r as registerInstance, c as createEvent, h } from './index-c8ceadeb.js';
+import { d as handleKeyboardSubmit } from './utils-8d6ca808.js';
+import './index-106473a8.js';
+import './breakpoints-d148bfde.js';
 
-const stylesCss = () => `:host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--color-primary01);fill:var(--color-primary01)}`;
+const stylesCss = ":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--color-primary01);fill:var(--color-primary01)}";
+const ZMyzListItemStyle0 = stylesCss;
 
 const ZMyzListItem = class {
     emitZListItemLinkClick(e, linkId) {
@@ -16,18 +17,23 @@ const ZMyzListItem = class {
         registerInstance(this, hostRef);
         this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
         this.zListItemClick = createEvent(this, "zListItemClick", 7);
-        /** link target (optional) */
+        this.text = undefined;
+        this.link = undefined;
         this.linktarget = "_self";
-        /** underlined style flag */
+        this.icon = undefined;
+        this.listitemid = undefined;
+        this.action = undefined;
         this.underlined = true;
         this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
         this.emitZListItemClick = this.emitZListItemClick.bind(this);
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (h("li", { key: 'b6ba862acc48ceb87ae354709401d3a3f1edded0', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'e9d3ae7e318e02f241e3fcbdd512ee16df29732e', class: this.underlined && "border" }, this.icon && h("z-icon", { key: 'cd4898bfd2cec5d9455c16b3f7b2fb0d972475a4', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '48bb5cc539f8eda84f21219103e17acd0d226c99' }))));
+        return (h("li", { key: 'e8054df30e0540b758ecac0133a03ba8c64762ea', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'e9fd1c5d30e270a4f1f5b6d309a2bcb40b023819', class: this.underlined && "border" }, this.icon && h("z-icon", { key: 'd714ad82aac6db611955e4c9669d272c44c5fbaf', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '77595259e1f32f42f1d36beb2dfaf216a115d887' }))));
     }
 };
-ZMyzListItem.style = stylesCss();
+ZMyzListItem.style = ZMyzListItemStyle0;
 
 export { ZMyzListItem as z_myz_list_item };
+
+//# sourceMappingURL=z-myz-list-item.entry.js.map

package/dist/esm/z-myz-list-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-list-item.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,qmCAAqmC,CAAC;AACxnC,2BAAe,SAAS;;MCOX,YAAY;IAiCf,sBAAsB,CAAC,CAAa,EAAE,MAAM;QAClD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,MAAM,EAAC,CAAC,CAAC;KAC3C;IAMO,kBAAkB,CAAC,CAAa,EAAE,UAAU;QAClD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,UAAU,EAAC,CAAC,CAAC;KAC3C;IAED;;;;;;0BAlCsB,OAAO;;;;0BAgBhB,IAAI;QAmBf,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC;QAEhE,QACE,2DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,UAAU,iBACN,IAAI,CAAC,MAAM,EACxB,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EACvE,UAAU,EAAE,CAAC,EAAiB,KAAK,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,IAErG,6DAAM,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,QAAQ,IACrC,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAClC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,MAAM,CAAC,EAClE,UAAU,EAAE,CAAC,EAAiB,KAAK,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EAChG,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EACnC,QAAQ,EAAC,GAAG,IAEX,IAAI,CAAC,IAAI,CACR,KAEJ,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACpC,EACD,8DAAQ,CACH,CACJ,EACL;KACH;;;;;;","names":[],"sources":["src/snowflakes/myz/list/z-myz-list-item/styles.css?tag=z-myz-list-item&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list-item/index.tsx"],"sourcesContent":[":host li {\n  all: unset;\n  all: reset;\n  width: 100%;\n  line-height: 14px;\n  list-style-type: none;\n}\n\n:host li > span {\n  display: flex;\n  padding: calc(var(--space-unit) * 2) 0;\n  color: var(--color-default-text);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.23px;\n  line-height: 14px;\n}\n\n:host(.small) li > span {\n  padding: calc(var(--space-unit) * 1.5) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.x-small) li > span {\n  padding: var(--space-unit) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.small) li > span > z-icon,\n:host(.x-small) li > span > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n\n  padding: 0;\n}\n\n:host li > span.border {\n  border-bottom: 2px solid var(--color-surface03);\n}\n\n:host li span:hover,\na:hover {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\na,\na:visited,\na:active {\n  color: inherit;\n  fill: inherit;\n  text-decoration: none;\n}\n\n:host li span z-icon {\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  padding: 0 calc(var(--space-unit) * 1.5) 0 0;\n  background-repeat: no-repeat;\n  background-size: contain;\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n@Component({\n  tag: \"z-myz-list-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzListItem {\n  /** content text */\n  @Prop()\n  text: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target (optional) */\n  @Prop()\n  linktarget?: string = \"_self\";\n\n  /** icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** id (optional) */\n  @Prop()\n  listitemid?: string;\n\n  /** data-action attribute (optional) */\n  @Prop()\n  action?: string;\n\n  /** underlined style flag */\n  @Prop()\n  underlined = true;\n\n  /** emitted on list item link click, returns linkId */\n  @Event()\n  zListItemLinkClick: EventEmitter;\n\n  private emitZListItemLinkClick(e: MouseEvent, linkId): void {\n    this.zListItemLinkClick.emit({e, linkId});\n  }\n\n  /** emitted on list item click, returns listitemid */\n  @Event()\n  zListItemClick: EventEmitter;\n\n  private emitZListItemClick(e: MouseEvent, listitemid): void {\n    this.zListItemClick.emit({e, listitemid});\n  }\n\n  constructor() {\n    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);\n    this.emitZListItemClick = this.emitZListItemClick.bind(this);\n  }\n\n  render(): HTMLLIElement {\n    const linkId = this.listitemid ? `link_${this.listitemid}` : \"\";\n\n    return (\n      <li\n        role=\"button\"\n        id={this.listitemid}\n        data-action={this.action}\n        onClick={(e: MouseEvent) => this.emitZListItemClick(e, this.listitemid)}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid)}\n      >\n        <span class={this.underlined && \"border\"}>\n          {this.icon && <z-icon name={this.icon} />}\n          {this.link ? (\n            <a\n              href={this.link ? this.link : null}\n              target={this.linktarget}\n              id={linkId}\n              onClick={(e: MouseEvent) => this.emitZListItemLinkClick(e, linkId)}\n              onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId)}\n              role={this.link ? \"link\" : \"button\"}\n              tabindex=\"0\"\n            >\n              {this.text}\n            </a>\n          ) : (\n            <span innerHTML={this.text}></span>\n          )}\n          <slot />\n        </span>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/z-myz-list.entry.js

@@ -1,10 +1,13 @@
-import { r as registerInstance, h } from './index-ByN2sYu6.js';
+import { r as registerInstance, h } from './index-c8ceadeb.js';
 
-const stylesCss = () => `ul{padding:0;margin:0}`;
+const stylesCss = "ul{padding:0;margin:0}";
+const ZMyzListStyle0 = stylesCss;
 
 const ZMyzList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.inputrawdata = undefined;
+        this.list = undefined;
     }
     componentWillLoad() {
         if (this.inputrawdata) {
@@ -19,15 +22,15 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: '6a2623cc98a4039d09522d061163e909002e3139' }, this.list &&
+        return (h("ul", { key: '94453803cc1c6b3d3b81e19f107c09abc395bbff' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {
-        "inputrawdata": [{
-                "oninputrawdataChange": 0
-            }]
+        "inputrawdata": ["oninputrawdataChange"]
     }; }
 };
-ZMyzList.style = stylesCss();
+ZMyzList.style = ZMyzListStyle0;
 
 export { ZMyzList as z_myz_list };
+
+//# sourceMappingURL=z-myz-list.entry.js.map

package/dist/esm/z-myz-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-myz-list.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wBAAwB,CAAC;AAC3C,uBAAe,SAAS;;MCOX,QAAQ;;;;;;IASnB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC3C;KACF;IAEO,iBAAiB,CAAC,YAAoB;QAC5C,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3C;IAGD,oBAAoB,CAAC,QAAgB;QACnC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,QACE,6DACG,IAAI,CAAC,IAAI;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,uBACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,QAAQ,IAAI,CAAC,GACzB,CACH,CAAC,CACD,EACL;KACH;;;;;;;;;","names":[],"sources":["src/snowflakes/myz/list/z-myz-list/styles.css?tag=z-myz-list&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list/index.tsx"],"sourcesContent":["ul {\n  padding: 0;\n  margin: 0;\n}\n","import {Component, Prop, Watch, h} from \"@stencil/core\";\nimport {ListItem} from \"../../../../beans/index.js\";\n\n@Component({\n  tag: \"z-myz-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzList {\n  /** json stringified list data (mutable, optional) */\n  @Prop()\n  inputrawdata?: string;\n\n  /** list item data (mutable, optional)*/\n  @Prop({mutable: true})\n  list?: ListItem[];\n\n  componentWillLoad(): void {\n    if (this.inputrawdata) {\n      this.parseinputrawdata(this.inputrawdata);\n    }\n  }\n\n  private parseinputrawdata(inputrawdata: string): void {\n    this.list = [...JSON.parse(inputrawdata)];\n  }\n\n  @Watch(\"inputrawdata\")\n  oninputrawdataChange(newValue: string): void {\n    this.parseinputrawdata(newValue);\n  }\n\n  render(): HTMLUListElement {\n    const lastElem = this.list ? this.list.length - 1 : -1;\n\n    return (\n      <ul>\n        {this.list &&\n          this.list.map((bean, i) => (\n            <z-myz-list-item\n              listitemid={bean.listitemid}\n              text={bean.text}\n              link={bean.link}\n              linktarget={bean.linktarget}\n              icon={bean.icon}\n              underlined={lastElem != i}\n            />\n          ))}\n      </ul>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,34 +1,24 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-ByN2sYu6.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index-BKCj6NR2.js';
+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-106473a8.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 2px 2px var(--shadow-color-base)}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-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);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 2px 2px var(--shadow-color-base)}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-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-primary);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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.selected = createEvent(this, "selected", 7);
         /**
-         * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.
+         * Index of the last tab that held focus.
          */
+        this.focusedTab = undefined;
         this.ariaLabel = "";
-        /**
-         * Navigation tabs orientation.
-         */
         this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        /**
-         * Navigation tabs size.
-         */
         this.size = NavigationTabsSize.BIG;
-        /**
-         * Index of the selected tab.
-         * Useful to programmatically select a tab.
-         * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
-         */
         this.selectedTab = undefined;
-        /**
-         * Index of the last tab that held focus.
-         */
-        this.focusedTab = undefined;
+        this.canNavigate = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
     }
     /**
      * Getter for the direction to check based on current orientation.
@@ -230,21 +220,19 @@ const ZNavigationTabs = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '761584de624112312c9be881390dac16efd76e80', class: {
+        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '450c0b481e8d776a079244036702521c772a385a', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '354b37e5367bc03ba1d2551793c62c932b0eb5cb', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'ca1996b8e92beecacb4ce6a9446efa7478f93d79', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '7f0f849a6d5e898c246efe58b4582e6c7320fb48' })), h("button", { key: 'cb2beffc86bfbac8f196cc783648a48020021270', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'ccb768726c813cb0fd7e49c1a0c30c1bbb4961b9', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "canNavigate": [{
-                "checkScrollEnabled": 0
-            }],
-        "selectedTab": [{
-                "onTabSelected": 0
-            }]
+        "canNavigate": ["checkScrollEnabled"],
+        "selectedTab": ["onTabSelected"]
     }; }
 };
-ZNavigationTabs.style = stylesCss();
+ZNavigationTabs.style = ZNavigationTabsStyle0;
 
 export { ZNavigationTabs as z_navigation_tabs };
+
+//# sourceMappingURL=z-navigation-tabs.entry.js.map

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

@@ -0,0 +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 2px 2px var(--shadow-color-base);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-background);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-primary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel = \"\";\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const container = tabElement.parentElement;\n\n    if (!container) {\n      return;\n    }\n\n    setTimeout(() => {\n      const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;\n\n      const containerRect = container.getBoundingClientRect();\n      const tabRect = tabElement.getBoundingClientRect();\n\n      const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;\n      const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;\n      const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;\n      const scrollAmount = offset - containerSize / 2 + tabSize / 2;\n\n      container.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: container[isHorizontal ? \"scrollLeft\" : \"scrollTop\"] + scrollAmount,\n        behavior: \"smooth\",\n      });\n    }, 100);\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-ByN2sYu6.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-c8ceadeb.js';
 
-const stylesCss = () => `:host{--z-notification--top-offset:0;display:flex;width:100%;box-sizing:border-box;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}`;
+const stylesCss = ":host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2);margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-inverse-success)}:host([type=\"warning\"]){background:var(--color-inverse-warning)}:host([type=\"error\"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-default-success)}:host([type=\"warning\"]) .status-icon{fill:var(--color-default-warning)}:host([type=\"error\"]) .status-icon{fill:var(--color-default-error)}:host([borderposition=\"bottom\"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition=\"top\"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
+const ZNotificationStyle0 = stylesCss;
 
 const ZNotification = class {
     handleActionButtonClick(e) {
@@ -15,23 +16,23 @@ const ZNotification = class {
         registerInstance(this, hostRef);
         this.notificationAction = createEvent(this, "notificationAction", 7);
         this.notificationClose = createEvent(this, "notificationClose", 7);
-        /** Enable close icon */
+        this.contenticonname = undefined;
+        this.actiontext = undefined;
+        this.type = undefined;
         this.showclose = false;
-        /**
-         * Enable shadow.
-         * @deprecated shadow is available only for the `sticky` version of the notification.
-         */
         this.showshadow = false;
-        /** Enable sticky notification bar. */
         this.sticky = false;
+        this.borderposition = "bottom";
         this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
         this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);
     }
     render() {
         var _a;
-        return (h(Host, { key: '689bfc013519c2ca0aba16a520c377c6e4edccbc' }, this.contenticonname && (h("z-icon", { key: '1c9296c9cac6cb65efe8467d458ba416fd837b37', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '973a065c148873e1009ad072d6c7e3e66b6e674c', class: "content-container" }, h("div", { key: '211e47b3cb03cbc180f6a2c2abdade49ad4319e2', class: "content-text" }, h("slot", { key: 'fb538aac60cb506ee8f30f7a9cf67b2954bfae09' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'bbf6e7e24f276e7608cf894611790db8204eb469', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '2f65452871ef504088ae5db0d6fa4bf9a8db12cb', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '67f6a236ac25106c9e24ea493759364e67a99045', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '7a717d8687d3e8e6de06c25192f9e2f14b6563c1' }, h("div", { key: 'eee4aa9a69678e7f353ead6ef4e805544e55426e', class: "main-container" }, this.contenticonname && (h("z-icon", { key: '8d582f822e1e4ad440c65002d9a4abb5e0294040', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '2779b5f3d772ee729c67b1616523ccac1b4646f0', class: "content-container" }, h("div", { key: '1e622f63cc7d8523ab52561360a9de5e8829e976', class: "content-text" }, h("slot", { key: 'f0c65317530288e6ddeb9b604d21243858f25220' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '2cefcdb30e39df9dd2e80f4ddd41f9c887d3594e', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1a4d7a77ae2b9d6f86cfab0c7b72c77daff9d3da', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '33377e8438a076a2c3eee32ab9f513885e15fbcf', name: "multiply-circle", width: 16, height: 16 }))))));
     }
 };
-ZNotification.style = stylesCss();
+ZNotification.style = ZNotificationStyle0;
 
 export { ZNotification as z_notification };
+
+//# sourceMappingURL=z-notification.entry.js.map

package/dist/esm/z-notification.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-notification.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4hEAA4hE,CAAC;AAC/iE,4BAAe,SAAS;;MCaX,aAAa;IAoChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBAnCsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;8BAIY,QAAQ;QAqB1C,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,eAAe,KACnB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxB,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.action-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n * @cssprop --z-notification--content-max-width - The max width of the notification content.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,14 +1,16 @@
-import { r as registerInstance, c as createEvent, h } from './index-ByN2sYu6.js';
-import { f as InputStatus } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h } from './index-c8ceadeb.js';
+import { f as InputStatus } from './index-106473a8.js';
 
-const stylesCss = () => `input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}`;
+const stylesCss = "input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
+const ZOtpStyle0 = stylesCss;
 
 const ZOtp = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.otpChange = createEvent(this, "otpChange", 7);
-        /** Input number */
         this.inputNum = 6;
+        this.status = undefined;
+        this.message = undefined;
     }
     emitInputChange(value) {
         this.otpChange.emit({ value });
@@ -18,22 +20,22 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: 'b538dc35302cf5f20bc7cf4fbda5675f6cc04297', class: "otp-container" }, h("div", { key: '3b385a5b0a9c7b19c217b1ba7c177058a757bcf9', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '78c6a2c425f8b8d222be16db33bb9d12307015d1', class: "otp-container" }, h("div", { key: '18e0d6a908aabdfe49ce4613c094fb12166b0914', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
             }, onKeyUp: (e) => {
                 if (e.keyCode > 47) {
-                    if (i < this.inputNum - 1) {
-                        this.otpRef[i + 1].focus();
-                    }
+                    i < this.inputNum - 1 && this.otpRef[i + 1].focus();
                 }
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '4ee747f877f8ed6db4b79400be46768bf17bc6ef', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '1d3207b1411926edb77efbc8a57e179972b77a2e', message: this.message, status: this.status })));
     }
 };
-ZOtp.style = stylesCss();
+ZOtp.style = ZOtpStyle0;
 
 export { ZOtp as z_otp };
+
+//# sourceMappingURL=z-otp.entry.js.map

package/dist/esm/z-otp.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-otp.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,syBAAsyB,CAAC;AACzzB,mBAAe,SAAS;;MCOX,IAAI;;;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACzC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,aACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB;gBAC1B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;iBAC3B;aACF,EACD,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;iBACrD;aACF,EACD,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACzC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE,EACN,wEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,EACN;KACH;;;;;;","names":[],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-default-error);\n  background-color: var(--color-inverse-error);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"version":3}