@zanichelli/albe-web-components 17.0.0 → 17.0.2

package/www/build/p-e4e0d271.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZAccordionStyle0","ZAccordion","ControlSize","BIG","AccordionVariant","DEFAULT","onDisabledChange","this","isDisabled","open","onDetailsToggle","detailsElm","toggled","emit","render","h","key","ref","elm","onToggle","bind","tabIndex","part","icon","class","name","label"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host *,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  --z-accordion-highlight-color: transparent;\n  --z-accordion-bg: var(--color-surface01);\n  --z-accordion-label-color: var(--color-default-text);\n  --z-accordion-disabled-label-color: var(--color-text03);\n  --z-accordion-content-bg: var(--color-surface01);\n  --z-accordion-content-fg: var(--color-default-text);\n  --z-accordion-hover-color: var(--color-surface03);\n  --z-accordion-left-padding: calc(var(--space-unit) * 2);\n  --z-accordion-right-padding: var(--space-unit);\n  --z-accordion-label-font-weight: var(--font-sb);\n\n  display: block;\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\ndetails {\n  background-color: transparent;\n}\n\nsummary {\n  --summary-x-small-height: 32px;\n  --summary-small-height: 36px;\n  --summary-big-height: 44px;\n  --summary-height: var(--summary-big-height);\n  --summary-y-padding: var(--space-unit);\n\n  position: relative;\n  display: flex;\n  height: var(--summary-height);\n  align-items: center;\n  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);\n  background-color: var(--z-accordion-bg);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  list-style: none;\n}\n\n:host([size=\"x-small\"]) summary {\n  --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n  --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n  --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n  padding-right: calc(var(--space-unit) * 2);\n\n  /* border-radius of the accordion - width of the accordion's border */\n  border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n  cursor: default;\n}\n\nsummary:focus:focus-visible {\n  background-color: var(--z-accordion-hover-color);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: var(--space-unit);\n  height: 100%;\n  content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n  fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n  fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n  color: var(--z-accordion-label-color);\n  font-size: var(--font-size-3); /* for \"small\" and \"big\" sizes */\n  font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n  display: flex;\n  align-items: center;\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n  margin-left: auto;\n}\n\n.z-accordion-content {\n  position: relative;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  background-color: var(--z-accordion-content-bg);\n  color: var(--z-accordion-content-fg);\n  font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes */\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n  padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n  font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n  padding-right: calc(var(--space-unit) * 2);\n}\n\n:host([is-disabled]) .z-accordion-label {\n  color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n  --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n  summary:focus:focus-visible {\n    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */\n    position: relative;\n    z-index: 1;\n  }\n\n  :host(:not([is-disabled])) summary:hover {\n    background-color: var(--z-accordion-hover-color);\n  }\n\n  :host(:not([is-disabled])) summary:hover .z-accordion-label {\n    text-decoration: underline;\n  }\n}\n\n/* force \"big\" variant on touch devices */\n@media (hover: none) {\n  :host([size]) summary {\n    --summary-height: var(--summary-big-height);\n    --summary-y-padding: var(--space-unit);\n  }\n\n  :host([size]) .z-accordion-label {\n    font-size: var(--font-size-3);\n  }\n\n  :host([size]) .z-accordion-content {\n    font-size: var(--font-size-2);\n  }\n\n  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n    --z-icon-width: 18px;\n    --z-icon-height: 18px;\n  }\n}\n\n/* Style for sibling accordions in a stack context */\n\nz-accordion + z-accordion {\n  border-top: none;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"] {\n  border-radius: 0;\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type {\n  border-bottom-left-radius: var(--border-radius);\n  border-bottom-right-radius: var(--border-radius);\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]::part(summary) {\n  border-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary) {\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n","import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion {\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          <span class=\"z-accordion-tags\">\n            <slot name=\"tag\" />\n          </span>\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,w0LAClB,MAAAC,EAAeD,E,MCuBFE,EAAU,M,6GAiBdC,EAAYC,I,gBAMN,M,UAMN,M,eAMK,M,aAMgBC,EAAiBC,Q,YAMpC,I,CASC,gBAAAC,GACR,GAAIC,KAAKC,WAAY,CACnBD,KAAKE,KAAO,K,EAWR,eAAAC,GACN,GAAIH,KAAKC,WAAY,CACnBD,KAAKE,KAAO,MACZF,KAAKI,WAAWF,KAAO,MAEvB,M,CAGFF,KAAKE,KAAOF,KAAKI,WAAWF,KAC5BF,KAAKK,QAAQC,KAAKN,KAAKE,K,CAGzB,MAAAK,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,IAAMC,GAA6BX,KAAKI,WAAaO,EACrDC,SAAUZ,KAAKG,gBAAgBU,KAAKb,MACpCE,KAAMF,KAAKE,MAEXM,EAAA,WAAAC,IAAA,2CACEK,SAAUd,KAAKC,YAAc,EAAI,KACjCc,KAAK,WAEJf,KAAKgB,MACJR,EAAA,UAAAC,IAAA,2CACEQ,MAAM,yBACNC,KAAMlB,KAAKgB,OAGfR,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,qBAAqBjB,KAAKmB,OACtCX,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,oBACVT,EAAA,QAAAC,IAAA,2CAAMS,KAAK,SAEbV,EAAA,UAAAC,IAAA,2CACEQ,MAAM,sBACNC,KAAMlB,KAAKE,KAAO,aAAe,mBAGnCF,KAAKC,YACLO,EAAA,OAAAC,IAAA,2CACEQ,MAAM,sBACNF,KAAK,WAELP,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/www/build/p-f400cf1b.js

@@ -1,2 +0,0 @@
-import{r as o,h as r,a as s}from"./p-75c4a726.js";const c=":host{display:block;box-sizing:border-box}";const e=c;const a=class{constructor(r){o(this,r)}render(){return r(s,{key:"a7208d0d031f76bfa40ffe4de23ea9041c6ea831",role:"rowgroup"},r("slot",{key:"4b1a52cb57149602312c46ccf556105dd05dd6e5"}))}};a.style=e;export{a as Z};
-//# sourceMappingURL=p-f400cf1b.js.map

package/www/build/p-f413c03c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,a as i,g as s}from"./p-75c4a726.js";const a=':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="item"]){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="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}';const n=a;const l=class{constructor(o){e(this,o);this.opened=t(this,"opened",7);this.closed=t(this,"closed",7);this.active=undefined;this.open=undefined;this.hasContent=undefined}toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(e){if(!this.open||this.hostElement.contains(e.target)){return}this.open=false;this.closed.emit()}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(e){const t=e.target.assignedElements()[0];t.dataset.text=(t===null||t===void 0?void 0:t.innerText)||null}componentWillLoad(){this.checkContent()}render(){return o(i,{key:"0c21e80c57e2fd5e618b84f8eb1d709616f4e5db",role:"menu",open:this.open},o("button",{key:"580b545233b54719f41a094599ab7f1079927050",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},o("slot",{key:"36dd56fc971a348b7b64e0221f7e4777e86adbd1",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&o("z-icon",{key:"fad86e31ca84d7628c830d2528e64bf09c53d772",name:this.open?"chevron-up":"chevron-down"})),this.open&&o("div",{key:"7ef9d79c46d058ce4de9d15baa2bd57e02ee9f90",class:"items"},o("slot",{key:"1203537f2478929ee2eb53c7c08a1c2b558b2e0c",name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return s(this)}};l.style=n;export{l as z_menu_section_deprecated};
-//# sourceMappingURL=p-f413c03c.entry.js.map

package/www/build/p-f413c03c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMenuSectionDeprecatedStyle0","ZMenuSectionDeprecated","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","hostElement","contains","target","checkContent","querySelectorAll","length","onLabelSlotChange","labelElement","assignedElements","dataset","text","innerText","componentWillLoad","render","h","Host","key","role","class","onClick","bind","onSlotchange","name"],"sources":["src/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-section-deprecated/index.tsx"],"sourcesContent":[":host {\n  display: inline-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:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-secondary01);\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.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\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.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\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 > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\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 toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\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?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,m8DAClB,MAAAC,EAAeD,E,MCWFE,EAAsB,M,2JAqBzB,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClBF,KAAKE,KAAOF,KAAKG,OAAOC,OAASJ,KAAKK,OAAOD,M,CAK/C,WAAAE,CAAYC,GACV,IAAKP,KAAKE,MAAQF,KAAKQ,YAAYC,SAASF,EAAGG,QAAiB,CAC9D,M,CAGFV,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAMN,YAAAO,GACNX,KAAKC,WAAaD,KAAKQ,YAAYI,iBAAiB,iBAAiBC,OAAS,C,CAOxE,iBAAAC,CAAkBP,GACxB,MAAMQ,EAAgBR,EAAGG,OAA2BM,mBAAmB,GACvED,EAAaE,QAAQC,MAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,YAAa,I,CAGzD,iBAAAC,GACEpB,KAAKW,c,CAGP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OACLvB,KAAMF,KAAKE,MAEXoB,EAAA,UAAAE,IAAA,2CACEE,MAAM,QAAO,eACC1B,KAAKE,KAAO,OAAS,QACnCyB,QAAS3B,KAAKD,OAAO6B,KAAK5B,OAE1BsB,EAAA,QAAAE,IAAA,2CAAMK,aAAc7B,KAAKc,kBAAkBc,KAAK5B,QAC/CA,KAAKC,YAAcqB,EAAA,UAAAE,IAAA,2CAAQM,KAAM9B,KAAKE,KAAO,aAAe,kBAE9DF,KAAKE,MACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACTJ,EAAA,QAAAE,IAAA,2CACEM,KAAK,OACLD,aAAc7B,KAAKW,aAAaiB,KAAK5B,S","ignoreList":[]}