v4web-components/dist/components/lab-ds-accordion.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';

const labDsAccordionCss = ".v4-accordion{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);background-color:var(--lab-ds-semantic-selectable-color-bg-default);text-align:left}.closed .v4-accordion-header-description{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-top-style:solid;border-bottom-style:solid;border-top-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);color:var(--lab-ds-semantic-color-fg-default)}.open.v4-accordion{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-bottom-style:solid;border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-border-default);box-shadow:var(--lab-ds-semantic-selectable-shadow-m)}.v4-accordion-header-description{display:flex;flex-direction:column;cursor:pointer;padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-m)}.open .v4-accordion-header-description{border-top-style:solid;border-color:var(--lab-ds-semantic-selectable-color-border-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-top-width:var(--lab-ds-semantic-selectable-border-width-s)}.v4-accordion-header{display:flex;gap:auto;justify-content:space-between}.v4-accordion-title{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-accordion-title-text{font:var(--lab-ds-semantic-typography-heading-h6)}.v4-accordion-description{font:var(--lab-ds-semantic-typography-heading-h7)}.v4-accordion-content{display:flex;flex-direction:column;padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xl);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-accordion-content-title{font:var(--lab-ds-semantic-typography-heading-h7)}.v4-accordion-content-body{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.open.v4-accordion:not(.disabled) .v4-accordion-header-description:focus{outline:none;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-style:solid}.open.v4-accordion:not(.disabled) .v4-accordion-header-description:hover{background-color:var(--lab-ds-semantic-selectable-color-bg-hover);box-shadow:var(--lab-ds-semantic-selectable-shadow-m)}.open.v4-accordion:not(.disabled) .v4-accordion-header-description:hover .action-icon{color:var(--lab-ds-semantic-selectable-color-primary-hover)}.closed.v4-accordion:hover:not(.disabled){background-color:var(--lab-ds-semantic-selectable-color-bg-hover);box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border:none}.closed.v4-accordion:hover:not(.disabled) .action-icon{color:var(--lab-ds-semantic-selectable-color-primary-hover)}.closed.v4-accordion:hover:not(.disabled) .v4-accordion-header-description{background-color:var(--lab-ds-semantic-selectable-color-bg-hover)}.closed.v4-accordion:not(.disabled) .v4-accordion-header-description:focus{outline:none;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-style:solid}.v4-accordion.disabled{cursor:not-allowed;background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);border:none}.closed.v4-accordion.disabled .v4-accordion-header-description{cursor:not-allowed;background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);border:none}.disabled .v4-accordion-header-description{cursor:not-allowed}";

const LabDsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class LabDsAccordion extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.titleAccordion = undefined;
    this.descriptionAccordion = undefined;
    this.titlePanel = undefined;
    this.bodyPanel = undefined;
    this.icon = undefined;
    this.openAccordion = false;
    this.disabled = false;
  }
  render() {
    return (h("div", { class: `v4-accordion ${this.openAccordion ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}` }, h("div", { tabIndex: 1, onClick: () => {
        if (this.disabled)
          return;
        this.openAccordion = !this.openAccordion;
      }, class: "v4-accordion-header-description" }, h("div", { class: "v4-accordion-header" }, h("div", { class: "v4-accordion-title" }, this.icon && h("lab-ds-icon-not-selectable", { icon: this.icon, size: "medium" }), h("span", { class: "v4-accordion-title-text" }, this.titleAccordion)), h("lab-ds-icon-not-selectable", { class: "action-icon", icon: !this.openAccordion ? 'expand_more' : 'expand_less', size: "s-medium" })), this.descriptionAccordion && !this.openAccordion && h("div", { class: "v4-accordion-description" }, this.descriptionAccordion)), this.openAccordion && (h("div", { class: "v4-accordion-content" }, h("slot", { name: "body-accordion" }), this.titlePanel && h("div", { class: "v4-accordion-content-title" }, this.titlePanel), this.bodyPanel && h("div", { class: "v4-accordion-content-body" }, this.bodyPanel)))));
  }
  static get style() { return labDsAccordionCss; }
}, [1, "lab-ds-accordion", {
    "titleAccordion": [1, "title-accordion"],
    "descriptionAccordion": [1, "description-accordion"],
    "titlePanel": [1, "title-panel"],
    "bodyPanel": [1, "body-panel"],
    "icon": [1],
    "openAccordion": [4, "open-accordion"],
    "disabled": [4]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-accordion", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-accordion":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsAccordion$1);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsAccordion = LabDsAccordion$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsAccordion, defineCustomElement };

//# sourceMappingURL=lab-ds-accordion.js.map