npm - @zanichelli/albe-web-components - Versions diffs - 17.0.3 → 17.0.5-RC1 - Mend

@zanichelli/albe-web-components 17.0.3 → 17.0.5-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1478) hide show

package/dist/components/z-menu-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-menu-section.js","mappings":"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","names":["ZMenuSection"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(),\n {\n box-sizing: border-box;\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.label {\n display: flex;\n width: 100%;\n align-items: center;\n padding: var(--space-unit) 0;\n border: 0;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n margin: 0;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(),\n.label:focus:focus-visible ::slotted(),\n.label:hover ::slotted() {\n font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Trick to prevent 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])::after {\n overflow: hidden;\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n.label ::slotted() {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.5;\n}\n\n.label z-icon {\n margin-left: calc(var(--space-unit) * 4);\n fill: var(--color-default-icon);\n}\n\n.items {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: calc(var(--space-unit) / 2);\n padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n display: none;\n}\n\n::slotted([slot=\"section\"]) {\n display: inline-flex;\n padding: calc(var(--space-unit) / 2);\n margin: 0;\n font-size: var(--font-size-1);\n line-height: 1.333;\n outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"][active]) {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/*\n A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `active` attribute to a slotted element to highlight it.\n /\n@Component({\n tag: \"z-menu-section\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSection {\n @Element() host: HTMLZMenuSectionElement;\n\n /* Active state /\n @Prop({reflect: true})\n active?: boolean;\n\n /\n Tabindex value to set on the label button.\n * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n /\n @Prop()\n htmlTabindex = -1;\n\n /* The opening state of the section. /\n @Prop({mutable: true})\n open: boolean;\n\n @State()\n hasItems: boolean;\n\n @State()\n items: HTMLElement[];\n\n /* The section has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The section has been closed. /\n @Event()\n closed: EventEmitter;\n\n private label: HTMLButtonElement;\n\n private get focusableItem(): HTMLElement {\n return this.items.find(({tabIndex}) => tabIndex === 0);\n }\n\n private toggle(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.open = !this.open;\n }\n\n private setItemsA11yAttrs(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.tabIndex = -1;\n });\n }\n\n private onItemsChange(): void {\n this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n this.hasItems = this.items.length > 0;\n this.setItemsA11yAttrs();\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 }\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.focustFirstItem();\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 /\n private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n receiver.tabIndex = 0;\n setTimeout(() => {\n receiver.focus();\n }, 100);\n if (current) {\n current.tabIndex = -1;\n }\n }\n\n private focustFirstItem(): void {\n this.moveFocus(this.items[0]);\n }\n\n /* Focus the last item. /\n @Method()\n async focusLastItem(): Promise<void> {\n this.moveFocus(this.items[this.items.length - 1]);\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 setTimeout(() => {\n this.label.focus();\n }, 100);\n }\n\n @Watch(\"open\")\n onOpenChange(): void {\n if (!this.open) {\n this.setItemsA11yAttrs();\n this.closed.emit();\n } else {\n this.opened.emit();\n }\n }\n\n @Watch(\"htmlTabindex\")\n onTabindexChange(): void {\n this.label.tabIndex = this.htmlTabindex;\n }\n\n @Listen(\"keydown\")\n private onItemsKeydown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case KeyboardCode.ESC:\n case KeyboardCode.ARROW_LEFT:\n if (!this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(this.label, this.focusableItem);\n this.open = false;\n break;\n case KeyboardCode.ARROW_RIGHT:\n if (this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.open = true;\n this.focustFirstItem();\n break;\n case KeyboardCode.ARROW_DOWN: {\n if (!this.open) {\n break;\n }\n if (document.activeElement === this.host) {\n ev.preventDefault();\n ev.stopPropagation();\n this.focustFirstItem();\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex + 1];\n if (receiver) {\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(receiver, this.focusableItem);\n } else {\n this.htmlTabindex = 0;\n this.focusableItem.tabIndex = -1;\n }\n break;\n }\n case KeyboardCode.ARROW_UP: {\n if (!this.open \|\| document.activeElement === this.host) {\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex - 1];\n ev.preventDefault();\n ev.stopPropagation();\n if (receiver) {\n this.moveFocus(receiver, this.focusableItem);\n } else {\n // since there isn't a previous item to focus, give the focus to the label element\n this.focusableItem.tabIndex = -1;\n this.setFocus();\n }\n break;\n }\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onLabelClick = this.onLabelClick.bind(this);\n this.onLabelKeydown = this.onLabelKeydown.bind(this);\n this.onItemsKeydown = this.onItemsKeydown.bind(this);\n }\n\n connectedCallback(): void {\n this.onItemsChange();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host open={this.open}>\n <button\n ref={(el) => (this.label = el)}\n class=\"label\"\n aria-haspopup={`${!!this.hasItems}`}\n aria-expanded={`${!!this.open}`}\n role=\"menuitem\"\n tabindex={this.htmlTabindex}\n onClick={this.onLabelClick}\n onKeyDown={this.onLabelKeydown}\n >\n <slot onSlotchange={this.onLabelSlotChange} />\n {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n <div\n class=\"items\"\n role=\"menu\"\n hidden={!this.open}\n >\n <slot\n name=\"section\"\n onSlotchange={this.onItemsChange}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-menu-section.js","mappings":"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","names":["ZMenuSection"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(),\n {\n box-sizing: border-box;\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.label {\n display: flex;\n width: 100%;\n align-items: center;\n padding: var(--space-unit) 0;\n border: 0;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n margin: 0;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(),\n.label:focus:focus-visible ::slotted(),\n.label:hover ::slotted() {\n font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Trick to prevent 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])::after {\n overflow: hidden;\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n.label ::slotted() {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.5;\n}\n\n.label z-icon {\n margin-left: calc(var(--space-unit) * 4);\n fill: var(--color-default-icon);\n}\n\n.items {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: calc(var(--space-unit) / 2);\n padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n display: none;\n}\n\n::slotted([slot=\"section\"]) {\n display: inline-flex;\n padding: calc(var(--space-unit) / 2);\n margin: 0;\n font-size: var(--font-size-1);\n line-height: 1.333;\n outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"][active]) {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/*\n A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `active` attribute to a slotted element to highlight it.\n /\n@Component({\n tag: \"z-menu-section\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSection {\n @Element() host: HTMLZMenuSectionElement;\n\n /* Active state /\n @Prop({reflect: true})\n active?: boolean;\n\n /\n Tabindex value to set on the label button.\n * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n /\n @Prop()\n htmlTabindex = -1;\n\n /* The opening state of the section. /\n @Prop({mutable: true})\n open: boolean;\n\n @State()\n hasItems: boolean;\n\n @State()\n items: HTMLElement[];\n\n /* The section has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The section has been closed. /\n @Event()\n closed: EventEmitter;\n\n private label: HTMLButtonElement;\n\n private get focusableItem(): HTMLElement {\n return this.items.find(({tabIndex}) => tabIndex === 0);\n }\n\n private toggle(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.open = !this.open;\n }\n\n private setItemsA11yAttrs(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.tabIndex = -1;\n });\n }\n\n private onItemsChange(): void {\n this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n this.hasItems = this.items.length > 0;\n this.setItemsA11yAttrs();\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 }\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.focustFirstItem();\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 /\n private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n receiver.tabIndex = 0;\n setTimeout(() => {\n receiver.focus();\n }, 100);\n if (current) {\n current.tabIndex = -1;\n }\n }\n\n private focustFirstItem(): void {\n this.moveFocus(this.items[0]);\n }\n\n /* Focus the last item. /\n @Method()\n async focusLastItem(): Promise<void> {\n this.moveFocus(this.items[this.items.length - 1]);\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 setTimeout(() => {\n this.label.focus();\n }, 100);\n }\n\n @Watch(\"open\")\n onOpenChange(): void {\n if (!this.open) {\n this.setItemsA11yAttrs();\n this.closed.emit();\n } else {\n this.opened.emit();\n }\n }\n\n @Watch(\"htmlTabindex\")\n onTabindexChange(): void {\n this.label.tabIndex = this.htmlTabindex;\n }\n\n @Listen(\"keydown\")\n private onItemsKeydown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case KeyboardCode.ESC:\n case KeyboardCode.ARROW_LEFT:\n if (!this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(this.label, this.focusableItem);\n this.open = false;\n break;\n case KeyboardCode.ARROW_RIGHT:\n if (this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.open = true;\n this.focustFirstItem();\n break;\n case KeyboardCode.ARROW_DOWN: {\n if (!this.open) {\n break;\n }\n if (document.activeElement === this.host) {\n ev.preventDefault();\n ev.stopPropagation();\n this.focustFirstItem();\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex + 1];\n if (receiver) {\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(receiver, this.focusableItem);\n } else {\n this.htmlTabindex = 0;\n this.focusableItem.tabIndex = -1;\n }\n break;\n }\n case KeyboardCode.ARROW_UP: {\n if (!this.open \|\| document.activeElement === this.host) {\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex - 1];\n ev.preventDefault();\n ev.stopPropagation();\n if (receiver) {\n this.moveFocus(receiver, this.focusableItem);\n } else {\n // since there isn't a previous item to focus, give the focus to the label element\n this.focusableItem.tabIndex = -1;\n this.setFocus();\n }\n break;\n }\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onLabelClick = this.onLabelClick.bind(this);\n this.onLabelKeydown = this.onLabelKeydown.bind(this);\n this.onItemsKeydown = this.onItemsKeydown.bind(this);\n }\n\n connectedCallback(): void {\n this.onItemsChange();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host open={this.open}>\n <button\n ref={(el) => (this.label = el)}\n class=\"label\"\n aria-haspopup={`${!!this.hasItems}`}\n aria-expanded={`${!!this.open}`}\n role=\"menuitem\"\n tabindex={this.htmlTabindex}\n onClick={this.onLabelClick}\n onKeyDown={this.onLabelKeydown}\n >\n <slot onSlotchange={this.onLabelSlotChange} />\n {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n <div\n class=\"items\"\n role=\"menu\"\n hidden={!this.open}\n >\n <slot\n name=\"section\"\n onSlotchange={this.onItemsChange}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-menu.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { g as KeyboardCode } from './index2.js';
 import { a as containsElement } from './utils.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:\"\"}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot=\"item\"]:last-child){border-bottom:0}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host,::slotted(*),*{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}:host{position:relative;display:-ms-inline-flexbox;display:inline-flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-ms-flex-direction:column;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:\"\"}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:-ms-inline-flexbox;display:inline-flex;width:100%;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding-bottom:2px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;-o-object-fit:contain;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot=\"item\"]:focus:focus-visible){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot=\"item\"]:last-child){border-bottom:0}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}";
 const ZMenuStyle0 = stylesCss;
 const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";

package/dist/components/z-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-menu.js","mappings":"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","names":["ZMenu"],"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 --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: 0;\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 border-color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} 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 `active` HTML attribute on the element to highlight it. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n /\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\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()\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"],"version":3}
1	+ {"file":"z-menu.js","mappings":"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","names":["ZMenu"],"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 --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: 0;\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 border-color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} 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 `active` HTML attribute on the element to highlight it. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n /\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\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()\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"],"version":3}

package/dist/components/z-myz-card-alert.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { o as AlertType } from './index2.js';
 import { d as defineCustomElement$3 } from './index3.js';
 import { d as defineCustomElement$2 } from './index9.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-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}: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}";
+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;-ms-flex-align:center;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-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}: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}";
 const ZMyzCardAlertStyle0 = stylesCss;
 const ZMyzCardAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardAlert extends HTMLElement {

package/dist/components/z-myz-card-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-alert.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,~~w7BAAw7B~~,CAAC;~~AAC38B~~,4BAAe,SAAS;;MCOXA,eAAa;;;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,6DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardAlert"],"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-success-inverse);\n}\n\n:host div.remove-alert {\n background: var(--color-warning-inverse);\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, 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 {\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"],"version":3}
1	+ {"file":"z-myz-card-alert.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,88BAA88B,CAAC;AACj+B,4BAAe,SAAS;;MCOXA,eAAa;;;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAO,SAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1D,gEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChC,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACV,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjD,6DACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardAlert"],"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-success-inverse);\n}\n\n:host div.remove-alert {\n background: var(--color-warning-inverse);\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, 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 {\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"],"version":3}

package/dist/components/z-myz-card-dictionary.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './index18.js';
 import { d as defineCustomElement$3 } from './index19.js';
 import { d as defineCustomElement$2 } from './index20.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,\n    -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,\n    -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}";
+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;-webkit-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;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;-webkit-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;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;-webkit-transform:rotateY(0deg);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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.hide-info{display:none}";
 const ZMyzCardDictionaryStyle0 = stylesCss;
 const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDictionary extends HTMLElement {

package/dist/components/z-myz-card-dictionary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-dictionary.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,~~wmCAAwmC~~,CAAC;~~AAC3nC~~,iCAAe,SAAS;;MCWXA,oBAAkB;;;;;;;;wBAWlB,KAAK;uBAIN,KAAK;+BAIG,MAAM;2BAIV,KAAK;;IAGnB,cAAc,CAAC,CAAc;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACzB;IAMO,QAAQ,CAAC,QAAQ,GAAG,IAAI;QAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,8DACE,qEACE,0EAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAsB,EAC1D,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,IACpD,4DAAK,KAAK,EAAC,OAAO,IAChB,0EACE,yEACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACc,EAClB,iEACE,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,4DAAK,KAAK,EAAC,MAAM,IACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,8DAAQ,CACG,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardDictionary"],"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, 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 {\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"],"version":3}
1	+ {"file":"z-myz-card-dictionary.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,0iDAA0iD,CAAC;AAC7jD,iCAAe,SAAS;;MCWXA,oBAAkB;;;;;;;;wBAWlB,KAAK;uBAIN,KAAK;+BAIG,MAAM;2BAIV,KAAK;;IAGnB,cAAc,CAAC,CAAc;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACzB;IAMO,QAAQ,CAAC,QAAQ,GAAG,IAAI;QAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,8DACE,qEACE,0EAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAsB,EAC1D,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,IACpD,4DAAK,KAAK,EAAC,OAAO,IAChB,0EACE,yEACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACc,EAClB,iEACE,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,4DAAK,KAAK,EAAC,MAAM,IACf,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,8DAAQ,CACG,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardDictionary"],"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, 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 {\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"],"version":3}

package/dist/components/z-myz-card-footer-sections.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-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}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;-webkit-box-sizing:border-box;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}";
 const ZMyzCardFooterSectionsStyle0 = stylesCss;
 const ZMyzCardFooterSections$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooterSections extends HTMLElement {

package/dist/components/z-myz-card-footer-sections.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-footer-sections.js","mappings":";;AAAA,MAAM,SAAS,GAAG~~,+aAA+a~~,CAAC;~~AAClc~~,qCAAe,SAAS;;MCUXA,wBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,8DACE,iEACE,4DAAK,KAAK,EAAC,KAAK,IACd,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACC,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardFooterSections"],"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, 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 {\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"],"version":3}
1	+ {"file":"z-myz-card-footer-sections.js","mappings":";;AAAA,MAAM,SAAS,GAAG,6cAA6c,CAAC;AAChe,qCAAe,SAAS;;MCUXA,wBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,8DACE,iEACE,4DAAK,KAAK,EAAC,KAAK,IACd,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,EACN,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACC,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardFooterSections"],"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, 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 {\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"],"version":3}

package/dist/components/z-myz-card-footer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { L as LicenseType } from './index2.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,\n    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,\n    top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out,\n    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)}";
+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);-webkit-transition:height 500ms ease-in-out,\n    top 500ms ease-in-out;transition:height 500ms ease-in-out,\n    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;-webkit-transition:all 200ms linear;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);-webkit-transition:all 200ms linear;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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;-ms-flex-direction:column;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;-webkit-transition:height 500ms ease-in-out,\n    top 500ms ease-in-out;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;-webkit-transition:height 500ms ease-in-out,\n    top 500ms ease-in-out;transition:height 500ms ease-in-out,\n    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;-webkit-box-sizing:border-box;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)}";
 const ZMyzCardFooterStyle0 = stylesCss;
 const ZMyzCardFooter$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooter extends HTMLElement {

package/dist/components/z-myz-card-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-footer.js","mappings":"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","names":["ZMyzCardFooter"],"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, 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 {\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"],"version":3}
1	+ {"file":"z-myz-card-footer.js","mappings":"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","names":["ZMyzCardFooter"],"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, 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 {\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"],"version":3}

package/dist/components/z-myz-card-icon.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './index9.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}";
+const stylesCss = "button{display:-ms-flexbox;display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);-ms-flex-align:center;align-items:center;-ms-flex-pack: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:-ms-flexbox;display:flex;width:28px;height:28px;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;-webkit-box-shadow:var(--shadow-0);box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";
 const ZMyzCardIconStyle0 = stylesCss;
 const ZMyzCardIcon$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardIcon extends HTMLElement {

package/dist/components/z-myz-card-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-icon.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~mmCAAmmC~~,CAAC;~~AACtnC~~,2BAAe,SAAS;;MCMXA,cAAY;;;;;;0BAOV,KAAK;yBAIN,EAAE;;IAEd,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,gBACb,IAAI,CAAC,SAAS,IAE1B,+DACE,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACG,CACA,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardIcon"],"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, 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 {\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"],"version":3}
1	+ {"file":"z-myz-card-icon.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,s1CAAs1C,CAAC;AACz2C,2BAAe,SAAS;;MCMXA,cAAY;;;;;;0BAOV,KAAK;yBAIN,EAAE;;IAEd,MAAM;QACJ,QACE,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,gBACb,IAAI,CAAC,SAAS,IAE1B,+DACE,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACG,CACA,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardIcon"],"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, 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 {\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"],"version":3}

package/dist/components/z-myz-card-info.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { h as handleKeyboardSubmit } from './utils.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index23.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-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
+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;-webkit-box-sizing:border-box;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;-webkit-box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%);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:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-item-align:end;align-self:end;-ms-flex-pack:justify;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;-ms-flex-item-align:stretch;align-self:stretch}:host>div>div.content-wrapper>section{-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;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:-webkit-gradient(linear, left top, left bottom, from(rgb(255 0 0 / 0%)), color-stop(60%, rgb(255 0 0 / 0%)), to(white));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:-ms-flexbox;display:flex;-ms-flex-pack:justify;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-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
 const ZMyzCardInfoStyle0 = stylesCss;
 const ZMyzCardInfo$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardInfo extends HTMLElement {

package/dist/components/z-myz-card-info.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-myz-card-info.js","mappings":"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","names":["ZMyzCardInfo"],"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-warning01);\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, 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 {\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"],"version":3}
1	+ {"file":"z-myz-card-info.js","mappings":"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","names":["ZMyzCardInfo"],"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-warning01);\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, 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 {\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"],"version":3}

package/dist/components/z-myz-card-list.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-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}";
+const stylesCss = "*:focus{-webkit-box-shadow:var(--shadow-focus-primary);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}";
 const ZMyzCardListStyle0 = stylesCss;
 const ZMyzCardList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardList extends HTMLElement {