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

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8b55ea0e.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.titleAccordion = undefined;
    this.descriptionAccordion = undefined;
    this.titlePanel = undefined;
    this.bodyPanel = undefined;
    this.icon = undefined;
    this.openAccordion = false;
    this.disabled = false;
  }
  render() {
    return (index.h("div", { class: `v4-accordion ${this.openAccordion ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}` }, index.h("div", { tabIndex: 1, onClick: () => {
        if (this.disabled)
          return;
        this.openAccordion = !this.openAccordion;
      }, class: "v4-accordion-header-description" }, index.h("div", { class: "v4-accordion-header" }, index.h("div", { class: "v4-accordion-title" }, this.icon && index.h("lab-ds-icon-not-selectable", { icon: this.icon, size: "medium" }), index.h("span", { class: "v4-accordion-title-text" }, this.titleAccordion)), index.h("lab-ds-icon-not-selectable", { class: "action-icon", icon: !this.openAccordion ? 'expand_more' : 'expand_less', size: "s-medium" })), this.descriptionAccordion && !this.openAccordion && index.h("div", { class: "v4-accordion-description" }, this.descriptionAccordion)), this.openAccordion && (index.h("div", { class: "v4-accordion-content" }, index.h("slot", { name: "body-accordion" }), this.titlePanel && index.h("div", { class: "v4-accordion-content-title" }, this.titlePanel), this.bodyPanel && index.h("div", { class: "v4-accordion-content-body" }, this.bodyPanel)))));
  }
};
LabDsAccordion.style = labDsAccordionCss;

exports.lab_ds_accordion = LabDsAccordion;

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