@zanichelli/albe-web-components 16.4.1 → 17.0.0-RC2

package/dist/components/index20.js

@@ -1,66 +1,62 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as handleKeyboardSubmit } from './utils.js';
-import { d as defineCustomElement$1 } from './index9.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { L as LicenseType } from './index2.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 ZMyzListItemStyle0 = stylesCss;
+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 ZMyzCardHeaderStyle0 = stylesCss;
 
-const ZMyzListItem = /*@__PURE__*/ proxyCustomElement(class ZMyzListItem extends HTMLElement {
-    emitZListItemLinkClick(e, linkId) {
-        this.zListItemLinkClick.emit({ e, linkId });
-    }
-    emitZListItemClick(e, listitemid) {
-        this.zListItemClick.emit({ e, listitemid });
-    }
+const ZMyzCardHeader = /*@__PURE__*/ proxyCustomElement(class ZMyzCardHeader extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
-        this.zListItemClick = createEvent(this, "zListItemClick", 7);
-        this.text = undefined;
-        this.link = undefined;
-        this.linktarget = "_self";
-        this.icon = undefined;
-        this.listitemid = undefined;
-        this.action = undefined;
-        this.underlined = true;
-        this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
-        this.emitZListItemClick = this.emitZListItemClick.bind(this);
+        this.titolo = undefined;
+        this.faded = undefined;
+        this.cardtype = undefined;
+        this.allowTooltip = false;
+    }
+    getTitle() {
+        return this.allowTooltip ? this.titolo : "";
+    }
+    componentDidLoad() {
+        if (this.elementHasEllipsis()) {
+            this.allowTooltip = true;
+        }
+    }
+    elementHasEllipsis() {
+        return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+    }
+    retrieveClass() {
+        return {
+            real: this.cardtype === LicenseType.REAL,
+            trial: this.cardtype === LicenseType.TRIAL,
+            temp: this.cardtype === LicenseType.TEMP,
+            faded: this.faded,
+        };
     }
     render() {
-        const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (h("li", { key: '724946d19b711854f81ba9ea9aa30e931c35ac3b', 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: 'f10d3d95d9e36acb282c7d17beb5af69aa71bb4c', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '4aee715f8daab185a502e446cdfc1c3e51e549b9', 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: '8347ee62c05d2262ea4df2efb8cbef29254b0759' }))));
+        return (h("header", { key: 'e6a40ccbb535906f26293e87960882a69de45bc4', class: this.retrieveClass() }, h("slot", { key: 'de2e5208673b8ff5b5bbf1fc39c61895b629c1ad', name: "aria-heading" }), h("span", { key: 'f45a5546d1aaa3045c0cf16620d7852a5be182f2', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: 'a885cbb967d8553b067a5d34fe701888754cc842', name: "icon" })));
     }
-    static get style() { return ZMyzListItemStyle0; }
-}, [1, "z-myz-list-item", {
-        "text": [1],
-        "link": [1],
-        "linktarget": [1],
-        "icon": [1],
-        "listitemid": [1],
-        "action": [1],
-        "underlined": [4]
+    static get style() { return ZMyzCardHeaderStyle0; }
+}, [1, "z-myz-card-header", {
+        "titolo": [1],
+        "faded": [4],
+        "cardtype": [1],
+        "allowTooltip": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-myz-list-item", "z-icon"];
+    const components = ["z-myz-card-header"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-myz-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMyzListItem);
-            }
-            break;
-        case "z-icon":
+        case "z-myz-card-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$1();
+                customElements.define(tagName, ZMyzCardHeader);
             }
             break;
     } });
 }
 
-export { ZMyzListItem as Z, defineCustomElement as d };
+export { ZMyzCardHeader as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index20.js.map

package/dist/components/index20.js.map

@@ -1 +1 @@
-{"file":"index20.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}
+{"file":"index20.js","mappings":";;;AAAA,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":[],"sources":["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":["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}

package/dist/components/index21.js

@@ -1,103 +1,66 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h as handleKeyboardSubmit } from './utils.js';
+import { d as defineCustomElement$1 } from './index9.js';
 
-const stylesCss = ".sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.canvas-background.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.canvas-background.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(.canvas-content::-webkit-scrollbar-track){.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}}@media (min-width: 768px){[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){flex:none}.canvas-container.sc-z-offcanvas{width:max(var(--z-offcanvas--container-width, 375px), 375px);min-width:375px}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}";
-const ZOffcanvasStyle0 = stylesCss;
+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 ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTMLElement {
+const ZMyzListItem = /*@__PURE__*/ proxyCustomElement(class ZMyzListItem extends HTMLElement {
+    emitZListItemLinkClick(e, linkId) {
+        this.zListItemLinkClick.emit({ e, linkId });
+    }
+    emitZListItemClick(e, listitemid) {
+        this.zListItemClick.emit({ e, listitemid });
+    }
     constructor() {
         super();
         this.__registerHost();
-        this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
-        this.variant = OffCanvasVariant.PUSHCONTENT;
-        this.open = false;
-        this.transitiondirection = TransitionDirection.LEFT;
-        this.skipLoadAnimation = false;
-        this.skipAnimation = false;
-    }
-    /**
-     * Stop the event default behavior and propagation when the offcanvas is closed.
-     */
-    stopEvent(event) {
-        if (this.open) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    /**
-     * Hide the body overflow when the offcanvas is open.
-     */
-    handlePageOverflow() {
-        const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP
-            ? "overflow-y"
-            : "overflow-x";
-        document.body.style[overflow] = this.open ? "hidden" : "";
-    }
-    onOpenChanged() {
-        var _a;
-        this.canvasOpenStatusChanged.emit(this.open);
-        if (!this.open) {
-            // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow
-            const listenerCallback = () => {
-                this.handlePageOverflow();
-                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
-            };
-            (_a = this.canvasContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", listenerCallback);
-        }
-        else {
-            this.handlePageOverflow();
-        }
-    }
-    componentWillLoad() {
-        if (this.open) {
-            this.skipAnimation = true;
-        }
-    }
-    componentDidLoad() {
-        this.handlePageOverflow();
-    }
-    componentDidRender() {
-        this.skipAnimation = false;
-    }
-    connectedCallback() {
-        this.handlePageOverflow();
-    }
-    disconnectedCallback() {
-        this.open = false;
+        this.__attachShadow();
+        this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
+        this.zListItemClick = createEvent(this, "zListItemClick", 7);
+        this.text = undefined;
+        this.link = undefined;
+        this.linktarget = "_self";
+        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() {
-        return (h(Host, { key: 'd6d26ab3d262f18a7f7b0d79064d833550d7dc5e', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '5006a356d94cd614e646f8c6cc22ef9bc82b230c', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'cdf6e5c0d1d7b594a75ba49214c7782c09f13fab', class: "canvas-content", role: "presentation" }, h("slot", { key: '9576d80ca8e63ae785fb66e01b696412ab8acad2', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '91e08d2782d1c4ec027ebf452f128d64b96ef01d', class: "canvas-background", onClick: () => (this.open = false) }))));
+        const linkId = this.listitemid ? `link_${this.listitemid}` : "";
+        return (h("li", { key: '65c794482dd4142a5260dac2c767caaf5a6e1d49', 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: '071acb05cfcb2bf10f587c6158a850daaef012eb', class: this.underlined && "border" }, this.icon && h("z-icon", { key: 'cd5c46d4a05314692cd5fb77fd0cdeff3c340dbc', 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: '7d7efd10b25c5f284fdcfa9beb7c82e48d2ae8bb' }))));
     }
-    static get watchers() { return {
-        "variant": ["handlePageOverflow"],
-        "open": ["onOpenChanged"]
-    }; }
-    static get style() { return ZOffcanvasStyle0; }
-}, [6, "z-offcanvas", {
-        "variant": [513],
-        "open": [1540],
-        "transitiondirection": [513],
-        "skipLoadAnimation": [4, "skip-load-animation"],
-        "skipAnimation": [32]
-    }, [[2, "click", "stopEvent"], [2, "focusin", "stopEvent"]], {
-        "variant": ["handlePageOverflow"],
-        "open": ["onOpenChanged"]
+    static get style() { return ZMyzListItemStyle0; }
+}, [1, "z-myz-list-item", {
+        "text": [1],
+        "link": [1],
+        "linktarget": [1],
+        "icon": [1],
+        "listitemid": [1],
+        "action": [1],
+        "underlined": [4]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-offcanvas"];
+    const components = ["z-myz-list-item", "z-icon"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-offcanvas":
+        case "z-myz-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZMyzListItem);
+            }
+            break;
+        case "z-icon":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZOffcanvas);
+                defineCustomElement$1();
             }
             break;
     } });
 }
 
-export { ZOffcanvas as Z, defineCustomElement as d };
+export { ZMyzListItem as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index21.js.map

package/dist/components/index21.js.map

@@ -1 +1 @@
-{"file":"index21.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,uwGAAuwG,CAAC;AAC1xG,yBAAe,SAAS;;MCcX,UAAU;;;;;uBASQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAOgC,mBAAmB,CAAC,IAAI;iCAQhD,KAAK;6BAQD,KAAK;;;;;IAS7B,SAAS,CAAC,KAAY;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;IAMO,kBAAkB;QACxB,MAAM,QAAQ,GACZ,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE;cAC5F,YAAY;cACZ,YAAY,CAAC;QAEnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;IAGD,aAAa;;QACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;YAEd,MAAM,gBAAgB,GAAG;gBACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;aAC7E,CAAC;YAEF,MAAA,IAAI,CAAC,eAAe,0CAAE,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uEACa,IAAI,CAAC,aAAa,iBACrB,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,IAEvC,4DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IAExC,4DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,cAAc,IAEnB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACL,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE,MAC/F,4DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"sourcesContent":[":host {\n  --z-offcanvas--container-width: ;\n  --z-offcanvas--container-height: ;\n  --z-offcanvas--top-space: ;\n\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n  overflow: hidden;\n}\n\n.canvas-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 100%;\n  height: 100%;\n  background: var(--color-surface01);\n  transition: transform 0.4s ease-out;\n}\n\n:host > * {\n  position: fixed;\n  top: var(--z-offcanvas--top-space, 0);\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n:host([open]) > * {\n  height: calc(100% - var(--z-offcanvas--top-space, 0px));\n}\n\n:host([transitiondirection=\"right\"]) > .canvas-container {\n  transform: translateX(-100%);\n}\n\n:host([transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(100%);\n}\n\n:host([open][transitiondirection=\"right\"]) > .canvas-container,\n:host([open][transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(0);\n}\n\n:host([transitiondirection=\"up\"]) > .canvas-container {\n  top: auto;\n  bottom: 0;\n  height: var(--z-offcanvas--container-height, 90%);\n  transform: translateY(100%);\n}\n\n:host([transitiondirection=\"up\"], [variant=\"overlay\"]) > .canvas-container {\n  z-index: 1001;\n}\n\n:host([open][transitiondirection=\"up\"]) > .canvas-container {\n  transform: translateY(0);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) > .canvas-container {\n  position: relative;\n  height: 100%;\n}\n\n:host([variant=\"pushcontent\"]:not([open])) {\n  display: none;\n}\n\n:host([skip-animation]) > .canvas-container {\n  transition: none;\n}\n\n.canvas-background {\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gray900);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.4s ease-out;\n}\n\n:host([open]) > .canvas-background {\n  opacity: 0.7;\n  pointer-events: unset;\n}\n\n.canvas-container > .canvas-content {\n  overflow: hidden auto;\n  flex: 1 auto;\n  padding: 0 calc(var(--space-unit) * 2);\n  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n}\n\n/* Webkit Scrollbar */\n.canvas-container .canvas-content::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(.canvas-content::-webkit-scrollbar-track) {\n  .canvas-container .canvas-content {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n/* Tablet / Desktop */\n@media (min-width: 768px) {\n  :host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n    flex: none; /* Prevent unwanted width changes in flex containers */\n  }\n\n  .canvas-container {\n    width: max(var(--z-offcanvas--container-width, 375px), 375px);\n    min-width: 375px;\n  }\n\n  :host([transitiondirection=\"up\"]) > .canvas-container {\n    width: 100%;\n  }\n\n  :host([transitiondirection=\"right\"]) > .canvas-container {\n    right: auto;\n    left: 0;\n  }\n\n  :host([transitiondirection=\"left\"]) > .canvas-container {\n    right: 0;\n    left: auto;\n  }\n}\n","import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContainer: HTMLElement;\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (!this.open) {\n      // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    } else {\n      this.handlePageOverflow();\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content\"\n            role=\"presentation\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (\n          <div\n            class=\"canvas-background\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index21.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}