@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/accordion-item/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport classnames from 'classnames';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport '../button/button';\nimport styles from './accordion-item.styles.js';\n\n/**\n *\n * The accordion item component delivers large amounts of content in a small space\n * through progressive disclosure. That is, the user gets key details about the\n * underlying content and can choose to expand that content within the constraints\n * of the accordion item. Accordion Items work especially well on mobile interfaces or\n * whenever vertical space is at a premium.\n *\n * ## HOW TO USE\n * Avoid “nested” accordion items—that is, collapsible content within collapsible content.\n * This type of pattern goes against UX best practices.\n *\n * The Cre8 accordion item header allows for two sizes:\n * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]\n *\n * A chevron is used to indicate the “expand/collapse” action, though the entire\n * header area is clickable for the same action.\n *\n * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that\n * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.\n *\n * @slot The body of the accordion item will be any valid html\n * inserted between the cre8-accordion-item opening and closing tags.\n *\n *\n * @csspart ::part('header') - The container around the interactive header.\n * @csspart ::part('button') - The button containing the header text and the animated icon.\n * @csspart ::part('icon') - The animated icon that revolves on click.\n * @csspart ::part('body') - The container around the expanding body section.\n * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.\n *\n */\n\nexport class Cre8AccordionItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *\n   * When true, the Accordion Item is opens, when false it closes;\n   * @prop {boolean} isActive\n   *\n   */\n\n  @property({ type: Boolean, reflect: true })\n      isActive? = false;\n\n\n  /**\n   *\n   * Optional custom id for the accordion item, if one is not set, a random id is generated for you.\n   * @prop {string} accordionItemId\n   *\n   *\n   */\n  @property({ type: String, reflect: true })\n      accordionItemId?: string;\n\n  /**\n   *\n   * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text\n   * and false/undefined default the icon to the opposite side of the accordion item\n   * @prop {boolean} iconBefore\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      iconBefore?: boolean;\n\n  /**\n   *\n   * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and\n   * false/undefined renders the default secondary appearance.\n   * @prop {boolean} tertiaryIcon\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      tertiaryIcon?: boolean;\n\n  /**\n   *\n   * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].\n   * @prop {'sm' | 'lg'} size\n   *\n   *\n   */\n  @property({ reflect: true })\n      size: 'sm' | 'lg' = 'sm';\n\n  /**\n   *\n   * Purely meant to help the user structure the HTML page hierarchy. Does not change the\n   * header size. Defaults to 'h3'\n   * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant\n   *\n   *\n   */\n\n  @property({ reflect: true })\n      headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  /**\n   *\n   * Controls the text content of the Accordion Item heading.\n   * @prop {string} heading\n   *\n   *\n   */\n  @property({ type: String })\n      heading!: string;\n\n  /**\n   *\n   * Controls whether the header takes on the theme's 'brand-strong' color\n   * @prop {boolean} brandHeader\n   *\n   *\n   */\n  @property({ type: Boolean })\n      brandHeader?: boolean;\n\n  /**\n   *\n   * The aria attribute to which is assigned the id of the details section which is revealed via interaction\n   * with the header.\n   * @private _ariaControls\n   *\n   *\n   */\n  @property({ attribute: 'aria-controls' })\n  private _ariaControls!: string;\n\n  /**\n   *\n   * Private internal state which indicates the current _height of the accordion item panel.\n   * @private _height\n   *\n   *\n   */\n  @state()\n  private _height!: string;\n\n  /**\n   *\n   * Private internal state which Indicates if the accordion item panel is completely open.\n   * @private _fullyOpen\n   *\n   *\n   */\n\n  @state()\n  private _fullyOpen?: boolean;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this._ariaControls = `cre8-accordion-item-details-${randomId}`;\n      this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;\n  }\n\n  override connectedCallback() {\n      super.connectedCallback();\n      this._setContentHeight();\n      if (this.isActive) {\n          this._fullyOpen = true;\n          this._setContentHeight();\n      }\n  }\n\n  private async _setContentHeight() {\n      await this.updateComplete;\n\n      if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {\n          this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;\n      } else if (this.isActive && this._fullyOpen) {\n          this._height = 'auto';\n      } else if (!this.isActive && !this._fullyOpen) {\n          this._height = '0';\n      }\n  }\n\n  private _toggleAccordionItem() {\n      this.isActive = !this.isActive;\n\n      if (this.isActive) {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = true;\n              this._setContentHeight();\n          }, 350);\n      } else {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = false;\n              this._setContentHeight();\n          }, 50);\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-accordion-item--icon-before': this.iconBefore,\n          'cre8-c-accordion-item--small': this.size === 'sm',\n          'cre8-c-accordion-item--large': this.size === 'lg',\n      });\n\n      const buttonClassNames = classnames('cre8-c-accordion-item__button', {\n          'cre8-is-active': this.isActive,\n          'cre8-u-justify-content-start': this.iconBefore,\n          'cre8-brand-color': this.brandHeader === true,\n      });\n\n      return html` <div id=${this.accordionItemId} class=\"${componentClassNames}\">\n      <cre8-heading\n        type=${this.size === 'lg' ? 'title-large' : 'title-default'}\n        part=\"heading\"\n        ?brandColor=${(this.brandHeader)}\n        tagVariant=\"${this.headingTagVariant ?? 'h3'}\"\n        class=\"cre8-c-accordion-item__header\"\n      >\n        <button\n          class=\"${buttonClassNames}\"\n          aria-expanded=\"${ifDefined(this.isActive)}\"\n          aria-controls=\"${this._ariaControls}\"\n          part=\"button\"\n          role=\"button\"\n          id=\"${this.id}\"\n          @click=${this._toggleAccordionItem}\n        >\n          ${this.iconBefore\n        ? html`\n            <div class=\"cre8-c-accordion-item--icon-before-heading-text\">\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}\n                >\n                  <cre8-icon rotate=\"180\" svg=${svgCaretUp} aria-hidden=\"true\"></cre8-icon>\n                </div>\n                ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n            </div>\n              `\n        : html`\n          <div class=\"cre8-c-accordion-item--icon-after-heading-text\">\n            ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}\n                >\n                  <cre8-icon rotate=\"180\" svg='${svgCaretUp}' aria-hidden=\"true\"></cre8-icon>\n                </div>\n            </div>`}\n        </button>\n      </cre8-heading>\n      <div\n        class=\"cre8-c-accordion-item__body\"\n        aria-hidden=\"${!this.isActive}\"\n        id=\"${this._ariaControls}\"\n        part=\"body\"\n        style=${`height: ${this._height}`}\n      >\n        <div class=\"cre8-c-accordion-item__body-inner\" part=\"body-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-accordion-item') === undefined) {\n    customElements.define('cre8-accordion-item', Cre8AccordionItem);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion-item': Cre8AccordionItem;\n  }\n}\n\nexport default Cre8AccordionItem;\n"]}

package/lib/components/accordion-item/accordion-item.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=accordion-item.styles.d.ts.map

package/lib/components/accordion-item/accordion-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.styles.d.ts","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuyBV,CAAC;AACH,eAAe,MAAM,CAAC"}