npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0-rc2 → 16.3.1-RC - Mend

@zanichelli/albe-web-components 16.3.0-rc2 → 16.3.1-RC

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 (1116) hide show

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

	@@ -1 +1 @@
1	- {"file":"z-combobox.js","mappings":"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","names":["ZCombobox"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface04);\n margin: 0;\n background-color: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > p.body-3 {\n padding: var(--space-unit) 0;\n margin: 0;\n color: var(--color-default-text);\n}\n\n:host > div > .header > p.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-default-icon);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-primary01);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n color: var(--color-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--gray200);\n border-top: 0;\n background-color: var(--color-input-field01);\n border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 3px; /* needed for checkbox focus shadow /\n margin: 0;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) 2);\n color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: auto;\n margin-top: 0;\n box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n display: inline-block;\n height: 44px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* close combobox list text /\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) \|\| (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-combobox.js","mappings":"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","names":["ZCombobox"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface04);\n margin: 0;\n background-color: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n:host > div > div.header:focus:focus-visible {\n z-index: 16;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > p.body-3 {\n padding: var(--space-unit) 0;\n margin: 0;\n color: var(--color-default-text);\n}\n\n:host > div > .header > p.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-default-icon);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-primary01);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n color: var(--color-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-default-icon);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--gray200);\n border-top: 0;\n background-color: var(--color-input-field01);\n border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 3px; /* needed for checkbox focus shadow /\n margin: 0;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) 2);\n color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: auto;\n margin-top: 0;\n box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n display: inline-block;\n height: 44px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id /\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /* list items array /\n @Prop()\n items: ComboItem[] \| string;\n\n /* label text /\n @Prop()\n label: string;\n\n /* the combobox is disabled /\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /* show search input flag (optional) /\n @Prop()\n hassearch?: boolean = false;\n\n /* search input label text (optional) /\n @Prop()\n searchlabel?: string;\n\n /* search input placeholder text (optional) /\n @Prop()\n searchplaceholder?: string;\n\n /* search input title text (optional) /\n @Prop()\n searchtitle?: string;\n\n /* no result text message /\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /* toggle combo list opening flag /\n @Prop({mutable: true})\n isopen = false;\n\n /* fixed style flag /\n @Prop()\n isfixed = false;\n\n /* close combobox list text /\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /* show \"check all\" checkbox (optional) /\n @Prop()\n hascheckall?: boolean = false;\n\n /* check all label (optional) /\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /* uncheck all label (optional) /\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /* max number of checkable items (0 = unlimited) /\n @Prop()\n maxcheckableitems = 0;\n\n /* group items by category /\n @Prop()\n hasgroupitems?: boolean;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /* Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n switch (this.size) {\n case ControlSize.X_SMALL:\n return ListSize.SMALL;\n case ControlSize.SMALL:\n return ListSize.MEDIUM;\n default:\n return ListSize.LARGE;\n }\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) \|\| !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) \|\| (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/z-cover-hero.js CHANGED Viewed

@@ -31,9 +31,9 @@ const ZCoverHero$1 = /*@__PURE__*/ proxyCustomElement(class ZCoverHero extends H
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '7482b04aecf16afbc4d0ba2e360b9cd7ade14b5e' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'b8db9df129ba92efc6c254a1058a9b89186fc6ca' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '7158050747281f4abbdb1bcd4e55eaa7053a081d', class: "main-container" }, h("div", { key: '3b861d4be6cda02a6c6cb821fa55d5f310905046', class: "cover-container" }, h("slot", { key: 'af4b31a141cd3cec3a251656c7429f09832abca1', name: "cover" })), h("slot", { key: 'cd8f0062427be543fdf4df5668bb7cce72dc1f7a', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '8b959ffe0c0c4fbddacb20ced4401234a8482ba3', class: "main-container" }, h("div", { key: '87918b02dc80974fb17400a64ffc3fdd277d8a14', class: "cover-container" }, h("slot", { key: '311401325e923d2f944b2f2989b2f2dc95971413', name: "cover" })), h("slot", { key: '7137546741734ea302b8fb00eea39f334c6780d2', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { P as PopoverPosition, w as ZChipType } from './index2.js';
-import { t as tabletBreakpoint } from './breakpoints.js';
+import { B as Breakpoints } from './breakpoints.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index22.js';
@@ -33,7 +33,7 @@ const ZFile$1 = /*@__PURE__*/ proxyCustomElement(class ZFile extends HTMLElement
     }
     componentDidLoad() {
         var _a, _b;
-        if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {
+        if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {
             this.allowPopover = true;
         }
         (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -42,7 +42,7 @@ const ZFile$1 = /*@__PURE__*/ proxyCustomElement(class ZFile extends HTMLElement
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'fd8490c60c3266c39e2b4fa7b3cc4097da8222cf' }, this.allowPopover && (h("z-popover", { key: 'af7c9370bdaa644ecfb50e1ae69fd425b1347b36', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'faa8e08ffbae25222396effe24db44e53ccfb892', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'ed790fdb2b1639e4f44cde4da98daa101a44abb0', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '0bae3bda90db4e3793a22629b30439017e3543a3', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '0d6f3522b4d6be820d8b96a3cd96fc4abb38d41c' }, this.allowPopover && (h("z-popover", { key: 'da950fcf5b1be6fc291895aeb0e2223275cab8fa', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '54363fac4eb3b6a723c7841bb29415b0bd763e9a', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '2842d206ffa531c93838e885ba545176554dd7e3', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'e6d0322525bf9ae3d2d09d4110a5414c25ab211b', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return this; }
     static get style() { return ZFileStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"z-file.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,uYAAuY,CAAC;AAC1Z,oBAAe,SAAS;;MCSXA,OAAK;;;;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,~~gBAAgB~~,EAAE;~~YACrE~~,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;KACtB;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,YAAY,KAChB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI,IAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb,EACD,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO,IAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZFile"],"sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n position: relative;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n white-space: nowrap;\n}\n\n:host > z-chip span {\n display: block;\n overflow: hidden;\n max-width: 250px;\n letter-spacing: 0.32px;\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {~~tabletBreakpoint~~} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id /\n @Prop()\n fileNumber: number;\n\n /* File name /\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /* Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > ~~tabletBreakpoint~~) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-file.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,uYAAuY,CAAC;AAC1Z,oBAAe,SAAS;;MCSXA,OAAK;;;;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;KAClB;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE;YACvE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;KACtB;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,YAAY,KAChB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI,IAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb,EACD,+DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO,IAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZFile"],"sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n position: relative;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n white-space: nowrap;\n}\n\n:host > z-chip span {\n display: block;\n overflow: hidden;\n max-width: 250px;\n letter-spacing: 0.32px;\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id /\n @Prop()\n fileNumber: number;\n\n /* File name /\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /* Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-info-box.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZInfoBox$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoBox extends HTMLE
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '1dfafec30710cc88783dd1db6764eaa1ceafd071', id: this.boxid }, h("slot", { key: '57749f4cb7750162f85e27ecaf805e70bd753805', name: "content" }), this.isclosable && (h("z-icon", { key: 'd126530698fc1218f5a0439e7043e48b5eadbdcd', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '2f83796cb61288f4250b00847fe63005e9d62f5c', id: this.boxid }, h("slot", { key: '7531c58a7563a6e30f68df36a0a92650ee19b3b5', name: "content" }), this.isclosable && (h("z-icon", { key: 'ac0ae6e8195f62c776b2ee7da5dac09a0f17b703', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get style() { return ZInfoBoxStyle0; }
 }, [1, "z-info-box", {

package/dist/components/z-info-reveal.js CHANGED Viewed

@@ -49,7 +49,7 @@ const ZInfoReveal$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoReveal extends
         }
     }
     render() {
-        return (h(Host, { key: 'b3f9d4d32dda69338b91bf20b9417ad5dbc4e52a', open: this.open }, h("button", { key: '3010eafe8bd166e4f00a6cc47607c9853a83ed3b', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'b87d613b9cbb88aeba353356b3f482d38d4f8660', name: this.icon }), this.label && h("span", { key: 'e9ec5d7dd491fd85262c1efb2499f9baf2cf9828', class: "z-info-reveal-label" }, this.label)), h("div", { key: '6533376449955ad706239e2e9fae0c63bcd57e45', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: '0ac7fe4c837eb09baf88a9ba2a8b2eebeeb3fe9b' }), h("button", { key: '42271955701dfade6af94c77c02477242408c9ec', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '517b532b9ad4c2f091da5e5b8cc8f83535e4061f', name: "multiply" })))));
+        return (h(Host, { key: '26f1289a1592702b470934f4d9fe38c34039a013', open: this.open }, h("button", { key: '970af3aaf1e9460ee380249de460389f1bdfdfda', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '396653feab94053d64b2157d4a79699d54cf5cf5', name: this.icon }), this.label && h("span", { key: '785319a805aecdf9f8c2ffa5f451c0f2868c5df3', class: "z-info-reveal-label" }, this.label)), h("div", { key: '729762b03fd3d2fb73914ed9a46d2634ff6b8d0b', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'a16a68e1e7c4b1bcb10e69d1fe48fbe5f8dfda26' }), h("button", { key: 'e91b170b87e62dab979876413aad47bdb5e9d758', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '772445e4bc3895c5c0328a5e7adca8994324c471', name: "multiply" })))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -23,7 +23,7 @@ const ZLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZLogo extends HTMLElement
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '8cfbe8c165affd6a2f036e823f90fca7b72231d9', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '62a2be82e036760d34d812904b967ac96a22604a', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get style() { return ZLogoStyle0; }
 }, [1, "z-logo", {

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

@@ -2,120 +2,33 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as KeyboardCode } from './index2.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"section\"]:hover),.items>::slotted([slot=\"section\"]:focus:focus-visible),.items>::slotted([slot=\"section\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-secondary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot=\"section\"]:last-of-type){border:none}::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}::slotted([slot=\"section\"]:hover),::slotted([slot=\"section\"]:focus:focus-visible),::slotted([slot=\"section\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
 const ZMenuSectionStyle0 = stylesCss;
 const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.opened = createEvent(this, "opened", 7);
-        this.closed = createEvent(this, "closed", 7);
-        this.currentIndex = -1;
-        this.currentCanvasOpenStatus = false;
-        this.active = undefined;
-        this.open = undefined;
-        this.hasContent = undefined;
-    }
-    canvasOpenStatusChanged(e) {
-        this.currentCanvasOpenStatus = e.detail;
-    }
-    handleKeyDown(e) {
-        if (e.code === KeyboardCode.ENTER) {
-            return;
-        }
-        if (this.open && !this.currentCanvasOpenStatus) {
-            this.handleNavigationSideArrow(e);
-        }
-        this.handleArrowsNav(e);
-    }
-    handleNavigationSideArrow(e) {
-        if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {
-            return;
-        }
-        if (e.code === KeyboardCode.ARROW_RIGHT) {
-            const nextElement = this.hostElement.parentElement.nextElementSibling;
-            if (nextElement) {
-                const menuButton = nextElement.shadowRoot.querySelector(".menu-label");
-                console.log(this.hostElement.parentElement);
-                menuButton.focus();
-            }
-            this.open = false;
-            nextElement.setAttribute("open", "true");
-        }
-        else if (e.code === KeyboardCode.ARROW_LEFT) {
-            const prevElement = this.hostElement.parentElement.previousElementSibling;
-            if (prevElement) {
-                const menuButton = prevElement.shadowRoot.querySelector(".menu-label");
-                menuButton.focus();
-            }
-            prevElement.setAttribute("open", "true");
-            this.open = false;
-        }
-    }
-    handleArrowsNav(e) {
-        const menuItems = Array.from(this.hostElement.querySelectorAll('[slot="section"]'));
-        if (this.open) {
-            e.preventDefault();
-            e.stopPropagation();
-            if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {
-                let nextFocusableItem;
-                // INFO: reset focus on all menu items
-                menuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
-                if (e.code === KeyboardCode.ARROW_DOWN) {
-                    nextFocusableItem = this.getNextItem(menuItems, 1);
-                }
-                else if (e.code === KeyboardCode.ARROW_UP) {
-                    nextFocusableItem = this.getNextItem(menuItems, -1);
-                }
-                if (nextFocusableItem) {
-                    nextFocusableItem.setAttribute("tabindex", "0");
-                    nextFocusableItem.focus();
-                }
-            }
-            else if (e.code === KeyboardCode.ESC) {
-                this.focusToParentAndCloseMenu();
-            }
-            else if (e.shiftKey && e.code === KeyboardCode.TAB) {
-                this.focusToParentAndCloseMenu();
-            }
-        }
-    }
-    getNextItem(menuItems, direction) {
-        if (this.currentIndex === -1) {
-            this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;
-            return menuItems[this.currentIndex];
-        }
-        this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;
-        return menuItems[this.currentIndex];
-    }
-    focusToParentAndCloseMenu() {
-        const menuButton = this.hostElement.shadowRoot.querySelector("button");
-        menuButton.focus();
-        this.currentIndex = -1;
-        this.open = false;
+    get focusableItem() {
+        return this.items.find(({ tabIndex }) => tabIndex === 0);
     }
     toggle() {
-        if (!this.hasContent) {
+        if (!this.hasItems) {
             return;
         }
         this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
+        this.setFocus();
     }
-    /** Close the list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.open || this.hostElement.contains(ev.target)) {
+    setItemsA11yAttrs() {
+        if (!this.hasItems) {
             return;
         }
-        this.open = false;
-        this.closed.emit();
+        this.items.forEach((item, index) => {
+            item.setAttribute("role", "menuitem");
+            item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+        });
     }
-    /**
-     * Check if some content slot is set.
-     */
-    checkContent() {
-        this.hasContent = this.hostElement.querySelectorAll('[slot="section"]').length > 0;
+    onItemsChange() {
+        this.items = Array.from(this.host.querySelectorAll('[slot="section"]'));
+        this.hasItems = this.items.length > 0;
+        this.setItemsA11yAttrs();
     }
     /**
      * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
@@ -123,28 +36,151 @@ const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection exten
      */
     onLabelSlotChange(ev) {
         const labelElement = ev.target.assignedElements()[0];
-        labelElement.dataset.text = (labelElement === null || labelElement === void 0 ? void 0 : labelElement.innerText) || null;
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+    }
+    onLabelKeydown(ev) {
+        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+        }
+    }
+    /**
+     * Move focus and adjust the tabindex value of `receiver` and `current` elements,
+     * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.
+     */
+    moveFocus(receiver, current) {
+        receiver.tabIndex = 0;
+        setTimeout(() => {
+            receiver.focus();
+        }, 100);
+        if (current) {
+            current.tabIndex = -1;
+        }
+    }
+    /** Set tabindex of the label to 0, then focus it. */
+    async setFocus() {
+        this.htmlTabindex = 0;
+        setTimeout(() => {
+            this.label.focus();
+        }, 100);
     }
-    focusFirstSectionItemOnKeyUp() {
-        const firstElement = this.hostElement.querySelectorAll('[slot="section"]')[0];
-        if (firstElement) {
-            firstElement.focus();
-            this.currentIndex = 0;
+    /** Focus the last item. */
+    async focusLastItem() {
+        this.htmlTabindex = 0;
+        this.moveFocus(this.items[this.items.length - 1]);
+    }
+    onOpenChange() {
+        if (!this.open) {
+            this.closed.emit();
+            this.setItemsA11yAttrs();
+        }
+        else {
+            this.opened.emit();
+        }
+    }
+    onTabindexChange() {
+        this.label.tabIndex = this.htmlTabindex;
+    }
+    onItemsKeydown(ev) {
+        switch (ev.key) {
+            case KeyboardCode.ESC:
+            case KeyboardCode.ARROW_LEFT:
+                if (!this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.label.focus();
+                this.open = false;
+                break;
+            case KeyboardCode.ARROW_RIGHT:
+                if (this.open) {
+                    break;
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = true;
+                break;
+            case KeyboardCode.ARROW_DOWN: {
+                if (!this.open) {
+                    break;
+                }
+                if (document.activeElement === this.host) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.moveFocus(this.items[0]);
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex + 1];
+                if (receiver) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.moveFocus(receiver, this.focusableItem);
+                }
+                break;
+            }
+            case KeyboardCode.ARROW_UP: {
+                if (!this.open || document.activeElement === this.host) {
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                const receiver = this.items[currentIndex - 1];
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (receiver) {
+                    this.moveFocus(receiver, this.focusableItem);
+                }
+                else {
+                    // since there isn't a previous item to focus, give the focus to the label element
+                    this.setFocus();
+                }
+                break;
+            }
         }
     }
-    componentWillLoad() {
-        this.checkContent();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.active = undefined;
+        this.htmlTabindex = -1;
+        this.open = undefined;
+        this.hasItems = undefined;
+        this.items = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onLabelKeydown = this.onLabelKeydown.bind(this);
+        this.onItemsKeydown = this.onItemsKeydown.bind(this);
+    }
+    connectedCallback() {
+        this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '08825d1818384762749ba15445b8d88efed5d86c', role: "menu", open: this.open }, h("button", { key: '53de21a81cf5c5da071ba758fee5947ea2800b60', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this), onKeyUp: this.focusFirstSectionItemOnKeyUp.bind(this) }, h("slot", { key: '5828e33b6cbf5ce80a841362a4f879fdcb734abb', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '54430c6f39a36b316056aee3ef44964401608967', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '8fdb48843dc10bf866988804b380b8cf8bb61b05', class: "items" }, h("slot", { key: '9ef0e24e9e88a2e5f7a16234e2b33010370db829', name: "section", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: '387e43b42ac8233f88d329a592bef924ebcf9ee9', open: this.open }, h("button", { key: 'd6014cdeb9a6ff2b4e95c43db7d2bae2b4d1c811', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.toggle, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'd0065cf62f83d83df43b5c2413d3e13b23a1bb6a', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'e6adc51de79f1fbcb76b025cd6226388ff4d90f0', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '151f31f24ec306ce4cb45b70b8ae5a6023fd063d', class: "items", role: "menu" }, h("slot", { key: 'd4d67539788121360de0e4dabf51ba22086c1345', name: "section", onSlotchange: this.onItemsChange })))));
     }
-    get hostElement() { return this; }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChange"],
+        "htmlTabindex": ["onTabindexChange"]
+    }; }
     static get style() { return ZMenuSectionStyle0; }
 }, [1, "z-menu-section", {
         "active": [516],
-        "open": [32],
-        "hasContent": [32]
-    }, [[4, "canvasOpenStatusChanged", "canvasOpenStatusChanged"], [0, "keydown", "handleKeyDown"], [4, "click", "handleClick"]]]);
+        "htmlTabindex": [2, "html-tabindex"],
+        "open": [1028],
+        "hasItems": [32],
+        "items": [32],
+        "setFocus": [64],
+        "focusLastItem": [64]
+    }, [[0, "keydown", "onItemsKeydown"]], {
+        "open": ["onOpenChange"],
+        "htmlTabindex": ["onTabindexChange"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;