@zanichelli/albe-web-components 18.3.4 → 18.4.0-RC1

package/dist/cjs/z-result-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-result-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAMA,WAAS,GAAG,09BAA09B,CAAC;AAC7+B,0BAAeA,WAAS;;ACDxB,MAAM,SAAS,GAAG,4/BAA4/B,CAAC;AAC/gC,0BAAe,SAAS;;MCMX,WAAW;;;;;;;;;iCA+CF,KAAK;0BAOZ,KAAK;;IAElB,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7EA,kEAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,iBAAiB,KACrBA,oEACEA,kEAAK,KAAK,EAAC,2BAA2B,GAAO,EAC7CA,kEAAK,KAAK,EAAC,2BAA2B,GAAO,CACzC,CACP,EACDA,kEACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,GAAG,EAAC,YAAY,EAChB,KAAK,EAAC,aAAa,GACnB,CACE,CACF,EACNA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,kEAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,MAAM,CAAO,EAC7CA,kEAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAO,EAChDA,kEAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,aAAa,CAAO,EACtDA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACNA,mEAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAQ,CAClD,CACD,EACP;KACH;;;;;;;","names":["stylesCss","h","Host"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/css-components/z-cover/styles.css?tag=z-result-card&encapsulation=shadow","src/components/result-card/z-result-card/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  max-width: 500px;\n  height: 175px;\n  border: 2px solid var(--color-surface02);\n  border-radius: var(--border-size-large);\n  font-family: var(--font-family-sans);\n}\n\n.info-container {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  padding: var(--space-unit);\n}\n\n.author-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.opera-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--space-unit);\n  margin-bottom: 4px;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-overflow: ellipsis;\n}\n\n.tags-container {\n  display: flex;\n  margin-top: var(--space-unit);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  height: auto;\n  flex-direction: column;\n  margin-top: auto;\n}\n\n@media (max-width: var(--breakpoint-sm)) {\n  .opera-title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n",".z-cover-container {\n  position: relative;\n  display: flex;\n  width: 115px;\n  height: 175px;\n  align-items: center;\n  padding: var(--space-unit);\n}\n\n.z-cover-stack {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n/* Base sizes for single cover */\n.z-cover-shadow,\n.z-cover-img {\n  width: 115px;\n  min-width: 115px;\n  max-width: 115px;\n  height: 160px;\n  min-height: 160px;\n  max-height: 160px;\n}\n\n/* Scaled sizes for multiple covers */\n.z-cover-container.has-multiple .z-cover-shadow,\n.z-cover-container.has-multiple .z-cover-img {\n  width: 95px;\n  min-width: 95px;\n  max-width: 95px;\n  height: 140px;\n  min-height: 140px;\n  max-height: 140px;\n}\n\n.z-cover-shadow {\n  position: absolute;\n  z-index: 1;\n  background: #e0e0e0;\n  border-radius: var(--border-size-large);\n  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n}\n\n.z-shadow-1 {\n  z-index: 1;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  border: 1px solid var(--gray200);\n}\n\n.z-shadow-2 {\n  z-index: 0;\n  top: calc(var(--space-unit) * 2);\n  right: calc(var(--space-unit) * 2);\n  border: 1px solid var(--gray200);\n}\n\n.z-cover-img {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  border-radius: 6px;\n  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);\n  object-fit: cover;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n  right: 0;\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-cover/styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /**\n   * The author of the opera.\n   */\n  @Prop()\n  author: string;\n\n  /**\n   * The title of the opera.\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * The subtitle of the opera.\n   */\n  @Prop()\n  operaSubtitle: string;\n\n  /**\n   * Tags associated with the opera.\n   * This is a string array that can be used to display tags in the component.\n   */\n  @Prop()\n  operaTags: string[];\n\n  /**\n   * The label for the volumes.\n   * This is used to display the number of volumes or a related message.\n   */\n  @Prop()\n  volumesLabel: string;\n\n  /**\n   * The URL of the cover image.\n   * This is used to display the cover image of the opera.\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Indicates whether the card has multiple covers.\n   * This is used to apply specific styles when there are multiple covers.\n   */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /**\n   * Indicates whether the card is an info page.\n   * This can be used to apply specific styles or behaviors for info pages.\n   */\n  @Prop()\n  isInfoPage = false;\n\n  render(): HTMLZResultCardElement {\n    return (\n      <Host>\n        <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n          <div class=\"z-cover-stack\">\n            {this.hasMultipleCovers && (\n              <div>\n                <div class=\"z-cover-shadow z-shadow-2\"></div>\n                <div class=\"z-cover-shadow z-shadow-1\"></div>\n              </div>\n            )}\n            <img\n              src={this.cover}\n              alt=\"Book Cover\"\n              class=\"z-cover-img\"\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          <div class=\"author-label\">{this.author}</div>\n          <div class=\"opera-title\">{this.operaTitle}</div>\n          <div class=\"opera-subtitle\">{this.operaSubtitle}</div>\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <span class=\"volumes-label\">{this.volumesLabel}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -478,7 +478,7 @@ const ZSelect = class {
         return (index.h("z-input-message", { message: utils.boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (index.h("div", { key: 'a8109cbdbf4541195123f7dc823a05f630858f05', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (index.h("div", { key: '2285db2d7c2b21dbe0c99c8e6eda89d803db9b48', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-skip-to-content.cjs.entry.js

@@ -52,7 +52,7 @@ const ZSkipToContent = class {
         this.visible = false;
     }
     render() {
-        return (index.h(index.Host, { key: '0d7f1db9f36fdb279d5fb77861adb0f3168d7037', class: {
+        return (index.h(index.Host, { key: '6acaba110f9188e09f14fa3d8e13fb3898adbdf3', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/cjs/z-stepper-item.cjs.entry.js

@@ -24,7 +24,7 @@ const ZStepperItem = class {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (index.h(index.Host, { key: 'b2019e12066ce3284dde477c420b879ebca11b04', role: "listitem" }, index.h("button", Object.assign({ key: '0857223230bc66509eada8024b6e8c718320aa94', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: '625bf1cbdfe6a2ee0814b579b8755c7c91cb0480', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: '4c5828f99ca1d08c9169fa0729fe31f1035acd0e' }, index.h("slot", { key: 'e7b48f471f37b8a8a40fcb043df6fe9464a0bf3b' })))));
+        return (index.h(index.Host, { key: 'fdc1dd5d67708dd2930988e33c43972de8e87889', role: "listitem" }, index.h("button", Object.assign({ key: '421be1d6db4284a7b8b00be1424dc16bf9b12c4c', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: '14894a8a0a9855875b4bc304570ea377a426076d', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: 'f40f8d7405765eed4f2c55a2815ff4c39780b1c7' }, index.h("slot", { key: '29a45783b3eae975ff3242c7407f316214861174' })))));
     }
 };
 ZStepperItem.style = ZStepperItemStyle0;

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

@@ -12,7 +12,7 @@ const ZStepper = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b4d76cddb405ccc4db532cc4d544898424b290fa', role: "list" }, index.h("slot", { key: '9b7d842263cf062b5f3b8a27b72d7a66142bc341' })));
+        return (index.h(index.Host, { key: 'e4c143f5f9036314160ce81e9a746532fc5e4ed6', role: "list" }, index.h("slot", { key: '898b263837edd7518c8b40cbe870326e0964852d' })));
     }
 };
 ZStepper.style = ZStepperStyle0;

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-96af6326.js');
-require('./index-62712250.js');
-require('./index-364e3f60.js');
-require('./index-bf197d11.js');
-require('./index-394da17e.js');
+require('./index-4c78d3a1.js');
+require('./index-70996015.js');
+require('./index-9ace9fb5.js');
+require('./index-5d780fd2.js');
 require('./utils-67ea6e35.js');
 require('./index-4f18c0e2.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-d1759a5a.js');
-require('./index-f0b0a7d1.js');
+require('./index-08baa40e.js');
+require('./index-ced16381.js');
 
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
 const ZTableStyle0 = stylesCss;
@@ -45,7 +45,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: 'a37bf2d018aedf198e11248d9952c062deddc545', expandable: this.expandable }, index.h("div", { key: 'a769b79ee55eb5425bb6c72059437f051967c3b3', class: "table", role: "table" }, index.h("slot", { key: '0ba782144cc2f139484954747d530d6f1c606a0d' }))));
+        return (index.h(index.Host, { key: '436f47d81c40bc1c24a0bb1d660cfa897ebba693', expandable: this.expandable }, index.h("div", { key: '94fdeab57ac9368c546c08db96de2f87aa3d12f6', class: "table", role: "table" }, index.h("slot", { key: 'c146bf36f91ca7fe4b2eca2654f4341ddc98074e' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-62712250.js');
+const index = require('./index-4c78d3a1.js');
 require('./index-96af6326.js');
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d1759a5a.js');
+const index = require('./index-08baa40e.js');
 require('./index-96af6326.js');
 require('./index-4f18c0e2.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-364e3f60.js');
+const index = require('./index-70996015.js');
 require('./index-96af6326.js');
 
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f0b0a7d1.js');
+const index = require('./index-ced16381.js');
 require('./index-96af6326.js');
 require('./index-4f18c0e2.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bf197d11.js');
+const index = require('./index-9ace9fb5.js');
 require('./index-96af6326.js');
 
 

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -45,7 +45,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'a40d72d8809dbf05ddce6a05fc59fd4891cd92e7', name: "toasts" });
+        return index.h("slot", { key: '62e2fe7f3678ea305b0a26f897ee9d4991c511bd', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -2796,7 +2796,7 @@ const ZToastNotification = class {
             } })))));
     }
     render() {
-        return (index.h(index.Host, { key: 'f9b4a2fe7d3642b1cbbe6f2e433ddbbde49568fd', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
+        return (index.h(index.Host, { key: '9f392eaf945d71738ed9987df961a5812e132924', style: { "--percentuale": `${this.percentage}%` }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -25,10 +25,10 @@ const ZToggleButton = class {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (index.h("button", { key: 'cd6e7b7d9e8366975ac5a35938638c36736900ef', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (index.h("button", { key: '272950d88d5edb2cedb4f9f2525e2b9f7761e084', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { key: 'd93a2b08f889f918dac31a6dd1a27878d9cac907', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, index.h("z-icon", { key: 'aba2d176bd41806333972e95c8168b8ff054e5e5', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
 };
 ZToggleButton.style = ZToggleButtonStyle0;

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -33,14 +33,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (index.h(index.Host, { key: '5c2fa5cdb898b1948d3961780c5fa72786c2e6bc' }, index.h("input", { key: '3471fe87f44daf4a9c7a197f9d7d7349736c9823', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: '6fcbb7ff25810d00f311c22be960ff04f900907b', htmlFor: this.htmlid, class: {
+        return (index.h(index.Host, { key: '184be8ee714161bc3a7a5f33d71ac449e93019b2' }, index.h("input", { key: '855f85b975a6cc79a248064545aba86cede55149', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), index.h("label", { key: 'feb975924c1dc05f11f48aa3bf97f029a112182c', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, index.h("span", { key: '6f734eaac90511fd4939b4f8bab2632f8ad24c6d' }, index.h("slot", { key: '0b7b519ae530e0ebf6b4b3ea0199e8b0d54094da' })), index.h("span", { key: 'b41791cbd5aa569a3f1361dd5881b86cb3aa0322', class: {
+            } }, index.h("span", { key: '20ba4773b4e73a9eb733d06560220a432966396f' }, index.h("slot", { key: 'eb8f2d8c27ec654fc35690bafc893f9ab18fe471' })), index.h("span", { key: 'b7310134236905b43118066c253c0c7ddaa57821', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, index.h("span", { key: 'f79160dde4dda3a3988e57fa5addb698573acde5', class: "circle" }, this.checked && (index.h("z-icon", { key: '011bd9649c7cb1c08f5ee7dd534edbe11fe7706f', width: 12, height: 12, name: "checkmark" })))))));
+            } }, index.h("span", { key: '52cccc3d58f17c7e383a4f0b159bbc2986d2f0e8', class: "circle" }, this.checked && (index.h("z-icon", { key: '954e90b5343a04821cbd9dd2b623d166899f2d0d', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = ZToggleSwitchStyle0;

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

@@ -21,7 +21,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (index.h("z-popover", { key: 'a978e9df607830aec7c30ef3d83c5f8529772722', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: '0c6adc98da3941ed5f19902dc52ad8188215c340' })));
+        return (index.h("z-popover", { key: 'f51d0247643b2ff89153eee39a5e7d5fd7fa84df', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: '903502101d0f1451e428b1805afe543334fe300f' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-394da17e.js');
+const index = require('./index-5d780fd2.js');
 require('./index-96af6326.js');
 require('./utils-67ea6e35.js');
 require('./index-4f18c0e2.js');
 require('./breakpoints-8a1e87e0.js');
-require('./index-d1759a5a.js');
-require('./index-f0b0a7d1.js');
+require('./index-08baa40e.js');
+require('./index-ced16381.js');
 
 
 

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const ZVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '3d75845d1ec7fa620b82b32f68fe73368d800e61' });
+        return index.h("slot", { key: '6a4e63acea4deaf3d820c0b35b12dbb80e7d02a0' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/collection/collection-manifest.json

@@ -19,6 +19,7 @@
     "components/list/z-list-element/index.js",
     "components/list/z-list-group/index.js",
     "components/list/z-tree-list/index.js",
+    "components/result-card/z-result-card/index.js",
     "components/table/cells/z-td/index.js",
     "components/table/cells/z-th/index.js",
     "components/table/z-tbody/index.js",

package/dist/collection/components/css-components/z-cover/index.stories.js

@@ -0,0 +1,40 @@
+import { html } from "lit-html";
+import "./index.stories.css";
+import "./styles.css";
+export default {
+    title: "ZCover",
+    parameters: {
+        layout: "centered",
+    },
+};
+export const SingleCover = () => html `
+  <div class="z-cover-story">
+    <div class="z-cover-container">
+      <div class="z-cover-stack">
+        <img
+          src="https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG"
+          alt="Book Cover"
+          class="z-cover-img"
+        />
+      </div>
+    </div>
+  </div>
+`;
+export const MultipleCover = () => html `
+  <div class="z-cover-story">
+    <div class="z-cover-container has-multiple">
+      <div class="z-cover-stack">
+        <div>
+          <div class="z-cover-shadow z-shadow-2"></div>
+          <div class="z-cover-shadow z-shadow-1"></div>
+        </div>
+        <img
+          src="https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG"
+          alt="Book Cover"
+          class="z-cover-img"
+        />
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/css-components/z-cover/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/css-components/z-cover/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AAEtB,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAA4B,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;CAY7D,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAA4B,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;CAgB/D,CAAC","sourcesContent":["import {html} from \"lit-html\";\nimport \"./index.stories.css\";\nimport \"./styles.css\";\n\nexport default {\n  title: \"ZCover\",\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport const SingleCover = (): ReturnType<typeof html> => html`\n  <div class=\"z-cover-story\">\n    <div class=\"z-cover-container\">\n      <div class=\"z-cover-stack\">\n        <img\n          src=\"https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG\"\n          alt=\"Book Cover\"\n          class=\"z-cover-img\"\n        />\n      </div>\n    </div>\n  </div>\n`;\n\nexport const MultipleCover = (): ReturnType<typeof html> => html`\n  <div class=\"z-cover-story\">\n    <div class=\"z-cover-container has-multiple\">\n      <div class=\"z-cover-stack\">\n        <div>\n          <div class=\"z-cover-shadow z-shadow-2\"></div>\n          <div class=\"z-cover-shadow z-shadow-1\"></div>\n        </div>\n        <img\n          src=\"https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG\"\n          alt=\"Book Cover\"\n          class=\"z-cover-img\"\n        />\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/css-components/z-cover/styles.css

@@ -0,0 +1,72 @@
+.z-cover-container {
+  position: relative;
+  display: flex;
+  width: 115px;
+  height: 175px;
+  align-items: center;
+  padding: var(--space-unit);
+}
+
+.z-cover-stack {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Base sizes for single cover */
+.z-cover-shadow,
+.z-cover-img {
+  width: 115px;
+  min-width: 115px;
+  max-width: 115px;
+  height: 160px;
+  min-height: 160px;
+  max-height: 160px;
+}
+
+/* Scaled sizes for multiple covers */
+.z-cover-container.has-multiple .z-cover-shadow,
+.z-cover-container.has-multiple .z-cover-img {
+  width: 95px;
+  min-width: 95px;
+  max-width: 95px;
+  height: 140px;
+  min-height: 140px;
+  max-height: 140px;
+}
+
+.z-cover-shadow {
+  position: absolute;
+  z-index: 1;
+  background: #e0e0e0;
+  border-radius: var(--border-size-large);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.z-shadow-1 {
+  z-index: 1;
+  top: var(--space-unit);
+  right: var(--space-unit);
+  border: 1px solid var(--gray200);
+}
+
+.z-shadow-2 {
+  z-index: 0;
+  top: calc(var(--space-unit) * 2);
+  right: calc(var(--space-unit) * 2);
+  border: 1px solid var(--gray200);
+}
+
+.z-cover-img {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+  object-fit: cover;
+}
+
+.z-cover-container.has-multiple .z-cover-img {
+  right: 0;
+}

package/dist/collection/components/result-card/z-result-card/index.js

@@ -0,0 +1,170 @@
+import { h, Host } from "@stencil/core";
+export class ZResultCard {
+    constructor() {
+        this.author = undefined;
+        this.operaTitle = undefined;
+        this.operaSubtitle = undefined;
+        this.operaTags = undefined;
+        this.volumesLabel = undefined;
+        this.cover = undefined;
+        this.hasMultipleCovers = false;
+        this.isInfoPage = false;
+    }
+    render() {
+        return (h(Host, { key: 'cefd6fafc8252fe9466d4249a53484e4496fe71c' }, h("div", { key: '6fea1ba19fc67cca828d9c6deb3c2e48542289aa', class: `z-cover-container ${this.hasMultipleCovers ? "has-multiple" : ""}` }, h("div", { key: '262720f94efa1caa4bd717bc0fbb95da2160e8ef', class: "z-cover-stack" }, this.hasMultipleCovers && (h("div", { key: '737453fc97779b85cdf5bbb33ac79e4c863ca57e' }, h("div", { key: '5060b407e47c055d692a2d01cd931cea10863104', class: "z-cover-shadow z-shadow-2" }), h("div", { key: '9e09b32d0492d44f6c9c3485960bb47dcea5eaab', class: "z-cover-shadow z-shadow-1" }))), h("img", { key: '6e19f9b46705f65b41bbed85233fe0668d6b0852', src: this.cover, alt: "Book Cover", class: "z-cover-img" }))), h("div", { key: '899025761397d5827a358069e08c1462ab32f010', class: "info-container" }, h("div", { key: '52e4c5af5bd5e51b3db0f6caa4571b92138ff8e4', class: "author-label" }, this.author), h("div", { key: 'd192d977146ae8f7c166d4acdcfeae2904e5c0f0', class: "opera-title" }, this.operaTitle), h("div", { key: 'c3720eca864689fd9cf12cca42cf7acc85045dfa', class: "opera-subtitle" }, this.operaSubtitle), h("div", { key: '2996f165cdde8d04b381a1bd094761e40ce76da7', class: "tags-container" }, h("slot", { key: 'd501db9a9d2d08c5dd42bb0404fc17e79a756498', name: "tags" })), h("span", { key: '92c40372919ce95a30cd28ce3650153376937c40', class: "volumes-label" }, this.volumesLabel))));
+    }
+    static get is() { return "z-result-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css", "../../css-components/z-cover/styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css", "../../css-components/z-cover/styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "author": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The author of the opera."
+                },
+                "attribute": "author",
+                "reflect": false
+            },
+            "operaTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the opera."
+                },
+                "attribute": "opera-title",
+                "reflect": false
+            },
+            "operaSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the opera."
+                },
+                "attribute": "opera-subtitle",
+                "reflect": false
+            },
+            "operaTags": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tags associated with the opera.\nThis is a string array that can be used to display tags in the component."
+                }
+            },
+            "volumesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the volumes.\nThis is used to display the number of volumes or a related message."
+                },
+                "attribute": "volumes-label",
+                "reflect": false
+            },
+            "cover": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL of the cover image.\nThis is used to display the cover image of the opera."
+                },
+                "attribute": "cover",
+                "reflect": false
+            },
+            "hasMultipleCovers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the card has multiple covers.\nThis is used to apply specific styles when there are multiple covers."
+                },
+                "attribute": "has-multiple-covers",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isInfoPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the card is an info page.\nThis can be used to apply specific styles or behaviors for info pages."
+                },
+                "attribute": "is-info-page",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/result-card/z-result-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/result-card/z-result-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,WAAW;;;;;;;;iCA+CF,KAAK;0BAOZ,KAAK;;IAElB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC7E,4DAAK,KAAK,EAAC,eAAe;oBACvB,IAAI,CAAC,iBAAiB,IAAI,CACzB;wBACE,4DAAK,KAAK,EAAC,2BAA2B,GAAO;wBAC7C,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CACzC,CACP;oBACD,4DACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,GAAG,EAAC,YAAY,EAChB,KAAK,EAAC,aAAa,GACnB,CACE,CACF;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,MAAM,CAAO;gBAC7C,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAO;gBAChD,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,aAAa,CAAO;gBACtD,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;gBACN,6DAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAQ,CAClD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-cover/styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /**\n   * The author of the opera.\n   */\n  @Prop()\n  author: string;\n\n  /**\n   * The title of the opera.\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * The subtitle of the opera.\n   */\n  @Prop()\n  operaSubtitle: string;\n\n  /**\n   * Tags associated with the opera.\n   * This is a string array that can be used to display tags in the component.\n   */\n  @Prop()\n  operaTags: string[];\n\n  /**\n   * The label for the volumes.\n   * This is used to display the number of volumes or a related message.\n   */\n  @Prop()\n  volumesLabel: string;\n\n  /**\n   * The URL of the cover image.\n   * This is used to display the cover image of the opera.\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Indicates whether the card has multiple covers.\n   * This is used to apply specific styles when there are multiple covers.\n   */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /**\n   * Indicates whether the card is an info page.\n   * This can be used to apply specific styles or behaviors for info pages.\n   */\n  @Prop()\n  isInfoPage = false;\n\n  render(): HTMLZResultCardElement {\n    return (\n      <Host>\n        <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n          <div class=\"z-cover-stack\">\n            {this.hasMultipleCovers && (\n              <div>\n                <div class=\"z-cover-shadow z-shadow-2\"></div>\n                <div class=\"z-cover-shadow z-shadow-1\"></div>\n              </div>\n            )}\n            <img\n              src={this.cover}\n              alt=\"Book Cover\"\n              class=\"z-cover-img\"\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          <div class=\"author-label\">{this.author}</div>\n          <div class=\"opera-title\">{this.operaTitle}</div>\n          <div class=\"opera-subtitle\">{this.operaSubtitle}</div>\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <span class=\"volumes-label\">{this.volumesLabel}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/result-card/z-result-card/styles.css

@@ -0,0 +1,63 @@
+:host {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 500px;
+  height: 175px;
+  border: 2px solid var(--color-surface02);
+  border-radius: var(--border-size-large);
+  font-family: var(--font-family-sans);
+}
+
+.info-container {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  padding: var(--space-unit);
+}
+
+.author-label {
+  overflow: hidden;
+  color: var(--color-default-text);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.opera-title {
+  display: -webkit-box;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--space-unit);
+  margin-bottom: 4px;
+  -webkit-box-orient: vertical;
+  font-size: var(--font-size-3);
+  font-weight: var(--font-bd);
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.tags-container {
+  display: flex;
+  margin-top: var(--space-unit);
+  gap: var(--space-unit);
+}
+
+.volumes-label {
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  margin-top: auto;
+}
+
+@media (max-width: var(--breakpoint-sm)) {
+  .opera-title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/dist/collection/components/table/cells/z-td/index.js

@@ -29,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'c9c2a31f99dc72acd54744c8c1abdbb56b0a7df3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'f503630802052c5c3566b725aba40ea0923d60da', class: "cell--content" }, h("slot", { key: 'e26dc22a7b21eef5475d10124312384593957bf8' }), this.showMenu && (h("div", { key: '4c7204766c53e4502ff24e51e9ea751620246278', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d0f59414241c2b195dd45cf74f678b15e957cac', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '68d2f577c442c9a72009dd6365cd4182e9333d5a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c90cf570174b2e2af659ae02e217d725a1951cb4', name: "contextual-menu" })))))));
+        return (h(Host, { key: '4ee9bb3ea8b9eb0602f65e9ba9f035a48f58243d', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '1b9616ffd9524c6d28785497503bbd6e6e102c66', class: "cell--content" }, h("slot", { key: '999799502a8f882c1bb5a19c85a92ccd09e28dbe' }), this.showMenu && (h("div", { key: 'feb03da67dd3c450cbfaf8ac757cb8dcc4e47ede', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'aba256be3b9f0272e971677d5a3051c54a5a99b9', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '1ea685fcb5f6bcf4a27643014dbb480261014921', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '5da696db862452a09f44155df324755239cc2e37', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-th/index.js

@@ -50,7 +50,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '80d84d10038bfd5171b1596db3175c4e915e3c81', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'b98f5cbe6c9fa873e39f46ba701c76755a4f9da7', class: "cell--content" }, h("slot", { key: 'f7d2b12496eb334bf07fcfc80e42cacf95a2b6c7' }), this.showSorting && (h("button", { key: '000518536845b9b1383d2aa90a655000a2d0cc0b', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '61cedbe8a54e51cac9d94f00e4d9d84dbcc1b48d', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '3c2ac483288672ac1c65dc3586fb9b346abe53e9', class: "cell--menu-container" }, h("z-button", { key: '6a495a201dc8343267ef8892bc97150c2d4ec4fc', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'b97a3477c4f63bccb2445304676ad2127a26d9df', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'd51ba2caa4e7929e3aedf3beec9b95f4c9b1cf24', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'e2a878f27e2fe77990e6e4fed6c1874cb0a1d7ed', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'a049567c809321976a0c9824f5b708fa39d619d5', class: "cell--content" }, h("slot", { key: '4f3ff7920a049a02b801b76d904a57ac4c597e12' }), this.showSorting && (h("button", { key: '8c4453bfe78da325b5ce479d56c2ff1206219113', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '22359ab8c223f7d0004e86bbdaea4f19bbb65144', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '8eec396d7822578f9a2fa0e42b9dddb21c321bad', class: "cell--menu-container" }, h("z-button", { key: 'b0e85d3bb21a9b78550382360e04e1380f52f597', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'a68eca38752946e4f0b3bd20cc292c5aca52c71e', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '40ea791093df956d99f45022a0f556c388b2ef91', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }