@zanichelli/albe-web-components 13.2.0 → 13.3.1-rc

package/dist/web-components-library/p-2b6e04e5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","watchCheckboxes","checkboxes","forEach","index","setAttribute","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","inputType","InputType","TEXT","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","componentDidRender","getAllCheckboxes","stringify","hexEncodeItemId","Buffer","from","toString","getItemId","getCheckboxClass","Array","element","shadowRoot","querySelectorAll","getControlToListSize","size","ListSize","LARGE","SMALL","X_SMALL","MEDIUM","handleSelectArrowsNavigation","e","currId","KeyboardCode","ARROW_DOWN","ARROW_UP","includes","key","isopen","preventDefault","stopPropagation","currElem","querySelector","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","focusComboboxItem","handleHeaderKeyboardEvent","ev","SPACE","handleCheckboxFocus","focusedItemId","elem","focus","resetRenderItemsList","renderItemsList","push","Object","assign","value","start","name","toUpperCase","end","newName","substring","checkAll","map","getComboboxA11yAttributes","role","label","renderHeader","h","class","onClick","onKeyDown","onKeyUp","handleKeyboardSubmit","tabindex","renderContent","hassearch","renderSearchInput","join","hascheckall","renderCheckAll","renderItems","renderList","renderCloseButton","renderItem","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","type","CHECKBOX","htmlid","disabled","maxcheckableitems","onInputCheck","i","detail","onInputFocus","renderNoSearchResults","hasgroupitems","renderGroups","newData","reduce","group","category","zListItem","_a","listGroups","entries","slot","text","noresultslabel","listitemid","icon","closesearchtext","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","message","ESC","onInputChange","checkAllId","allChecked","uncheckalltext","checkalltext","render","open","fixed","isfixed"],"sources":["src/components/inputs/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/inputs/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-text01);\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-icon02);\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-disabled02);\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-icon02);\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, Prop, h, State, Watch, Event, Element, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, ListDividerType, ControlSize, KeyboardCode, ListSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit, randomId} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\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 hexEncodeItemId(id: string): string {\n    return Buffer.from(id, \"utf8\").toString(\"hex\");\n  }\n\n  private getItemId(item: ComboItem): string {\n    return `combo-checkbox-${this.inputid}-${this.hexEncodeItemId(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    let size;\n    switch (this.size) {\n      case ControlSize.BIG:\n        size = ListSize.LARGE;\n        break;\n      case ControlSize.SMALL:\n        size = ListSize.SMALL;\n        break;\n      case ControlSize.X_SMALL:\n        size = ListSize.SMALL;\n        break;\n      default:\n        size = ListSize.MEDIUM;\n    }\n\n    return size;\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={this.hexEncodeItemId(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"],"mappings":"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"}