@zanichelli/albe-web-components 19.3.0-rc1 → 19.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-menu.entry.js","sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n:host {\n  /**\n   * @prop --z-menu-label-color: Color of the label's text.\n   */\n  --z-menu-label-color: ;\n\n  position: relative;\n  display: inline-flex;\n  height: fit-content;\n  flex-direction: column;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-primary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: calc(var(--border-size-small) * -1);\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  min-width: fit-content;\n  padding-bottom: 2px;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color, var(--color-default-text));\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: inherit;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text]:not([slot]))::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text]:not([slot]))::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]:not([slot])) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: 0 calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:last-child) {\n  border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active),\n.items > ::slotted([slot=\"item\"][active]),\n.items > ::slotted([slot=\"item\"][data-active]) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu implements ComponentInterface {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-DPdXlnVe.js';
-import { o as AlertType } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h } from './index-BcDWN4F1.js';
+import { o as AlertType } from './index-B3nR3-Jw.js';
 
 const stylesCss = () => `:host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-background);border-top:none}:host div.add-alert{background:var(--color-inverse-success)}:host div.remove-alert{background:var(--color-inverse-warning)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}`;
 
@@ -47,7 +47,7 @@ const ZMyzCardAlert = class {
         }
     }
     render() {
-        return (h("div", { key: '4ca682b49ae42f644338b19e8e49e2f292c47d23', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: 'afcae73ad5db966ad66569171879d7f9c66bddbd', type: this.getAlertType() }, h("div", { key: '8f4afab9559bb5f792796c8ea1907148811890a9', class: "relative-container" }, h("z-icon", { key: '8070aad90c809d35822898c444fd5f81c1ac9146', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'eb0ea9fe673d279a5eead6568331a31eb91302e2', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'daae97d1758c457bb1f8c2143ac2c6efe999a7f9', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: '201658341ee794792a8b91f6666144ac3163eec1', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '8ac5d12c70817efc8ce85cd298737f7fdcb78acc', type: this.getAlertType() }, h("div", { key: '9db78e7bb91568660a416638e5fb12271421d076', class: "relative-container" }, h("z-icon", { key: '990bf9d3c3f17b232a9d5b113f48682581c29c44', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '33184bd74331a45dcef59b8703b1e679e153c51b', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'e906ff2a3220d4d9f6a4534a31c94afa244786ff', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);
@@ -57,3 +57,6 @@ const ZMyzCardAlert = class {
 ZMyzCardAlert.style = stylesCss();
 
 export { ZMyzCardAlert as z_myz_card_alert };
+//# sourceMappingURL=z-myz-card-alert.entry.js.map
+
+//# sourceMappingURL=z-myz-card-alert.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-alert.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n  height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n  position: relative;\n  display: grid;\n  align-items: center;\n  padding: 0;\n  grid-column-gap: var(--space-unit);\n  grid-template-columns: 18px auto 46px;\n  grid-template-rows: 1fr;\n  outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n  border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n  border: var(--border-size-medium) solid var(--color-background);\n  border-top: none;\n}\n\n:host div.add-alert {\n  background: var(--color-inverse-success);\n}\n\n:host div.remove-alert {\n  background: var(--color-inverse-warning);\n}\n\n:host div > .content-text {\n  color: var(--color-surface05);\n  font-size: 14px;\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n:host div > .content-action {\n  height: 20px;\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 20px;\n}\n\n:host div > z-icon {\n  justify-self: center;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardAlert implements ComponentInterface {\n  /** icon name */\n  @Prop()\n  iconname: string;\n\n  /** content text */\n  @Prop()\n  contenttext: string;\n\n  /** action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** alert variant type */\n  @Prop()\n  type: string;\n\n  /** undo action click/keyboard event, returns actionType */\n  @Event()\n  undoAction: EventEmitter;\n\n  private emitUndoAction(): void {\n    this.undoAction.emit({actionType: this.type});\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      this.emitUndoAction();\n    }\n  }\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.emitUndoAction();\n  }\n\n  private retrieveClass(): string {\n    let className = \"\";\n    switch (this.type) {\n      case \"add\":\n        className = \"add-alert\";\n        break;\n      case \"remove\":\n        className = \"remove-alert\";\n        break;\n      default:\n        className = \"\";\n        break;\n    }\n\n    return className;\n  }\n\n  private getAlertType(): AlertType {\n    switch (this.type) {\n      case \"add\":\n        return AlertType.SUCCESS;\n      case \"remove\":\n        return AlertType.WARNING;\n      default:\n        return null;\n    }\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n        <z-alert type={this.getAlertType()}>\n          <div class=\"relative-container\">\n            <z-icon\n              name={this.iconname}\n              width={18}\n              height={18}\n              class={this.retrieveClass()}\n            ></z-icon>\n            <span class=\"content-text\">{this.contenttext}</span>\n            {this.actiontext && !!this.actiontext.trim().length && (\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"content-action\"\n                onClick={(e: MouseEvent) => {\n                  this.handleActionButtonClick(e);\n                }}\n                onKeyPress={(e: KeyboardEvent) => {\n                  this.handleSpaceKeyPress(e);\n                }}\n              >\n                {this.actiontext}\n              </span>\n            )}\n          </div>\n        </z-alert>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,s7BAAs7B,CAAC;;MCQn8B,aAAa,GAAA,MAAA;;;;;IAqBhB,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;AAGvC,IAAA,mBAAmB,CAAC,CAAgB,EAAA;AAC1C,QAAA,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE;YAClB,IAAI,CAAC,cAAc,EAAE;;;AAIjB,IAAA,uBAAuB,CAAC,CAAa,EAAA;QAC3C,CAAC,CAAC,cAAc,EAAE;QAClB,IAAI,CAAC,cAAc,EAAE;;IAGf,aAAa,GAAA;QACnB,IAAI,SAAS,GAAG,EAAE;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW;gBACvB;AACF,YAAA,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc;gBAC1B;AACF,YAAA;gBACE,SAAS,GAAG,EAAE;gBACd;;AAGJ,QAAA,OAAO,SAAS;;IAGV,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO;AAC1B,YAAA,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO;AAC1B,YAAA;AACE,gBAAA,OAAO,IAAI;;;IAIjB,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,EAAA,EAC1D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,CACnB,EACV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC;AACjC,aAAC,EACD,UAAU,EAAE,CAAC,CAAgB,KAAI;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;aAC5B,EAAA,EAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN;;;;;;;"}

package/dist/esm/z-myz-card-dictionary.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-DPdXlnVe.js';
-import { d as ButtonSize, B as ButtonVariant } from './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h } from './index-BcDWN4F1.js';
+import { d as ButtonSize, B as ButtonVariant } from './index-B3nR3-Jw.js';
 
 const stylesCss = () => `:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,     -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,     -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}`;
 
@@ -24,9 +24,12 @@ const ZMyzCardDictionary = class {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: 'fe6d9d8cc73aa0135e2874d0bee4b996cf83dc64' }, h("z-myz-card", { key: 'eee9c5a48f74a1bb5fb36ed0952a84260c37b79e' }, h("z-myz-card-header", { key: '0665c976a9a81efcc14f531585aeb01e29526896', titolo: this.name }), h("div", { key: 'c7ab52b273bdda1f32e016f0117844507159699e', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: 'c7b2b5cc7253ba6c73033afc1dfa375ed281fae2', class: "front" }, h("z-myz-card-body", { key: '954bc5ad14a460c65ab58a85b1e6f6d9568a76ab' }, h("z-myz-card-cover", { key: 'ce0762910761111896f04d2a8071910b556d9471', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '385a8b63d361e250c2c3331e9e5222a2cd708ffe', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '115dfdbc6c12edbab647c0f8e1e16b197a0066fd', class: "back" }, h("slot", { key: '947dbf7463e16a9e1664df2390ec714a77d3b46a', name: "info" }))), h("slot", { key: 'bd851dc63c9a852237063f48b0c558363f1dd3f6' }))));
+        return (h("div", { key: 'd1e208c3b3a1fac92e72689db7b9fd700e2452b1' }, h("z-myz-card", { key: '96203a335382ae05d8f8b4567936486bd05477d7' }, h("z-myz-card-header", { key: '22b83315e7c72fc2794718ee07734d9be9ff981f', titolo: this.name }), h("div", { key: '40f1a3a032d2f23b4151f6c5e3ac9598c6b2a694', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '44adbb97b0b41855c9158a1496b0dbfb05a79c6e', class: "front" }, h("z-myz-card-body", { key: 'f5c9b1f0994d0a14803039cf2a6b74ba4c303ffd' }, h("z-myz-card-cover", { key: '934b89d09a3b8be386335656006fa88430f63b3a', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '1af759bc9a58dd131132d81f9f6e56603ac99be1', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '1c85cf336ea01bc48e3e68ae405910c61eddf83d', class: "back" }, h("slot", { key: '4f89674544c94f61bcdef1ef10fdc4f845ed9e1e', name: "info" }))), h("slot", { key: '5ecf28e236204b2e8e0789e2f866923c7c6b3cb5' }))));
     }
 };
 ZMyzCardDictionary.style = stylesCss();
 
 export { ZMyzCardDictionary as z_myz_card_dictionary };
+//# sourceMappingURL=z-myz-card-dictionary.entry.js.map
+
+//# sourceMappingURL=z-myz-card-dictionary.entry.js.map

package/dist/esm/z-myz-card-dictionary.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-dictionary.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-dictionary/styles.css?tag=z-myz-card-dictionary&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-dictionary/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host z-myz-card {\n  --card-overflow: visible;\n}\n\n:host > div {\n  position: relative;\n  width: 100%;\n  height: 522px;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition:\n    transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 522px;\n  transform-style: preserve-3d;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition:\n    transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content.flipped {\n  margin-top: -2px;\n  transform: rotateY(180deg);\n}\n\n:host > div .front,\n:host > div .back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n}\n\n:host > div .front {\n  z-index: 2;\n  top: 0;\n  left: 0;\n  transform: rotateY(0deg);\n}\n\n:host > div .front z-button {\n  position: absolute;\n  z-index: 3;\n  top: calc(var(--space-unit) * 0.5);\n  left: calc(-1 * var(--space-unit));\n}\n\n:host > div .back {\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  padding: 0 var(--space-unit);\n  margin-left: calc(-1 * var(--space-unit));\n  transform: rotateY(180deg);\n}\n\n.hide-info {\n  display: none;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Listen, Prop, h} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant} from \"../../../../beans\";\n\n/**\n * @slot  - generic card slot\n * @slot info - flipped card info\n */\n@Component({\n  tag: \"z-myz-card-dictionary\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardDictionary implements ComponentInterface {\n  /** card title */\n  @Prop()\n  name: string;\n\n  /** card cover */\n  @Prop()\n  cover: string;\n\n  /** card is disabled */\n  @Prop()\n  disabled = false;\n\n  /** card is flipped */\n  @Prop({mutable: true})\n  flipped = false;\n\n  /** flip button label */\n  @Prop()\n  flipbuttonlabel = \"INFO\";\n\n  /** hide info button */\n  @Prop()\n  hideinfobtn = false;\n\n  @Listen(\"flipCard\")\n  handleFlipCard(e: CustomEvent): void {\n    this.flipCard(e.detail);\n  }\n\n  /** when card is flipped */\n  @Event()\n  cardFlipped: EventEmitter;\n\n  private flipCard(showBack = true): void {\n    this.flipped = showBack;\n    this.cardFlipped.emit(showBack);\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-myz-card>\n          <z-myz-card-header titolo={this.name}></z-myz-card-header>\n          <div class={`content ${this.flipped ? \"flipped\" : \"\"}`}>\n            <div class=\"front\">\n              <z-myz-card-body>\n                <z-myz-card-cover\n                  slot=\"cover\"\n                  titolo={this.name}\n                  img={this.cover}\n                  faded={this.disabled}\n                />\n              </z-myz-card-body>\n              <z-button\n                class={{\"hide-info\": this.hideinfobtn}}\n                variant={ButtonVariant.SECONDARY}\n                icon=\"informationsource\"\n                size={ButtonSize.X_SMALL}\n                onClick={() => this.flipCard(true)}\n                disabled={this.flipped}\n              >\n                {this.flipbuttonlabel}\n              </z-button>\n            </div>\n            <div class=\"back\">\n              <slot name=\"info\" />\n            </div>\n          </div>\n          <slot />\n        </z-myz-card>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,omCAAomC,CAAC;;MCYjnC,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAgBE,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;;AAIhB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK;;AAIf,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM;;AAIxB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK;AAmDpB;AAhDC,IAAA,cAAc,CAAC,CAAc,EAAA;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;;IAOjB,QAAQ,CAAC,QAAQ,GAAG,IAAI,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,EAAA,CAAsB,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,CAAA,CAAE,EAAA,EACpD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAA,CACpB,CACc,EAClB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC,EACtC,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAE,UAAU,CAAC,OAAO,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,IAErB,IAAI,CAAC,eAAe,CACZ,CACP,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,CACF,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACG,CACT;;;;;;;"}

package/dist/esm/z-myz-card-footer-sections.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DPdXlnVe.js';
+import { r as registerInstance, h } from './index-BcDWN4F1.js';
 
 const stylesCss = () => `:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;box-sizing:border-box;padding:var(--space-unit) calc(var(--space-unit) * 2) 0;border-top:var(--border-size-medium) solid var(--color-surface03);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}`;
 
@@ -7,9 +7,12 @@ const ZMyzCardFooterSections = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'e03532734334f374789a31da73f15e32ee8c1679' }, h("footer", { key: '36bbfc8363d00503545aa9a1dd4de0e8b036c0e2' }, h("div", { key: '159b35a78ec38d541d6016fa4724effa00a66dd6', class: "top" }, h("slot", { key: '25c311436a817abf5d0d961a6e2f699fcea6f331', name: "top" })), h("div", { key: '248485fc69ef0c7c76ca086a86a5971ae3e3876f', class: "bottom" }, h("slot", { key: 'fe1b0f89936780d822328e13ce94564838f3c0d7', name: "bottom" })))));
+        return (h("div", { key: '585f033c01cd38632f117bf350a2842f776a6b20' }, h("footer", { key: 'b6a0f5c7ce0a6d0826125f6526a3993bab390cd4' }, h("div", { key: 'a0d6e3cb8fd9979b894852ace83965290a3a3646', class: "top" }, h("slot", { key: '19c023f2c3a6ef00c99f878c8c5e6034db081afa', name: "top" })), h("div", { key: 'b8637c38444957c5d8846d88a49447a34139d381', class: "bottom" }, h("slot", { key: '540b0fb8593fab0f364daf0fe0164eba8099cbe1', name: "bottom" })))));
     }
 };
 ZMyzCardFooterSections.style = stylesCss();
 
 export { ZMyzCardFooterSections as z_myz_card_footer_sections };
+//# sourceMappingURL=z-myz-card-footer-sections.entry.js.map
+
+//# sourceMappingURL=z-myz-card-footer-sections.entry.js.map

package/dist/esm/z-myz-card-footer-sections.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-footer-sections.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-footer-sections/styles.css?tag=z-myz-card-footer-sections&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer-sections/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div > footer {\n  height: 128px;\n  box-sizing: border-box;\n  padding: var(--space-unit) calc(var(--space-unit) * 2) 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-size: 16px;\n  line-height: 24px;\n}\n\n:host > div > footer > div.top,\n:host > div > footer > div.bottom {\n  height: 60px;\n}\n","import {Component, ComponentInterface, h} from \"@stencil/core\";\n\n/**\n * @slot top - footer top content\n * @slot bottom - footer bottom content\n */\n@Component({\n  tag: \"z-myz-card-footer-sections\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooterSections implements ComponentInterface {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <footer>\n          <div class=\"top\">\n            <slot name=\"top\" />\n          </div>\n          <div class=\"bottom\">\n            <slot name=\"bottom\" />\n          </div>\n        </footer>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,6aAA6a,CAAC;;MCW1b,sBAAsB,GAAA,MAAA;;;;IACjC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CACf,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACC,CACL;;;;;;;"}

package/dist/esm/z-myz-card-footer.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, d as getElement } from './index-DPdXlnVe.js';
-import { L as LicenseType } from './index-BKCj6NR2.js';
+import { r as registerInstance, h, d as getElement } from './index-BcDWN4F1.js';
+import { L as LicenseType } from './index-B3nR3-Jw.js';
 
 const stylesCss = () => `footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);transition:height 500ms ease-in-out,     top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--blue100)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--blue100)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:flex;flex-direction:row;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;transition:height 500ms ease-in-out,     top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out,     top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot="content"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot="content"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--blue100)}`;
 
@@ -56,10 +56,13 @@ const ZMyzCardFooter = class {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '0836e7e0d6c360721019bc7674466345e3eaab74', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '0771eca0b6c8267a612f95800fc807096efd19eb', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'e9ca8f43d386ae14914d192a428698ecd9ee1082', class: "toggle" }, h("slot", { key: '4ffe0ee9635d343821a20d572217fd7f971a781f', name: "toggle" })), this.titolo && h("p", { key: '352cff28af1654d0676dcf0c184f42a5158bbbbe', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: 'a76925042afd579c30fc82faf96146718dd497c9', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: 'a3f2391f91e996b06d00a725a1b010f0df352551' }, h("p", { key: '4dfcf2de83492dd502eb69cc2525769c04430744', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: 'b0f06c214c88f38e477a0aacc824441160bf38fb', title: this.getTitleAuthors() }, h("span", { key: '6343877f00355d614d4a263d3615b5d6222ba795', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'b1f88556f9e2493e9070e71c72cc760f2f52738d', class: "year-isbn" }, h("span", { key: 'a934207b2ae734db3deca9d5a2544d86cb011117', class: "isbn" }, h("span", { key: '4a2d0fa9a603e63aa3443934d58f5df9350fbdf3' }, h("span", { key: '2668d24fe56de6eb660fc56a540347070ade4d92', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '6310cdec45297752f3035d975c3073acce3e2076', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'f949fe923fa112d79c6cf4fa7490dd03e7f9c772', name: "list" })))), this.customContent && h("slot", { key: 'b0479a7f0e890c03dfbdced57aa6162d38981eb9', name: "content" })));
+        return (h("div", { key: '17bf2d03f2a895a184818a3d0ecc8b4b0ff45ad6', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '18ba7b3cf576b52ff8cf457d878c2a98b48c8954', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '87a14b83735cad610accac1b5fad637d58418941', class: "toggle" }, h("slot", { key: '07df34b036660a3d17071f931fd8fd1a66d274bd', name: "toggle" })), this.titolo && h("p", { key: '56fd76cc8f3048d6224466ce4737a73553a88d5b', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '90c5dee7244ebc98141a16756820f7e0452c50d4', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '6ea62882251ba40b585b654649339dd2453fae35' }, h("p", { key: '063b4b395ef2a1050381d5b12dd06cba3885d0aa', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '8b8f219162a186142909eba931870ee9fa00f6bd', title: this.getTitleAuthors() }, h("span", { key: '088707aba02823b9c2d241151854f619a9fbc495', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: '95c331bf4b5e45d26fad783252b718393ac44e4c', class: "year-isbn" }, h("span", { key: '7aa80242fc621eeb2ed4f1737ef0f9b444f1a841', class: "isbn" }, h("span", { key: '0f300748a0b1e5daf25c03b4bf11e8bb87e83428' }, h("span", { key: 'ac25fb014db97edc0bd4dc1ebfe76d04672104a0', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: 'b0875abb1a63f1cc69d15dae73e1f4b320536e25', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'f090c851076f8bb8fdeec5adf8792c78b22cd199', name: "list" })))), this.customContent && h("slot", { key: 'eb1b50ef5229ff3f51596c58b7a037a39a3ae5ec', name: "content" })));
     }
     get host() { return getElement(this); }
 };
 ZMyzCardFooter.style = stylesCss();
 
 export { ZMyzCardFooter as z_myz_card_footer };
+//# sourceMappingURL=z-myz-card-footer.entry.js.map
+
+//# sourceMappingURL=z-myz-card-footer.entry.js.map

package/dist/esm/z-myz-card-footer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-footer.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-footer/styles.css?tag=z-myz-card-footer&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer/index.tsx"],"sourcesContent":["footer {\n  position: relative;\n  z-index: 5;\n  top: 0;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  padding: 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  transition:\n    height 500ms ease-in-out,\n    top 500ms ease-in-out;\n}\n\nfooter.real,\nfooter.trial,\nfooter.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n}\n\nfooter .bold {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-sb);\n}\n\nfooter > p {\n  overflow: hidden;\n  height: 40px;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);\n  margin: 0;\n  background-color: var(--color-surface01);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  line-height: 22px;\n  transition: all 200ms linear;\n}\n\nfooter.isopen > p {\n  background-color: var(--gray200);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  transition: all 200ms linear;\n}\n\nfooter.isopen.real > p,\nfooter.isopen.trial > p,\nfooter.isopen.temp > p {\n  background-color: var(--blue100);\n}\n\nfooter .visible {\n  display: block;\n}\n\nfooter .hidden {\n  display: none;\n}\n\nfooter > div.content {\n  overflow: hidden;\n  height: 60px;\n}\n\nfooter > div.content > div:not(.slot-handler) {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nfooter > div.content > div > p {\n  overflow: hidden;\n  height: 20px;\n  padding: 0;\n  margin: 0;\n  font-size: 14px;\n  line-height: 20px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nfooter > div.content > div > p.year-isbn {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: var(--space-unit);\n}\n\nfooter > div.content > div > p.year-isbn > span.isbn {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nfooter.isopen > div.content > div:not(.slot-handler) {\n  height: 68px;\n}\n\nfooter.isopen > div.content > div > p.authors {\n  height: 40px;\n  text-overflow: initial;\n  white-space: initial;\n}\n\nfooter.isopen > div.content > div > p.year-isbn {\n  height: 50px;\n  flex-direction: column;\n  padding-left: 0;\n}\n\nfooter.isopen > div.content > div > p.year-isbn > span.isbn {\n  display: inline-grid;\n  padding-left: 0;\n}\n\nfooter.isopen {\n  top: -212px;\n  height: 295px;\n  transition:\n    height 500ms ease-in-out,\n    top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content {\n  top: -292px;\n}\n\nfooter.isopen > div.content {\n  height: 280px;\n  transition:\n    height 500ms ease-in-out,\n    top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content > div.content {\n  height: 230px;\n}\n\n.toggle {\n  position: absolute;\n  z-index: 10;\n  top: -24px;\n  left: 16px;\n}\n\n.faded {\n  opacity: 0.3;\n  pointer-events: none;\n}\n\nfooter > p.custom-content,\nfooter .content.custom-content {\n  display: none;\n}\n\nfooter.isopen > p.custom-content,\nfooter.isopen .content.custom-content {\n  display: block;\n}\n\ndiv.wrapper {\n  position: relative;\n  height: 100%;\n}\n\ndiv.wrapper ::slotted([slot=\"content\"]) {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  display: block;\n  width: 100%;\n  height: 112px;\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 2);\n  border-top: var(--border-size-medium) solid transparent;\n  background: var(--color-white);\n}\n\ndiv.wrapper.isopen ::slotted([slot=\"content\"]) {\n  top: 0;\n  bottom: 0;\n  height: 128px;\n  padding: calc(var(--space-unit) * 2);\n  border-color: var(--blue100);\n}\n","import {Component, ComponentInterface, Element, Listen, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot toggle - toggle button slot\n * @slot list - card resources list slot\n */\n@Component({\n  tag: \"z-myz-card-footer\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooter implements ComponentInterface {\n  @Element() host: HTMLZMyzCardFooterElement;\n\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** authors name text */\n  @Prop()\n  autori: string;\n\n  /** volume isbn */\n  @Prop()\n  isbn: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** footer opened by default (optional) */\n  @Prop()\n  opened?: boolean = false;\n\n  /** display footer custom slotted content */\n  @Prop()\n  customContent = false;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  allowTooltipAuthors = false;\n\n  private ellipsisAuthors?: HTMLElement;\n\n  @Listen(\"toggleClick\")\n  handleToggle(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      const firstElem = this.getFirstListItem();\n      if (firstElem) {\n        requestAnimationFrame(() => {\n          firstElem.focus();\n        });\n      }\n    }\n  }\n\n  private getTitleAuthors(): string {\n    return this.allowTooltipAuthors ? this.autori : \"\";\n  }\n\n  componentWillLoad(): void {\n    if (this.opened) {\n      this.isOpen = true;\n    }\n  }\n\n  private elementsEllipsis(): void {\n    this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;\n  }\n\n  private elementAuthorsHasEllipsis(): boolean {\n    return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      \"isopen\": this.isOpen,\n      \"real\": this.cardtype === LicenseType.REAL,\n      \"trial\": this.cardtype === LicenseType.TRIAL,\n      \"temp\": this.cardtype === LicenseType.TEMP,\n      \"custom-content\": this.customContent,\n    };\n  }\n\n  private footerTransitionHandler(e: TransitionEvent): void {\n    if ([\"visibility\", \"height\"].includes(e.propertyName)) {\n      this.elementsEllipsis();\n    }\n  }\n\n  private getFirstListItem(): HTMLElement {\n    return this.host.querySelector(\"[slot=list] > li a\");\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={{...(this.retrieveClass() as Record<string, boolean>), wrapper: true}}>\n        <footer\n          class={this.retrieveClass()}\n          onTransitionEnd={(e: TransitionEvent) => this.footerTransitionHandler(e)}\n        >\n          <span class=\"toggle\">\n            <slot name=\"toggle\" />\n          </span>\n          {this.titolo && <p class={{\"custom-content\": this.customContent}}>{this.titolo}</p>}\n          <div class={{\"content\": true, \"custom-content\": this.customContent}}>\n            <div>\n              <p\n                class=\"authors\"\n                ref={(el) => (this.ellipsisAuthors = el as HTMLElement)}\n              >\n                <span title={this.getTitleAuthors()}>\n                  <span\n                    aria-description=\"Autori\"\n                    class=\"bold\"\n                  >\n                    {this.autori}\n                  </span>\n                </span>\n              </p>\n              <p class=\"year-isbn\">\n                <span class=\"isbn\">\n                  <span>\n                    <span\n                      aria-description=\"ISBN edizione cartacea\"\n                      class=\"bold\"\n                    >\n                      {this.isbn}\n                    </span>{\" \"}\n                    (ed. cartacea)\n                  </span>\n                </span>\n              </p>\n            </div>\n            <div class={`slot-handler ${this.isOpen ? \"visible\" : \"hidden\"}`}>\n              <slot name=\"list\" />\n            </div>\n          </div>\n        </footer>\n        {this.customContent && <slot name=\"content\" />}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/z-myz-card-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DPdXlnVe.js';
+import { r as registerInstance, h } from './index-BcDWN4F1.js';
 
 const stylesCss = () => `button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}`;
 
@@ -11,9 +11,12 @@ const ZMyzCardIcon = class {
         this.ariaLabel = "";
     }
     render() {
-        return (h("button", { key: '07cb991da26a22d55fb6cca776a5ef0208d53311', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '6f71110aba5937ec76b6916cb4fdec52856af097' }, h("z-icon", { key: 'b01cbee366497b8b3d27f997e884f8be5a14e6fb', name: this.icon, width: 16, height: 16 }))));
+        return (h("button", { key: '90cd1649d0de451b49194cf852f489bcd813c3a0', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '64470955e68c1f5d0724cceed5206b461c67a6f3' }, h("z-icon", { key: 'd631ba937bbc59adf93ebb56cf75e0c02f0b156a', name: this.icon, width: 16, height: 16 }))));
     }
 };
 ZMyzCardIcon.style = stylesCss();
 
 export { ZMyzCardIcon as z_myz_card_icon };
+//# sourceMappingURL=z-myz-card-icon.entry.js.map
+
+//# sourceMappingURL=z-myz-card-icon.entry.js.map

package/dist/esm/z-myz-card-icon.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-icon.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-icon/styles.css?tag=z-myz-card-icon&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-icon/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  width: 42px;\n  width: calc(var(--space-unit) * 6);\n  height: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 6);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-left: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background: none;\n  border-radius: 0 var(--border-radius) 0 0;\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  outline: none;\n}\n\nbutton:active,\nbutton:focus {\n  color: var(--blue700);\n  fill: var(--blue700);\n}\n\nbutton > span {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--border-radius);\n}\n\nbutton:hover > span {\n  background: var(--color-primary03);\n}\n\nbutton:focus > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n}\n\nbutton:disabled > span {\n  background: none;\n  box-shadow: var(--shadow-0);\n  pointer-events: none;\n}\n\nbutton:disabled > span > z-icon {\n  fill: var(--color-surface03);\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardIcon implements ComponentInterface {\n  /** icon name */\n  @Prop()\n  icon: string;\n\n  /** disabled status flag */\n  @Prop()\n  isdisabled = false;\n\n  /** description of the icon*/\n  @Prop()\n  ariaLabel = \"\";\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        disabled={this.isdisabled}\n        aria-label={this.ariaLabel}\n      >\n        <span>\n          <z-icon\n            name={this.icon}\n            width={16}\n            height={16}\n          />\n        </span>\n      </button>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,imCAAimC,CAAC;;MCO9mC,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAYE,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;;AAIlB,QAAA,IAAA,CAAA,SAAS,GAAG,EAAE;AAkBf;IAhBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAA,YAAA,EACb,IAAI,CAAC,SAAS,EAAA,EAE1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACG,CACA;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-DPdXlnVe.js';
-import { P as PopoverPosition } from './index-BKCj6NR2.js';
-import { h as handleKeyboardSubmit } from './utils-DYd3kO0P.js';
+import { r as registerInstance, c as createEvent, h } from './index-BcDWN4F1.js';
+import { P as PopoverPosition } from './index-B3nR3-Jw.js';
+import { h as handleKeyboardSubmit } from './utils-C9lc3rtK.js';
 import './breakpoints-Q-tWjk7P.js';
 
 const stylesCss = () => `:host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:"";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-primary01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-hover-warning);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}`;
@@ -117,9 +117,12 @@ const ZMyzCardInfo = class {
         return (h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, h("span", { class: "license-heading" }, h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", h("b", null, this.cardData.offlineLicense.expiration), h("br", null), "Installazioni disponibili: ", h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (h("div", { key: '2cf85a75758a40cfb8b3c9df21fecc74cbb04f58' }, this.renderCloseIcon(), h("div", { key: 'af5eb9bd6a0cc66c03731683794faf2b60686e40', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '39225945aeaa95be7f2b30eb4a23c04f5a6246f2', class: "cta-wrapper" }, h("slot", { key: 'b1c650e3a43ee7d78530eaa52638cd3c4cf02a7f' }))));
+        return (h("div", { key: '36d2cfc3c5f6a1764b94a5e87cdbda020a485351' }, this.renderCloseIcon(), h("div", { key: '7bd40311e6c3b3975484516df8e2e6f55f28654c', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: 'bb2c078d38bb3aa7cda714c464ad5bc2f520d680', class: "cta-wrapper" }, h("slot", { key: '4321f3f48a2f2f2f5050960b9f9ea707664f1961' }))));
     }
 };
 ZMyzCardInfo.style = stylesCss();
 
 export { ZMyzCardInfo as z_myz_card_info };
+//# sourceMappingURL=z-myz-card-info.entry.js.map
+
+//# sourceMappingURL=z-myz-card-info.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-info.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  position: relative;\n  display: grid;\n  width: calc(100% + calc(var(--space-unit) * 2));\n  height: 402px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--color-primary01);\n  margin-left: calc(-1 * var(--space-unit));\n  background: var(--color-surface01);\n  border-radius: 0;\n  box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n  position: absolute;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-self: end;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n  position: relative;\n  overflow: hidden;\n  align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n  box-sizing: border-box;\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface04);\n  color: var(--color-surface05);\n  font-size: 14px;\n  line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n  border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n  content: \"\";\n  pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n  color: var(--color-primary01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n  color: var(--color-hover-warning);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n  position: absolute;\n  top: 0;\n  left: calc(var(--space-unit) * 4);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot - content\n */\n@Component({\n  tag: \"z-myz-card-info\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardInfo implements ComponentInterface {\n  /** dictionary info */\n  @Prop()\n  data: string | DictionaryData;\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  @State()\n  hiddenContent = false;\n\n  @State()\n  tooltip = false;\n\n  private cardData: DictionaryData;\n\n  private contentWrapper: HTMLElement;\n\n  private infoWrapper: HTMLElement;\n\n  private onlineLicenseWrapper: HTMLElement;\n\n  private offlineLicenseWrapper: HTMLElement;\n\n  /** flip card to front */\n  @Event()\n  flipCard: EventEmitter;\n\n  private emitFlipCard(showBack = false): void {\n    this.flipCard.emit(showBack);\n  }\n\n  constructor() {\n    this.emitFlipCard = this.emitFlipCard.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setStringOrArray();\n  }\n\n  componentWillUpdate(): void {\n    this.setStringOrArray();\n  }\n\n  componentDidRender(): void {\n    this.handleContentHeight();\n  }\n\n  private handleContentHeight(): void {\n    if (!this.contentWrapper && !this.infoWrapper) {\n      this.hiddenContent = false;\n\n      return;\n    }\n\n    if (\n      this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||\n      this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n    ) {\n      const height =\n        this.contentWrapper.offsetHeight -\n        this.onlineLicenseWrapper.offsetHeight -\n        this.offlineLicenseWrapper.offsetHeight;\n      this.infoWrapper.style.height = `${height}px`;\n      this.hiddenContent = true;\n\n      return;\n    }\n\n    this.hiddenContent = false;\n  }\n\n  private setStringOrArray(): void {\n    if (typeof this.data === \"string\") {\n      this.cardData = JSON.parse(this.data);\n    } else {\n      this.cardData = this.data;\n    }\n  }\n\n  private renderCloseIcon(): HTMLZIconElement {\n    return (\n      <z-icon\n        name=\"multiply-circled-filled\"\n        height={18}\n        width={18}\n        onClick={() => this.emitFlipCard(false)}\n        tabindex={this.htmltabindex}\n        onKeyUp={(e: KeyboardEvent) => {\n          handleKeyboardSubmit(e, this.emitFlipCard, false);\n        }}\n      />\n    );\n  }\n\n  private renderGeneralSection(): HTMLElement {\n    const title = this?.cardData?.title;\n    const description = this?.cardData?.description;\n\n    return (\n      <section\n        class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n        onClick={() => {\n          if (this.hiddenContent) {\n            this.tooltip = !this.tooltip;\n          }\n        }}\n        ref={(el) => (this.infoWrapper = el)}\n      >\n        {this.renderAuthor()}\n        {this.renderYear()}\n        {title}\n        <br />\n        {description}\n      </section>\n    );\n  }\n\n  private renderAuthor(): HTMLSpanElement {\n    const author = this?.cardData?.author;\n    if (!author) {\n      return null;\n    }\n\n    return (\n      <span>\n        Autore: <b>{author}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderYear(): HTMLSpanElement {\n    const year = this?.cardData?.year;\n    if (!year) {\n      return null;\n    }\n\n    return (\n      <span>\n        Anno: <b>{year}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderTooltip(): HTMLZPopoverElement {\n    if (!this.tooltip) {\n      return;\n    }\n\n    if (!this.cardData) {\n      return;\n    }\n    const {title, year, author, description} = this.cardData;\n\n    return (\n      <z-popover\n        position={PopoverPosition.RIGHT}\n        onClick={() => (this.tooltip = false)}\n      >\n        {`${title} ${year} ${author} ${description}`}\n      </z-popover>\n    );\n  }\n\n  private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expired) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expired)\n    ) {\n      return <span class=\"expired\">SCADUTA</span>;\n    }\n\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expiring) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expiring)\n    ) {\n      return <span class=\"expiring\">IN SCADENZA</span>;\n    }\n  }\n\n  private renderOnlineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.onlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza online</span>\n          {this.setExpirationLicenseMessage(\"online\")}\n        </span>\n        Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n        <br />\n      </section>\n    );\n  }\n\n  private renderOfflineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.offlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza offline</span>\n          {this.setExpirationLicenseMessage(\"offline\")}\n        </span>\n        Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n        <br />\n        Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n      </section>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        {this.renderCloseIcon()}\n        <div\n          class=\"content-wrapper\"\n          ref={(el) => (this.contentWrapper = el)}\n        >\n          {this.renderGeneralSection()}\n          {this.renderTooltip()}\n          {this.renderOnlineLicenseSection()}\n          {this.renderOfflineLicenseSection()}\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,y0DAAy0D,CAAC;;MCYt1D,YAAY,GAAA,MAAA;IA6Bf,YAAY,CAAC,QAAQ,GAAG,KAAK,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAG9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AA1BA,QAAA,IAAA,CAAA,YAAY,GAAY,CAAC;AAGzB,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK;AAGrB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK;QAqBb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AACjD;IAED,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,mBAAmB,GAAA;QACjB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,kBAAkB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;;IAGpB,mBAAmB,GAAA;QACzB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AAC7C,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAE1B;;QAGF,IACE,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY;YACnE,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,EAC7D;AACA,YAAA,MAAM,MAAM,GACV,IAAI,CAAC,cAAc,CAAC,YAAY;gBAChC,IAAI,CAAC,oBAAoB,CAAC,YAAY;AACtC,gBAAA,IAAI,CAAC,qBAAqB,CAAC,YAAY;YACzC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI;AAC7C,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;YAEzB;;AAGF,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAGpB,gBAAgB,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;aAChC;AACL,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI;;;IAIrB,eAAe,GAAA;AACrB,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,yBAAyB,EAC9B,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,CAAC,CAAgB,KAAI;gBAC5B,oBAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC;aAClD,EAAA,CACD;;IAIE,oBAAoB,GAAA;;AAC1B,QAAA,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK;AACnC,QAAA,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW;QAE/C,QACE,eACE,KAAK,EAAE,CAAA,aAAA,EAAgB,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAC3D,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,oBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;;AAEhC,aAAC,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAA,EAEnC,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,EACjB,KAAK,EACN,CAAA,CAAA,IAAA,EAAA,IAAA,CAAM,EACL,WAAW,CACJ;;IAIN,YAAY,GAAA;;AAClB,QAAA,MAAM,MAAM,GAAG,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM;QACrC,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAO,IAAI;;QAGb,QACE,CAAA,CAAA,MAAA,EAAA,IAAA,cACU,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,MAAM,CAAK,EACvB,CAAA,CAAA,IAAA,EAAA,IAAA,CAAM,CACD;;IAIH,UAAU,GAAA;;AAChB,QAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI;QACjC,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,OAAO,IAAI;;QAGb,QACE,CAAA,CAAA,MAAA,EAAA,IAAA,YACQ,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,IAAI,CAAK,EACnB,CAAA,CAAA,IAAA,EAAA,IAAA,CAAM,CACD;;IAIH,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB;;AAGF,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB;;AAEF,QAAA,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC,QAAQ;AAExD,QAAA,QACE,CAAA,CAAA,WAAA,EAAA,EACE,QAAQ,EAAE,eAAe,CAAC,KAAK,EAC/B,OAAO,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAAA,EAEpC,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,IAAI,MAAM,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,CAClC;;AAIR,IAAA,2BAA2B,CAAC,IAAY,EAAA;AAC9C,QAAA,IACE,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO;AACzD,aAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAC5D;AACA,YAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,cAAe;;AAG7C,QAAA,IACE,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAC1D,aAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC7D;AACA,YAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,UAAU,kBAAmB;;;IAI5C,0BAA0B,GAAA;;QAChC,IAAI,EAAC,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAA,EAAE;YAClC;;AAGF,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAS,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAA,gBAAA,CAA2B,EAC1B,IAAI,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CACtC,kBACK,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAK,EAC3D,CAAA,CAAA,IAAA,EAAA,IAAA,CAAM,CACE;;IAIN,2BAA2B,GAAA;;QACjC,IAAI,EAAC,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,cAAc,CAAA,EAAE;YACnC;;AAGF,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAS,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC,EAAA,EACrD,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAA,iBAAA,CAA4B,EAC3B,IAAI,CAAC,2BAA2B,CAAC,SAAS,CAAC,CACvC,kBACK,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAK,EAC5D,CAAA,CAAA,IAAA,EAAA,IAAA,CAAM,iCACqB,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAK,CACtE;;IAId,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,eAAe,EAAE,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAA,EAEtC,IAAI,CAAC,oBAAoB,EAAE,EAC3B,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,0BAA0B,EAAE,EACjC,IAAI,CAAC,2BAA2B,EAAE,CAC/B,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DPdXlnVe.js';
+import { r as registerInstance, h } from './index-BcDWN4F1.js';
 
 const stylesCss = () => `*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}`;
 
@@ -26,9 +26,12 @@ const ZMyzCardList = class {
         });
     }
     render() {
-        return h("ul", { key: '7ed6a040b79c3ea63fc94c941dcf31b8d220aea5' }, this.renderList(JSON.parse(this.listdata)));
+        return h("ul", { key: 'a300da3bf2b9c83f59a6464b82fb2448f97555f9' }, this.renderList(JSON.parse(this.listdata)));
     }
 };
 ZMyzCardList.style = stylesCss();
 
 export { ZMyzCardList as z_myz_card_list };
+//# sourceMappingURL=z-myz-card-list.entry.js.map
+
+//# sourceMappingURL=z-myz-card-list.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-list.entry.js","sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\nul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList implements ComponentInterface {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,kvBAAkvB,CAAC;;MCQ/vB,YAAY,GAAA,MAAA;AAKvB,IAAA,WAAA,CAAA,OAAA,EAAA;;QACE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7C;IAEO,mBAAmB,CAAC,CAAgB,EAAE,GAAW,EAAA;AACvD,QAAA,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC;;;AAItB,IAAA,iBAAiB,CAAC,IAAY,EAAA;QACpC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAC,GAAG,IAAI;QACjC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ;;AAG7B,QAAA,QACE,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,EAClE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EAAA,EAEd,KAAK,CACJ;;AAIA,IAAA,UAAU,CAAC,SAAmB,EAAA;AACpC,QAAA,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,IAAY,KAAI;AACpC,YAAA,OAAO,CAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAM;AAChD,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,OAAO,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAM;;;;;;;"}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-DPdXlnVe.js';
-import { L as LicenseType } from './index-BKCj6NR2.js';
+import { r as registerInstance, h } from './index-BcDWN4F1.js';
+import { L as LicenseType } from './index-B3nR3-Jw.js';
 
 const stylesCss$3 = () => `:host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-background)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}`;
 
@@ -34,7 +34,7 @@ const ZMyzCardComponent = class {
         return elemClasses;
     }
     render() {
-        return (h("div", { key: 'b67a08f3b64765de8616a71391a1b6ca8c12b6a9', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '9b5002efd87f6f829578802ebd4dfcf57a69e02f' })));
+        return (h("div", { key: '7268d6cd9e424a3d8134ff4e96bc2ba665988a6c', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: '22c578f464737dcad6536f251e1dbea082a2eb1a' })));
     }
 };
 ZMyzCardComponent.style = stylesCss$3();
@@ -46,7 +46,7 @@ const ZMyzCardBody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '95ef1a2e8d5babdef3f5d89b532b6916cd1e2e4c' }, h("slot", { key: '96616fcb612f3ae7f1db129d50e5dbd0497870a9', name: "alert" }), h("slot", { key: '327613cfcfe1a9f96e66531629d0591b90717569', name: "cover" })));
+        return (h("div", { key: '9a1f8e25043b54dd7ce20167622840c675d8282a' }, h("slot", { key: '5b24f58f0ca8db42b6a7e8a112fd0af3af64df96', name: "alert" }), h("slot", { key: '49f082fc29b4edab74ac4dfbd6c77d388eaa22cc', name: "cover" })));
     }
 };
 ZMyzCardBody.style = stylesCss$2();
@@ -61,7 +61,7 @@ const ZMyzCardCover = class {
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: '13e827933bb784fbe1e00c690048e2e9c3699313', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: '74249d6955b0c1db6bbb2e5e77c847378861999f', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
 };
 ZMyzCardCover.style = stylesCss$1();
@@ -93,9 +93,12 @@ const ZMyzCardHeader = class {
         };
     }
     render() {
-        return (h("header", { key: '671c26a2953f4ca84e9c0bc3b84e8f6cf3d442f7', class: this.retrieveClass() }, h("slot", { key: 'd59992fbe354f2c6c4934613ed8597e3673fa49b', name: "aria-heading" }), h("span", { key: 'b58bfc5c6ab9993c33b4e8fcfde411a537c5d0f3', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '3928815f962ffd84793775a964a2303a901eed06', name: "icon" })));
+        return (h("header", { key: 'c48aea25ec119f8b56bf13004a9bb591d278706f', class: this.retrieveClass() }, h("slot", { key: '00aea3e21b5aade39b702d60e87b26ec1cb79904', name: "aria-heading" }), h("span", { key: 'ad56e6b17d0aa5e8965ace7bec60757a4e064ea7', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '0da8178876227c66042f1c6dfe5378264baf519b', name: "icon" })));
     }
 };
 ZMyzCardHeader.style = stylesCss();
 
 export { ZMyzCardComponent as z_myz_card, ZMyzCardBody as z_myz_card_body, ZMyzCardCover as z_myz_card_cover, ZMyzCardHeader as z_myz_card_header };
+//# sourceMappingURL=z-myz-card.z-myz-card-body.z-myz-card-cover.z-myz-card-header.entry.js.map
+
+//# sourceMappingURL=z-myz-card_4.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-myz-card_4.entry.js","mappings":"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","names":["stylesCss"],"sources":["src/snowflakes/myz/card/z-myz-card/styles.css?tag=z-myz-card&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card/index.tsx","src/snowflakes/myz/card/z-myz-card-body/styles.css?tag=z-myz-card-body&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-body/index.tsx","src/snowflakes/myz/card/z-myz-card-cover/styles.css?tag=z-myz-card-cover&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-cover/index.tsx","src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":[":host {\n  --card-overflow: hidden;\n}\n\ndiv {\n  display: flex;\n  overflow: var(--card-overflow);\n  width: auto;\n  width: 256px; /* TODO: width must be 100% - must be handled in dashboard */\n  height: 522px;\n  box-sizing: border-box;\n  flex-direction: column;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n}\n\ndiv.real,\ndiv.trial,\ndiv.temp {\n  border-color: var(--blue100);\n}\n\n/* HIDDEN status */\ndiv.faded {\n  border: var(--border-size-medium) solid var(--color-background);\n}\n\n/* HIGHLIGHTED status */\ndiv.highlighted {\n  box-shadow: var(--shadow-4);\n  outline: none;\n}\n\n/* PRESSED status */\ndiv.pressed {\n  box-shadow: var(--shadow-8);\n  outline: none;\n}\n\ndiv:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, ComponentInterface, h, Prop} from \"@stencil/core\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot - generic card slot\n */\n@Component({\n  tag: \"z-myz-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardComponent implements ComponentInterface {\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** pressed status */\n  @Prop()\n  ispressed = false;\n\n  /** highlighted status */\n  @Prop()\n  ishighlighted = false;\n\n  private retrieveClass(): string {\n    let elemClasses = \"\";\n\n    if (this.cardtype === LicenseType.REAL) {\n      elemClasses += \"real\";\n    } else if (this.cardtype === LicenseType.TRIAL) {\n      elemClasses += \"trial\";\n    } else if (this.cardtype === LicenseType.TEMP) {\n      elemClasses += \"temp\";\n    }\n\n    if (this.faded) {\n      elemClasses += \" faded\";\n    } else if (this.ispressed) {\n      elemClasses += \" pressed\";\n    } else if (this.ishighlighted) {\n      elemClasses += \" highlighted\";\n    }\n\n    return elemClasses;\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={this.retrieveClass()}\n        tabindex=\"0\"\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  width: auto;\n  height: 340px;\n}\n\n:host > div {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: 340px;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, ComponentInterface, h} from \"@stencil/core\";\n\n/**\n * @slot alert - card alert slot\n * @slot cover - book cover slot\n */\n@Component({\n  tag: \"z-myz-card-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardBody implements ComponentInterface {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <slot name=\"alert\"></slot>\n        <slot name=\"cover\" />\n      </div>\n    );\n  }\n}\n","img {\n  display: block;\n  max-width: 100%;\n  height: 340px;\n  margin: auto;\n  object-fit: cover;\n}\n\nimg.faded {\n  opacity: 0.3;\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-cover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardCover implements ComponentInterface {\n  /** image source */\n  @Prop()\n  img: string;\n\n  /** cover alt title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** default error image source */\n  @Prop()\n  defaultimg: string;\n\n  private hadleOnImageError(): void {\n    this.img = this.defaultimg;\n  }\n\n  render(): HTMLImageElement {\n    return (\n      <img\n        class={this.faded && \"faded\"}\n        onError={this.hadleOnImageError.bind(this)}\n        alt={this.titolo}\n        src={this.img}\n      />\n    );\n  }\n}\n","header {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted(*) {\n  position: absolute;\n  overflow: hidden !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  border: 0 none !important;\n  margin: -1px !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n  border-bottom: var(--border-size-medium) solid var(--blue100);\n  background-color: var(--color-primary03);\n}\n\n.card-title {\n  overflow: hidden;\n  height: calc(var(--space-unit) * 2);\n  padding: calc(var(--space-unit) * 2);\n  margin: 0;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.22px;\n  line-height: calc(var(--space-unit) * 2);\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.faded {\n  border-bottom: var(--border-size-medium) solid var(--color-background);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n  border-right: var(--border-size-medium) solid var(--blue100);\n  border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, ComponentInterface, 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 implements ComponentInterface {\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLElement;\n\n  private getTitle(): string {\n    return this.allowTooltip ? this.titolo : \"\";\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis()) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      real: this.cardtype === LicenseType.REAL,\n      trial: this.cardtype === LicenseType.TRIAL,\n      temp: this.cardtype === LicenseType.TEMP,\n      faded: this.faded,\n    };\n  }\n\n  render(): HTMLElement {\n    return (\n      <header class={this.retrieveClass()}>\n        <slot name=\"aria-heading\" />\n        <span\n          class=\"card-title\"\n          ref={(el) => (this.ellipsis = el as HTMLElement)}\n          title={this.getTitle()}\n        >\n          {this.titolo}\n        </span>\n        <slot name=\"icon\" />\n      </header>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-DPdXlnVe.js';
-import { h as handleKeyboardSubmit } from './utils-DYd3kO0P.js';
-import './index-BKCj6NR2.js';
+import { r as registerInstance, c as createEvent, h } from './index-BcDWN4F1.js';
+import { h as handleKeyboardSubmit } from './utils-C9lc3rtK.js';
+import './index-B3nR3-Jw.js';
 import './breakpoints-Q-tWjk7P.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)}`;
@@ -25,9 +25,12 @@ const ZMyzListItem = class {
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (h("li", { key: '09e6ff232f05fda0714becf9e1197c174f4d8a70', 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: '5af77b520ee760061280a3e1bc7f0a14a935abe4', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '5d850a4a1e5b5390c8d24529df96c65eda11f8e9', 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: '9d581e10a76a3affba423defd8d468d6485d347a' }))));
+        return (h("li", { key: '5364c5d28f9c27c67edb4e0bdcb1149f82ced9b6', 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: 'beb568968c53a442f27900b428f0fe5d0ac2703d', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '60bb559247dc40d349b83469baf081dcd1a23fae', 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: '2c8731d7877f7675d388f8be3eb833a8fcc75bd0' }))));
     }
 };
 ZMyzListItem.style = stylesCss();
 
 export { ZMyzListItem as z_myz_list_item };
+//# sourceMappingURL=z-myz-list-item.entry.js.map
+
+//# sourceMappingURL=z-myz-list-item.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-list-item.entry.js","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, ComponentInterface, 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 implements ComponentInterface {\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"],"names":[],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,mmCAAmmC,CAAC;;MCQhnC,YAAY,GAAA,MAAA;IAiCf,sBAAsB,CAAC,CAAa,EAAE,MAAM,EAAA;QAClD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,MAAM,EAAC,CAAC;;IAOnC,kBAAkB,CAAC,CAAa,EAAE,UAAU,EAAA;QAClD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,UAAU,EAAC,CAAC;;AAG3C,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAlCA,QAAA,IAAA,CAAA,UAAU,GAAY,OAAO;;AAgB7B,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI;QAmBf,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;QACpE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7D;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,EAAE;QAE/D,QACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,UAAU,EAAA,aAAA,EACN,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,EAAA,EAErG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,QAAQ,EAAA,EACrC,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,EACxC,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,GAAA,EAAA,EACE,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,EAAA,EAEX,IAAI,CAAC,IAAI,CACR,KAEJ,CAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,IAAI,CAAC,IAAI,EAAA,CAAS,CACpC,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACJ;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DPdXlnVe.js';
+import { r as registerInstance, h } from './index-BcDWN4F1.js';
 
 const stylesCss = () => `ul{padding:0;margin:0}`;
 
@@ -19,7 +19,7 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: '8864b8d3a72f6feb8dd470c865bcbf20b922f31c' }, this.list &&
+        return (h("ul", { key: '68407f9f3732f51af43763651c228bf950aada69' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {
@@ -31,3 +31,6 @@ const ZMyzList = class {
 ZMyzList.style = stylesCss();
 
 export { ZMyzList as z_myz_list };
+//# sourceMappingURL=z-myz-list.entry.js.map
+
+//# sourceMappingURL=z-myz-list.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-list.entry.js","sources":["src/snowflakes/myz/list/z-myz-list/styles.css?tag=z-myz-list&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list/index.tsx"],"sourcesContent":["ul {\n  padding: 0;\n  margin: 0;\n}\n","import {Component, ComponentInterface, Prop, Watch, h} from \"@stencil/core\";\nimport {ListItem} from \"../../../../beans/index.js\";\n\n@Component({\n  tag: \"z-myz-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzList implements ComponentInterface {\n  /** json stringified list data (mutable, optional) */\n  @Prop()\n  inputrawdata?: string;\n\n  /** list item data (mutable, optional)*/\n  @Prop({mutable: true})\n  list?: ListItem[];\n\n  componentWillLoad(): void {\n    if (this.inputrawdata) {\n      this.parseinputrawdata(this.inputrawdata);\n    }\n  }\n\n  private parseinputrawdata(inputrawdata: string): void {\n    this.list = [...JSON.parse(inputrawdata)];\n  }\n\n  @Watch(\"inputrawdata\")\n  oninputrawdataChange(newValue: string): void {\n    this.parseinputrawdata(newValue);\n  }\n\n  render(): HTMLUListElement {\n    const lastElem = this.list ? this.list.length - 1 : -1;\n\n    return (\n      <ul>\n        {this.list &&\n          this.list.map((bean, i) => (\n            <z-myz-list-item\n              listitemid={bean.listitemid}\n              text={bean.text}\n              link={bean.link}\n              linktarget={bean.linktarget}\n              icon={bean.icon}\n              underlined={lastElem != i}\n            />\n          ))}\n      </ul>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCQnC,QAAQ,GAAA,MAAA;;;;IASnB,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC;;;AAIrC,IAAA,iBAAiB,CAAC,YAAoB,EAAA;AAC5C,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;;AAI3C,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACnC,QAAA,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;;IAGlC,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE;AAEtD,QAAA,QACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,CAAA,CAAA,iBAAA,EAAA,EACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,QAAQ,IAAI,CAAC,EAAA,CACzB,CACH,CAAC,CACD;;;;;;;;;;;;"}