@zanichelli/albe-web-components 12.4.0 → 12.4.1

package/dist/cjs/z-panel-elem.cjs.entry.js

@@ -2,33 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-195ca522.js');
+const index = require('./index-dc60bee7.js');
 
 const stylesCss = ".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";
+const ZPanelElemStyle0 = stylesCss;
 
 const ZPanelElem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** link target (optional) */
-    this.target = "_blank";
-    /** disabled status flag (optional) */
-    this.isdisabled = false;
-  }
-  renderIcon() {
-    if (this.isdisabled) {
-      return (index.h("img", { src: this.imgurl, alt: this.imgalt }));
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.elemid = undefined;
+        this.imgurl = undefined;
+        this.imgalt = undefined;
+        this.linkicon = undefined;
+        this.linklabel = undefined;
+        this.url = undefined;
+        this.target = "_blank";
+        this.isdisabled = false;
+        this.descrSlotName = undefined;
+    }
+    renderIcon() {
+        if (this.isdisabled) {
+            return (index.h("img", { src: this.imgurl, alt: this.imgalt }));
+        }
+        return (index.h("a", { class: "elem-icon", href: this.url, target: this.target }, index.h("img", { src: this.imgurl, alt: this.imgalt })));
+    }
+    render() {
+        const elemId = this.elemid ? this.elemid : "";
+        return (index.h("div", { key: 'ef6db6ad212d9675eca3c713a1b4f91cd18f78e0', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, this.renderIcon())), index.h("div", { key: '3735e07d1d2f29df948cc305a0dc03f8f18bf136', class: "panel-elem-link" }, index.h("a", { key: '4ddfc8fa8ee168e4b92bf7a8c2c13bc3c3b365c5', class: {
+                "z-link": true,
+                "z-link-disabled": this.isdisabled,
+                "z-link-icon": true,
+            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: 'fe5d6af74bba6f36ef4b5458c51e3e4b4d17db54', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { class: "panel-elem-desc" }, index.h("slot", { name: this.descrSlotName })))));
     }
-    return (index.h("a", { class: "elem-icon", href: this.url, target: this.target }, index.h("img", { src: this.imgurl, alt: this.imgalt })));
-  }
-  render() {
-    const elemId = this.elemid ? this.elemid : "";
-    return (index.h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, this.renderIcon())), index.h("div", { class: "panel-elem-link" }, index.h("a", { class: {
-        "z-link": true,
-        "z-link-disabled": this.isdisabled,
-        "z-link-icon": true,
-      }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { class: "panel-elem-desc" }, index.h("slot", { name: this.descrSlotName })))));
-  }
 };
-ZPanelElem.style = stylesCss;
+ZPanelElem.style = ZPanelElemStyle0;
 
 exports.z_panel_elem = ZPanelElem;
+
+//# sourceMappingURL=z-panel-elem.cjs.entry.js.map

package/dist/cjs/z-panel-elem.cjs.entry.js.map

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

package/dist/cjs/z-pocket-message.cjs.entry.js

@@ -2,18 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-195ca522.js');
+const index = require('./index-dc60bee7.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:grid;padding-top:calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--color-surface03);color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;grid-template-columns:36px auto;grid-template-rows:auto auto}:host>div>z-icon{grid-column:1 / 2;grid-row:1 / 2}:host>div>div.content{margin-bottom:var(--space-unit);grid-column:2 / 3;grid-row:1 / 2}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;margin-bottom:var(--space-unit);grid-column:1 / 3;grid-row:2 / 3}@media only screen and (min-width: 768px){:host>div>div.cta-wrapper{flex-direction:row;grid-column:2 / 3}}";
+const ZPocketMessageStyle0 = stylesCss;
 
 const ZPocketMessage = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("div", null, index.h("z-icon", { name: "exclamation-circle" }), index.h("div", { class: "content" }, index.h("slot", null)), index.h("div", { class: "cta-wrapper" }, index.h("slot", { name: "cta" }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'fd2ad4b6202ff5ec00783d54f10852f5afead5cc' }, index.h("z-icon", { key: 'a6872094ff69a350e72992874e641480ef1bd582', name: "exclamation-circle" }), index.h("div", { key: 'b9c7d36ea2c2f6beed7aaf98f409db7e37eff2d0', class: "content" }, index.h("slot", { key: '04b72c04be291ffc5690c162ed8bea07251346da' })), index.h("div", { key: 'b51c6836991f7f66a0e21968cefe81e49fda0043', class: "cta-wrapper" }, index.h("slot", { key: '944145d6af60175fc717951e1a8b5a03e533c2d8', name: "cta" }))));
+    }
 };
-ZPocketMessage.style = stylesCss;
+ZPocketMessage.style = ZPocketMessageStyle0;
 
 exports.z_pocket_message = ZPocketMessage;
+
+//# sourceMappingURL=z-pocket-message.cjs.entry.js.map

package/dist/cjs/z-pocket-message.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-pocket-message.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,kvBAAkvB,CAAC;AACrwB,6BAAe,SAAS;;MCUX,cAAc;;;;IACzB,MAAM;QACJ,QACEA,oEACEA,qEAAQ,IAAI,EAAC,oBAAoB,GAAG,EACpCA,kEAAK,KAAK,EAAC,SAAS,IAClBA,oEAAQ,CACJ,EACNA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,EACN;KACH;;;;;;","names":["h"],"sources":["src/snowflakes/myz/pocket/z-pocket-message/styles.css?tag=z-pocket-message&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-message/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: grid;\n  padding-top: calc(var(--space-unit) * 1.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  color: var(--color-surface05);\n  fill: var(--color-surface05);\n  font-size: 14px;\n  grid-template-columns: 36px auto;\n  grid-template-rows: auto auto;\n}\n\n:host > div > z-icon {\n  grid-column: 1 / 2;\n  grid-row: 1 / 2;\n}\n\n:host > div > div.content {\n  margin-bottom: var(--space-unit);\n  grid-column: 2 / 3;\n  grid-row: 1 / 2;\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin-bottom: var(--space-unit);\n  grid-column: 1 / 3;\n  grid-row: 2 / 3;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > div > div.cta-wrapper {\n    flex-direction: row;\n    grid-column: 2 / 3;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot  - message body\n * @slot cta - message CTAs\n */\n@Component({\n  tag: \"z-pocket-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketMessage {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-icon name=\"exclamation-circle\" />\n        <div class=\"content\">\n          <slot />\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot name=\"cta\" />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -2,124 +2,129 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-195ca522.js');
-const index$1 = require('./index-cf9497bc.js');
-const utils = require('./utils-ee86db4f.js');
-const hammer = require('./hammer-4f20813e.js');
-require('./breakpoints-ebe1a437.js');
-require('./_commonjsHelpers-537d719a.js');
+const index = require('./index-dc60bee7.js');
+const index$1 = require('./index-39ce4edf.js');
+const utils = require('./utils-d0b10736.js');
+const hammer = require('./hammer-eaf294be.js');
+require('./breakpoints-5c22092a.js');
 
 const stylesCss$2 = ":host{width:inherit;height:100%;margin:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:0;height:0}:host>div>div.background.open{width:100%;height:100%}:host>div>div.content-wrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.content-wrapper>div{margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);border-radius:var(--space-unit) var(--space-unit) 0 0;box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%)}";
+const ZPocketStyle0 = stylesCss$2;
 
 const ZPocket = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
-    /** pocket status */
-    this.status = index$1.PocketStatus.PREVIEW;
-  }
-  /** open z-pocket */
-  async open() {
-    this.status = index$1.PocketStatus.OPEN;
-  }
-  /** close z-pocket */
-  async close() {
-    this.status = index$1.PocketStatus.CLOSED;
-  }
-  emitPocketToggle(id, status) {
-    this.pocketToggle.emit({ id, status });
-  }
-  handlePocketHeaderClick(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      switch (this.status) {
-        case index$1.PocketStatus.PREVIEW:
-        case index$1.PocketStatus.CLOSED:
-          this.status = index$1.PocketStatus.OPEN;
-          break;
-        case index$1.PocketStatus.OPEN:
-          this.status = index$1.PocketStatus.CLOSED;
-          break;
-      }
-    }
-  }
-  handlePocketHeaderPan(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      if (e.detail.direction === "up") {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
+        this.pocketid = undefined;
+        this.status = index$1.PocketStatus.PREVIEW;
+    }
+    /** open z-pocket */
+    async open() {
         this.status = index$1.PocketStatus.OPEN;
-      }
-      else if (e.detail.direction === "down") {
+    }
+    /** close z-pocket */
+    async close() {
         this.status = index$1.PocketStatus.CLOSED;
-      }
-    }
-  }
-  watchStatusHandler(newVal) {
-    this.emitPocketToggle(this.pocketid, newVal);
-  }
-  componentWillLoad() {
-    this.emitPocketToggle(this.pocketid, this.status);
-  }
-  handleBackgroundClick(e) {
-    if (e.target.dataset.action == "pocketBackground") {
-      this.close();
-    }
-  }
-  render() {
-    return (index.h("div", null, index.h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { id: this.pocketid, class: "content-wrapper" }, index.h("div", null, index.h("slot", null)))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "status": ["watchStatusHandler"]
-  }; }
+    }
+    emitPocketToggle(id, status) {
+        this.pocketToggle.emit({ id, status });
+    }
+    handlePocketHeaderClick(e) {
+        if (e.detail.id && e.detail.id === this.pocketid) {
+            switch (this.status) {
+                case index$1.PocketStatus.PREVIEW:
+                case index$1.PocketStatus.CLOSED:
+                    this.status = index$1.PocketStatus.OPEN;
+                    break;
+                case index$1.PocketStatus.OPEN:
+                    this.status = index$1.PocketStatus.CLOSED;
+                    break;
+            }
+        }
+    }
+    handlePocketHeaderPan(e) {
+        if (e.detail.id && e.detail.id === this.pocketid) {
+            if (e.detail.direction === "up") {
+                this.status = index$1.PocketStatus.OPEN;
+            }
+            else if (e.detail.direction === "down") {
+                this.status = index$1.PocketStatus.CLOSED;
+            }
+        }
+    }
+    watchStatusHandler(newVal) {
+        this.emitPocketToggle(this.pocketid, newVal);
+    }
+    componentWillLoad() {
+        this.emitPocketToggle(this.pocketid, this.status);
+    }
+    handleBackgroundClick(e) {
+        if (e.target.dataset.action == "pocketBackground") {
+            this.close();
+        }
+    }
+    render() {
+        return (index.h("div", { key: '326350f5b42a676f92c1246a676f074c12b5e2c8' }, index.h("div", { key: 'ff53a47e16b8a2809e96d49b129c6187e0e3364a', "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { key: '28606d7b860f7283919f00010bf5f1c83ca75aa7', id: this.pocketid, class: "content-wrapper" }, index.h("div", { key: 'b54698aaa349bb75df7c6344b3cfff3122e530c5' }, index.h("slot", { key: '0e5ac1491d2c5128ed4c93b116d91a62e2afde41' })))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "status": ["watchStatusHandler"]
+    }; }
 };
-ZPocket.style = stylesCss$2;
+ZPocket.style = ZPocketStyle0;
 
 const stylesCss$1 = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>main{overflow:auto;border-right:var(--border-size-small) solid var(--color-surface03);border-left:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
+const ZPocketBodyStyle0 = stylesCss$1;
 
 const ZPocketBody = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** pocket status */
-    this.status = index$1.PocketStatus.PREVIEW;
-  }
-  handlePocketToggle(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      this.status = e.detail.status;
-    }
-  }
-  render() {
-    return (index.h("main", { class: this.status }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pocketid = undefined;
+        this.status = index$1.PocketStatus.PREVIEW;
+    }
+    handlePocketToggle(e) {
+        if (e.detail.id && e.detail.id === this.pocketid) {
+            this.status = e.detail.status;
+        }
+    }
+    render() {
+        return (index.h("main", { key: 'a21e5307e4af8970761af2f04d1344997e171b48', class: this.status }, index.h("slot", { key: 'c6b38fb56dbca9e8cdb03acfb601f32822312fee' })));
+    }
 };
-ZPocketBody.style = stylesCss$1;
+ZPocketBody.style = ZPocketBodyStyle0;
 
 const stylesCss = ":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>header{display:flex;height:36px;flex-flow:row nowrap;align-items:center;justify-content:center;border:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);border-radius:var(--space-unit) var(--space-unit) 0 0;cursor:pointer}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
+const ZPocketHeaderStyle0 = stylesCss;
 
 const ZPocketHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pocketHeaderClick = index.createEvent(this, "pocketHeaderClick", 7);
-    this.pocketHeaderPan = index.createEvent(this, "pocketHeaderPan", 7);
-    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
-  }
-  emitPocketHeaderClick() {
-    this.pocketHeaderClick.emit({ id: this.pocketid });
-  }
-  emitPocketHeaderPan(direction) {
-    this.pocketHeaderPan.emit({ id: this.pocketid, direction });
-  }
-  componentDidLoad() {
-    // INFO: swipe handling
-    const mc = new hammer.hammer(this.swipeWrap);
-    mc.get("pan").set({ direction: hammer.hammer.DIRECTION_VERTICAL });
-    mc.on("panup", () => this.emitPocketHeaderPan("up"));
-    mc.on("pandown", () => this.emitPocketHeaderPan("down"));
-  }
-  render() {
-    return (index.h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", null)));
-  }
+    emitPocketHeaderClick() {
+        this.pocketHeaderClick.emit({ id: this.pocketid });
+    }
+    emitPocketHeaderPan(direction) {
+        this.pocketHeaderPan.emit({ id: this.pocketid, direction });
+    }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pocketHeaderClick = index.createEvent(this, "pocketHeaderClick", 7);
+        this.pocketHeaderPan = index.createEvent(this, "pocketHeaderPan", 7);
+        this.pocketid = undefined;
+        this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
+    }
+    componentDidLoad() {
+        // INFO: swipe handling
+        const mc = new hammer.Hammer(this.swipeWrap);
+        mc.get("pan").set({ direction: hammer.Hammer.DIRECTION_VERTICAL });
+        mc.on("panup", () => this.emitPocketHeaderPan("up"));
+        mc.on("pandown", () => this.emitPocketHeaderPan("down"));
+    }
+    render() {
+        return (index.h("header", { key: '90a6554d0c79aebcb62332c7ee23018103fa1916', role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: (el) => (this.swipeWrap = el) }, index.h("slot", { key: '4a3e7b093ba47de8fdbe0e96fff4f5880220bec4' })));
+    }
 };
-ZPocketHeader.style = stylesCss;
+ZPocketHeader.style = ZPocketHeaderStyle0;
 
 exports.z_pocket = ZPocket;
 exports.z_pocket_body = ZPocketBody;
 exports.z_pocket_header = ZPocketHeader;
+
+//# sourceMappingURL=z-pocket_3.cjs.entry.js.map

package/dist/cjs/z-pocket_3.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-pocket.z-pocket-body.z-pocket-header.entry.cjs.js","mappings":"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","names":["stylesCss","PocketStatus","h","Hammer","handleKeyboardSubmit"],"sources":["src/snowflakes/myz/pocket/z-pocket/styles.css?tag=z-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket/index.tsx","src/snowflakes/myz/pocket/z-pocket-body/styles.css?tag=z-pocket-body&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-body/index.tsx","src/snowflakes/myz/pocket/z-pocket-header/styles.css?tag=z-pocket-header&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-header/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  height: 100%;\n  margin: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  width: inherit;\n  height: 100%;\n  margin: inherit;\n}\n\n:host > div > div.background {\n  position: fixed;\n  z-index: 998;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\n:host > div > div.background.open {\n  width: 100%;\n  height: 100%;\n}\n\n:host > div > div.content-wrapper {\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  left: 0;\n  width: inherit;\n  margin: inherit;\n}\n\n:host > div > div.content-wrapper > div {\n  margin: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);\n  border-radius: var(--space-unit) var(--space-unit) 0 0;\n  box-shadow: 0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%);\n}\n","import {Component, Prop, h, Method, Event, EventEmitter, Listen, Element, Watch} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot - pocket content\n */\n@Component({\n  tag: \"z-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocket {\n  @Element() hostElement: HTMLZPocketElement;\n\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  /** open z-pocket */\n  @Method()\n  async open(): Promise<void> {\n    this.status = PocketStatus.OPEN;\n  }\n\n  /** close z-pocket */\n  @Method()\n  async close(): Promise<void> {\n    this.status = PocketStatus.CLOSED;\n  }\n\n  /** Emitted on pocket toggle, returns pocket id and status */\n  @Event()\n  pocketToggle: EventEmitter;\n\n  private emitPocketToggle(id: string, status: PocketStatus): void {\n    this.pocketToggle.emit({id, status});\n  }\n\n  @Listen(\"pocketHeaderClick\")\n  handlePocketHeaderClick(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      switch (this.status) {\n        case PocketStatus.PREVIEW:\n        case PocketStatus.CLOSED:\n          this.status = PocketStatus.OPEN;\n          break;\n        case PocketStatus.OPEN:\n          this.status = PocketStatus.CLOSED;\n          break;\n      }\n    }\n  }\n\n  @Listen(\"pocketHeaderPan\")\n  handlePocketHeaderPan(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      if (e.detail.direction === \"up\") {\n        this.status = PocketStatus.OPEN;\n      } else if (e.detail.direction === \"down\") {\n        this.status = PocketStatus.CLOSED;\n      }\n    }\n  }\n\n  @Watch(\"status\")\n  watchStatusHandler(newVal: PocketStatus): void {\n    this.emitPocketToggle(this.pocketid, newVal);\n  }\n\n  componentWillLoad(): void {\n    this.emitPocketToggle(this.pocketid, this.status);\n  }\n\n  private handleBackgroundClick(e: MouseEvent): void {\n    if ((e.target as HTMLElement).dataset.action == \"pocketBackground\") {\n      this.close();\n    }\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <div\n          data-action=\"pocketBackground\"\n          data-pocket={this.pocketid}\n          class={`background ${this.status}`}\n          onClick={(e: MouseEvent) => this.handleBackgroundClick(e)}\n        />\n        <div\n          id={this.pocketid}\n          class=\"content-wrapper\"\n        >\n          <div>\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > main {\n  overflow: auto;\n  border-right: var(--border-size-small) solid var(--color-surface03);\n  border-left: var(--border-size-small) solid var(--color-surface03);\n  background: var(--color-surface01);\n  scrollbar-width: none;\n}\n\n:host > main.preview {\n  max-height: 225px;\n  transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host > main.open {\n  max-height: calc(100vh - 48px);\n  transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host > main.closed {\n  height: 0;\n  transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > main.preview {\n    max-height: 157px;\n  }\n}\n","import {Component, h, Prop, Listen} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-pocket-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketBody {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  render(): HTMLElement {\n    return (\n      <main class={this.status}>\n        <slot />\n      </main>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > header {\n  display: flex;\n  height: 36px;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background: var(--color-surface01);\n  border-radius: var(--space-unit) var(--space-unit) 0 0;\n  cursor: pointer;\n}\n\n:host > header:focus {\n  outline: none;\n}\n\n:host > header::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\nimport Hammer from \"hammerjs\";\n\n/**\n * @slot  - pocket header content\n */\n@Component({\n  tag: \"z-pocket-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketHeader {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  private swipeWrap: HTMLElement;\n\n  /** Emitted on pocket header click */\n  @Event()\n  pocketHeaderClick: EventEmitter;\n\n  private emitPocketHeaderClick(): void {\n    this.pocketHeaderClick.emit({id: this.pocketid});\n  }\n\n  /** Emitted on pocket header pan */\n  @Event()\n  pocketHeaderPan: EventEmitter;\n\n  private emitPocketHeaderPan(direction: string): void {\n    this.pocketHeaderPan.emit({id: this.pocketid, direction});\n  }\n\n  constructor() {\n    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);\n  }\n\n  componentDidLoad(): void {\n    // INFO: swipe handling\n    const mc = new Hammer(this.swipeWrap);\n    mc.get(\"pan\").set({direction: Hammer.DIRECTION_VERTICAL});\n    mc.on(\"panup\", () => this.emitPocketHeaderPan(\"up\"));\n    mc.on(\"pandown\", () => this.emitPocketHeaderPan(\"down\"));\n  }\n\n  render(): HTMLElement {\n    return (\n      <header\n        role=\"button\"\n        tabindex={0}\n        onClick={() => this.emitPocketHeaderClick()}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick)}\n        ref={(el) => (this.swipeWrap = el as HTMLElement)}\n      >\n        <slot />\n      </header>\n    );\n  }\n}\n"],"version":3}