@platformscode/core 0.0.4 → 0.0.5

package/dist/cjs/dga-accordion.cjs.entry.js

@@ -51,10 +51,10 @@ const DgaAccordion = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'ac5e87360549e69caf8c474ffed12214a8cd5990', class: `dga-accordion-item dga-accordion-item--${this.size} 
+        return (index.h("div", { key: '5594ca927b10316ac18d7e0a03fb503a1ce0b4f0', class: `dga-accordion-item dga-accordion-item--${this.size} 
           ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}
           ${this.flush ? 'dga-accordion-item--flush' : ''} 
-          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}` }, index.h("a", { key: '51bffeaa74562b96a3b0847e10b84b5fdf030fe6', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'Leading' && (index.h("div", { key: '887c9f7359529b3b549962a389955a8bb22f9256', class: "dga-accordion-item__arrow" }, index.h("i", { key: '6fccc9fa75ad4484f63342f0d3c69e0d584f7895', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } }))), index.h("div", { key: '5a76539262426c22e4af8439c652c89a10dadde9', class: "dga-accordion-item__title" }, this.title), this.iconAlignment === 'Trailing' && (index.h("div", { key: 'fc28eb3d4f46e4fe6964d2b5bae815a7b455a638', class: "dga-accordion-item__arrow" }, index.h("i", { key: 'beac26f4f872b58f4aa2406debd459e0e0bd7a6f', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } })))), index.h("div", { key: '5f28b0c24da507d731f2bc7fdbc66b3723f856e1', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, this.content)));
+          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}` }, index.h("a", { key: '7b07db942bc6a9c4b6f7853c5afd52090d2cac29', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'Leading' && (index.h("div", { key: '54ecc6efe2831344a6e114aab79f08fcb471bfa8', class: "dga-accordion-item__arrow" }, index.h("i", { key: 'd721434a4ebcc33aa6eaa56c6fefecb315c36dfc', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } }))), index.h("div", { key: '8e911c12b48ee8a65ca6509eb62db56b52d3bf30', class: "dga-accordion-item__title" }, this.title), this.iconAlignment === 'Trailing' && (index.h("div", { key: '3ccf4477d75ebc9d00b792f2e0ac4a1f4b4da67b', class: "dga-accordion-item__arrow" }, index.h("i", { key: '313621dd7f59d5a8ede3abe629a36decb3b7be16', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } })))), index.h("div", { key: '7cf868439fe89461d14799074acdba245b2a7fa4', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, this.content)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/dga-accordion.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dga-accordion.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/dga-accordion/dga-accordion.scss?tag=dga-accordion&encapsulation=shadow","src/components/dga-accordion/dga-accordion.tsx"],"sourcesContent":[".dga-accordion {\n  &-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    display: inline-block;\n    width: 100%;\n\n    &__item {\n      &:last-child {\n        border-bottom: 1px solid var(--border-neutral-primary);\n      }\n    }\n  }\n\n  &-item {\n    border-top: 1px solid var(--border-neutral-primary);\n    width: 100%; //to be edited\n    min-width: 366px;\n    z-index: 1;\n    position: relative;\n\n    &__header {\n      display: flex;\n      padding: var(--spacing-xl);\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-xl);\n      cursor: pointer;\n      border: 2px solid transparent;\n      // transition: background .2s ease-in-out;\n\n      &:hover {\n        background: var(--button-background-neutral-hovered);\n        mix-blend-mode: multiply;\n      }\n    }\n\n    &__title {\n      color: var(--text-default);\n      width: 100%;\n      @extend .text-md-semibold;\n    }\n\n    &__arrow {\n      transition: transform 0.3s ease-in-out;\n      &,\n      & > dga-icon {\n        width: 16px;\n        height: 16px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n\n    &__body {\n      display: flex;\n      align-items: flex-start;\n      padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);\n      gap: var(--spacing-md);\n      color: var(--text-primary-paragraph);\n      @extend .text-md-regular;\n      max-height: 0;\n      overflow: hidden;\n      // will-change: max-height;\n      opacity: 0;\n      transition: all 0.3s ease-in-out;\n    }\n\n    &.active &__body {\n      padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);\n      opacity: 1;\n    }\n\n    &.active &__arrow {\n      transform: rotate(180deg);\n    }\n\n    // &.focused &__header,\n    // &__header:focus {\n    //   background-color: transparent;\n    //   // border: 2px solid var(--border-black);\n    //   outline: none;\n    //   position: relative;\n    //   z-index: 1;\n    // }\n\n    &__header:focus-visible {\n      background-color: transparent;\n      border: 2px solid var(--border-black);\n      outline: none;\n      position: relative;\n      z-index: 1;\n    }\n\n    &__header:active {\n      background-color: var(--button-background-neutral-pressed);\n      outline: none;\n    }\n\n    &.disabled &__header:active,\n    &.disabled &__header:focus,\n    &.disabled &__header:hover {\n      background-color: transparent;\n      outline: none;\n      border: 2px solid transparent;\n    }\n\n    &.disabled &__title,\n    &.disabled &__arrow,\n    &.disabled &__arrow path,\n    //to be edited when add icons\n    &.disabled &__body {\n      color: var(--text-default-disabled) !important;\n      stroke: var(--text-default-disabled) !important; //to be edited when add icons\n    }\n\n    &--lg {\n      .dga-accordion-item__header {\n        padding: var(--spacing-xl);\n      }\n    }\n\n    &--md {\n      .dga-accordion-item__header {\n        padding: var(--spacing-lg) var(--spacing-xl);\n      }\n    }\n\n    &--sm {\n      .dga-accordion-item__header {\n        padding: var(--spacing-md) var(--spacing-xl);\n      }\n    }\n\n    &--flush {\n      width: 100%;\n      position: relative;\n      border-top: 0;\n      /* Create the \"cut\" border effect */\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%);\n      }\n    }\n\n    &--icon-leading {\n      .dga-accordion-item__body {\n        padding: 0 var(--spacing-none) 0 var(--spacing-6xl);\n      }\n\n      &.active .dga-accordion-item__body {\n        padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl);\n      }\n    }\n  }\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item .dga-accordion-item__body {\n  padding: 0 var(--spacing-xl) 0 var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading .dga-accordion-item__body {\n  padding: 0 var(--spacing-6xl) 0 var(--spacing-none);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none);\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\n\nexport interface AccordionItem {\n  title: string;\n  content: string;\n  size?: 'lg' | 'md' | 'sm';\n  iconAlignment?: 'Leading' | 'Trailing';\n  flush?: boolean;\n  disabled?: boolean;\n  extraClass?: string;\n}\n\n@Component({\n  tag: 'dga-accordion',\n  styleUrl: 'dga-accordion.scss',\n  shadow: true\n})\nexport class DgaAccordion {\n  @Element() el!: HTMLElement;\n\n  @Prop() title: string = '';\n  @Prop() content: string = '';\n  @Prop() size: 'lg' | 'md' | 'sm' = 'lg';\n  @Prop() iconAlignment: 'Leading' | 'Trailing' = 'Trailing';\n  @Prop() flush: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() defaultExpanded: boolean = false;\n  @Prop() extraClass: string = '';\n\n  @State() isOpen: boolean = false;\n\n  private bodyElement: HTMLElement | null = null;\n\n  private handleAccordionClick(e: MouseEvent | KeyboardEvent) {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isOpen ? this.collapseAccordion() : this.openAccordion();\n  }\n\n  private openAccordion() {\n    this.isOpen = true;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';\n    }\n  }\n\n  private collapseAccordion() {\n    this.isOpen = false;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n  }\n\n  componentDidRender() {\n    if (this.isOpen && this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 24 + 'px';\n    } else if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n\n    if (this.defaultExpanded) {\n      this.isOpen = this.defaultExpanded\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`dga-accordion-item dga-accordion-item--${this.size} \n          ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}\n          ${this.flush ? 'dga-accordion-item--flush' : ''} \n          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}`}\n      >\n        <a href=\"#\" onClick={e => this.handleAccordionClick(e)} onKeyDown={e => (e.code === 'Space' ? this.handleAccordionClick(e) : null)} class=\"dga-accordion-item__header\">\n          {this.iconAlignment === 'Leading' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n          <div class=\"dga-accordion-item__title\">{this.title}</div>\n          {this.iconAlignment === 'Trailing' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n        </a>\n        <div ref={el => (this.bodyElement = el as HTMLElement | null)} class=\"dga-accordion-item__body\">\n          {this.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dga-accordion.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/dga-accordion/dga-accordion.scss?tag=dga-accordion&encapsulation=shadow","src/components/dga-accordion/dga-accordion.tsx"],"sourcesContent":[".dga-accordion {\n  &-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    display: inline-block;\n    width: 100%;\n\n    &__item {\n      &:last-child {\n        border-bottom: 1px solid var(--border-neutral-primary);\n      }\n    }\n  }\n\n  &-item {\n    border-top: 1px solid var(--border-neutral-primary);\n    width: 100%; //to be edited\n    min-width: 366px;\n    z-index: 1;\n    position: relative;\n\n    &__header {\n      display: flex;\n      padding: var(--spacing-xl);\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-xl);\n      cursor: pointer;\n      border: 2px solid transparent;\n      // transition: background .2s ease-in-out;\n\n      &:hover {\n        background: var(--button-background-neutral-hovered);\n        mix-blend-mode: multiply;\n      }\n    }\n\n    &__title {\n      color: var(--text-default);\n      width: 100%;\n      @extend .text-md-semibold;\n    }\n\n    &__arrow {\n      transition: transform 0.3s ease-in-out;\n      &,\n      & > dga-icon {\n        width: 16px;\n        height: 16px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n\n    &__body {\n      display: flex;\n      align-items: flex-start;\n      padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);\n      gap: var(--spacing-md);\n      color: var(--text-primary-paragraph);\n      @extend .text-md-regular;\n      max-height: 0;\n      overflow: hidden;\n      // will-change: max-height;\n      opacity: 0;\n      transition: all 0.3s ease-in-out;\n    }\n\n    &.active &__body {\n      padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);\n      opacity: 1;\n    }\n\n    &.active &__arrow {\n      transform: rotate(180deg);\n    }\n\n    // &.focused &__header,\n    // &__header:focus {\n    //   background-color: transparent;\n    //   // border: 2px solid var(--border-black);\n    //   outline: none;\n    //   position: relative;\n    //   z-index: 1;\n    // }\n\n    &__header:focus-visible {\n      background-color: transparent;\n      border: 2px solid var(--border-black);\n      outline: none;\n      position: relative;\n      z-index: 1;\n    }\n\n    &__header:active {\n      background-color: var(--button-background-neutral-pressed);\n      outline: none;\n    }\n\n    &.disabled &__header:active,\n    &.disabled &__header:focus,\n    &.disabled &__header:hover {\n      background-color: transparent;\n      outline: none;\n      border: 2px solid transparent;\n    }\n\n    &.disabled &__title,\n    &.disabled &__arrow,\n    &.disabled &__arrow path,\n    //to be edited when add icons\n    &.disabled &__body {\n      color: var(--text-default-disabled) !important;\n      stroke: var(--text-default-disabled) !important; //to be edited when add icons\n    }\n\n    &--lg {\n      .dga-accordion-item__header {\n        padding: var(--spacing-xl);\n      }\n    }\n\n    &--md {\n      .dga-accordion-item__header {\n        padding: var(--spacing-lg) var(--spacing-xl);\n      }\n    }\n\n    &--sm {\n      .dga-accordion-item__header {\n        padding: var(--spacing-md) var(--spacing-xl);\n      }\n    }\n\n    &--flush {\n      width: 100%;\n      position: relative;\n      border-top: 0;\n      /* Create the \"cut\" border effect */\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%);\n      }\n    }\n\n    &--icon-leading {\n      .dga-accordion-item__body {\n        padding: 0 var(--spacing-none) 0 var(--spacing-6xl);\n      }\n\n      &.active .dga-accordion-item__body {\n        padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl);\n      }\n    }\n  }\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item .dga-accordion-item__body {\n  padding: 0 var(--spacing-xl) 0 var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading .dga-accordion-item__body {\n  padding: 0 var(--spacing-6xl) 0 var(--spacing-none);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none);\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\nimport { StripHTML } from '../../utils';\n\nexport interface AccordionItem {\n  title: string;\n  content: string;\n  size?: 'lg' | 'md' | 'sm';\n  iconAlignment?: 'Leading' | 'Trailing';\n  flush?: boolean;\n  disabled?: boolean;\n  extraClass?: string;\n}\n\n\nexport interface IDgaAccordion {\n  title: string;\n  content: string;\n  size: 'lg' | 'md' | 'sm';\n  iconAlignment: 'Leading' | 'Trailing';\n  flush: boolean;\n  disabled: boolean;\n  defaultExpanded: boolean;\n  extraClass: string;\n}\n\n@Component({\n  tag: 'dga-accordion',\n  styleUrl: 'dga-accordion.scss',\n  shadow: true\n})\nexport class DgaAccordion implements StripHTML<IDgaAccordion>  {\n  @Element() el!: HTMLElement;\n\n  @Prop() title: string = '';\n  @Prop() content: string = '';\n  @Prop() size: 'lg' | 'md' | 'sm' = 'lg';\n  @Prop() iconAlignment: 'Leading' | 'Trailing' = 'Trailing';\n  @Prop() flush: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() defaultExpanded: boolean = false;\n  @Prop() extraClass: string = '';\n\n  @State() isOpen: boolean = false;\n\n  private bodyElement: HTMLElement | null = null;\n\n  private handleAccordionClick(e: MouseEvent | KeyboardEvent) {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isOpen ? this.collapseAccordion() : this.openAccordion();\n  }\n\n  private openAccordion() {\n    this.isOpen = true;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';\n    }\n  }\n\n  private collapseAccordion() {\n    this.isOpen = false;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n  }\n\n  componentDidRender() {\n    if (this.isOpen && this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 24 + 'px';\n    } else if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n\n    if (this.defaultExpanded) {\n      this.isOpen = this.defaultExpanded\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`dga-accordion-item dga-accordion-item--${this.size} \n          ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}\n          ${this.flush ? 'dga-accordion-item--flush' : ''} \n          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}`}\n      >\n        <a href=\"#\" onClick={e => this.handleAccordionClick(e)} onKeyDown={e => (e.code === 'Space' ? this.handleAccordionClick(e) : null)} class=\"dga-accordion-item__header\">\n          {this.iconAlignment === 'Leading' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n          <div class=\"dga-accordion-item__title\">{this.title}</div>\n          {this.iconAlignment === 'Trailing' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n        </a>\n        <div ref={el => (this.bodyElement = el as HTMLElement | null)} class=\"dga-accordion-item__body\">\n          {this.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/dga-avatar.cjs.entry.js

@@ -28,7 +28,7 @@ const DgaAvatar = class {
             return (index.h("div", { class: "dga-avatar__icon" }, index.h("dga-icon", { icon: ((_a = this.icon) === null || _a === void 0 ? void 0 : _a.name) || "", variant: (_b = this.icon) === null || _b === void 0 ? void 0 : _b.variant, type: (_c = this.icon) === null || _c === void 0 ? void 0 : _c.type, color: (_d = this.icon) === null || _d === void 0 ? void 0 : _d.color })));
     }
     render() {
-        return (index.h("div", { key: 'e77346a851de430fba13516fe309946858814adf', class: {
+        return (index.h("div", { key: '26147409db8cf5c058aa5d8aa9bf5eeefb0c44b1', class: {
                 'dga-avatar': true,
                 [`dga-avatar--${this.type}`]: true,
                 [`dga-avatar--${this.size}`]: true,

package/dist/cjs/dga-avatar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dga-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,kylFAAkylF,CAAC;AACxzlF,wBAAe,YAAY;;MCuBd,SAAS;IANtB;;QAOU,SAAI,GAAgB,MAAM,CAAC;QAC3B,SAAI,GAAgB,EAAE,CAAC;QACQ,WAAM,GAAa,KAAK,CAAC;QACzB,WAAM,GAAa,KAAK,CAAC;QACxD,SAAI,GAAY,IAAI,CAAC;QACrB,WAAM,GAAY,wBAAwB,CAAC;QAC3C,QAAG,GAAY,EAAE,CAAC;KA8B3B;IA3BS,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;YAAE,OAAOA,kBAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;QACvF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAOA,iBAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;QACnG,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YACtB,QACEA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,sBAAU,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,EAAE,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAI,CAClH,EACN;KACL;IAED,MAAM;QAEJ,QACEA,kEACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,oBAAoB,EAAE,IAAI,CAAC,MAAM;aAClC,IAEA,IAAI,CAAC,oBAAoB,EAAE,CACxB,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/dga-avatar/dga-avatar.scss?tag=dga-avatar","src/components/dga-avatar/dga-avatar.tsx"],"sourcesContent":["$avatar_sizes: (\n  120: (\n    'display-md-regular',\n    80,\n  ),\n  80: (\n    'display-sm-regular',\n    56,\n  ),\n  68: (\n    'text-xl-medium',\n    40,\n  ),\n  48: (\n    'text-md-medium',\n    32,\n  ),\n  40: (\n    'text-sm-semibold',\n    32,\n  ),\n  32: (\n    'text-xs-semibold',\n    24,\n  ),\n  24: (\n    'text-2xs-bold',\n    16,\n  ),\n);\n\n.dga-avatar {\n  border-radius: var(--radius-full);\n  border: 2px solid var(--border-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--button-background-neutral-default);\n  overflow: hidden;\n\n  &--initials {\n    // border: 4px solid var(--colors-border-white, #FFF);\n  }\n\n  &--image {\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &--square {\n    border-radius: var(--radius-8);\n  }\n\n  // &--border {\n  //   border: 2px solid var(--alpha-black-20, rgba(22, 22, 22, 0.20));\n  // }\n\n  @each $size, $properties in $avatar_sizes {\n    $text: nth($properties, 1);\n    $icon_size: nth($properties, 2);\n\n    &--#{$size} {\n      width: #{$size}px;\n      height: #{$size}px;\n\n      @if ($size == 120) {\n        border-width: 4px;\n      }\n\n      & .dga-avatar__text {\n        @extend .#{$text};\n        text-transform: uppercase;\n      }\n      & .dga-avatar__icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: #{$icon_size}px;\n        height: #{$icon_size}px;\n        font-size: #{$icon_size}px;\n        & > * {\n          width: 100%;\n          height: 100%;\n          font-size: #{$icon_size}px;\n        }\n      }\n    }\n  }\n}\n","// import { UserIcon } from '@hugeicons/react-pro';\nimport { Component, Prop, h } from '@stencil/core';\n\nexport type AvatarType = 'initials' | 'image' | 'icon';\nexport type AvatarSize = 120 | 80 | 68 | 48 | 40 | 32 | 24;\n\nexport interface Icon {\n  name: string; \n  size?: number;\n  color?: string;\n  variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk';\n  type?: 'rounded' | 'sharp' | 'standard';\n}\n\nexport interface CustomAttribute {\n  key: string;\n  value: string;\n}\n@Component({\n  tag: 'dga-avatar',\n  styleUrl: 'dga-avatar.scss',\n  // shadow: true,\n  // scoped: true,\n})\nexport class DgaAvatar {\n  @Prop() type?: AvatarType = 'icon';\n  @Prop() size?: AvatarSize = 32;\n  @Prop({mutable: true , reflect: true}) square?: boolean = false;\n  @Prop({mutable: true , reflect: true}) border?: boolean = false;\n  @Prop() text?: string = 'AB';\n  @Prop() imgUrl?: string = '/assets/avatar-img.png';\n  @Prop() alt?: string = '';\n  @Prop() icon?: Icon;\n\n  private renderChildComponent() {\n    if (this.type === 'initials') return <span class=\"dga-avatar__text\">{this.text}</span>;\n    if (this.type === 'image') return <img class=\"dga-avatar__img\" src={this.imgUrl} alt={this.alt} />;\n    if (this.type === 'icon')\n      return (\n        <div class=\"dga-avatar__icon\">\n          <dga-icon icon={this.icon?.name || \"\"} variant={this.icon?.variant} type={this.icon?.type} color={this.icon?.color} />\n        </div>\n      );\n  }\n\n  render() {\n\n    return (\n      <div\n        class={{\n          'dga-avatar': true,\n          [`dga-avatar--${this.type}`]: true,\n          [`dga-avatar--${this.size}`]: true,\n          'dga-avatar--square': this.square,\n          'dga-avatar--border': this.border,\n        }}\n      >\n        {this.renderChildComponent()}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dga-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,kylFAAkylF,CAAC;AACxzlF,wBAAe,YAAY;;MCsCd,SAAS;IANtB;;QAOU,SAAI,GAAgB,MAAM,CAAC;QAC3B,SAAI,GAAgB,EAAE,CAAC;QACQ,WAAM,GAAa,KAAK,CAAC;QACzB,WAAM,GAAa,KAAK,CAAC;QACxD,SAAI,GAAY,IAAI,CAAC;QACrB,WAAM,GAAY,wBAAwB,CAAC;QAC3C,QAAG,GAAY,EAAE,CAAC;KA8B3B;IA3BS,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;YAAE,OAAOA,kBAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;QACvF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAOA,iBAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;QACnG,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YACtB,QACEA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,sBAAU,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,EAAE,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAI,CAClH,EACN;KACL;IAED,MAAM;QAEJ,QACEA,kEACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,oBAAoB,EAAE,IAAI,CAAC,MAAM;aAClC,IAEA,IAAI,CAAC,oBAAoB,EAAE,CACxB,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/dga-avatar/dga-avatar.scss?tag=dga-avatar","src/components/dga-avatar/dga-avatar.tsx"],"sourcesContent":["$avatar_sizes: (\n  120: (\n    'display-md-regular',\n    80,\n  ),\n  80: (\n    'display-sm-regular',\n    56,\n  ),\n  68: (\n    'text-xl-medium',\n    40,\n  ),\n  48: (\n    'text-md-medium',\n    32,\n  ),\n  40: (\n    'text-sm-semibold',\n    32,\n  ),\n  32: (\n    'text-xs-semibold',\n    24,\n  ),\n  24: (\n    'text-2xs-bold',\n    16,\n  ),\n);\n\n.dga-avatar {\n  border-radius: var(--radius-full);\n  border: 2px solid var(--border-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--button-background-neutral-default);\n  overflow: hidden;\n\n  &--initials {\n    // border: 4px solid var(--colors-border-white, #FFF);\n  }\n\n  &--image {\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &--square {\n    border-radius: var(--radius-8);\n  }\n\n  // &--border {\n  //   border: 2px solid var(--alpha-black-20, rgba(22, 22, 22, 0.20));\n  // }\n\n  @each $size, $properties in $avatar_sizes {\n    $text: nth($properties, 1);\n    $icon_size: nth($properties, 2);\n\n    &--#{$size} {\n      width: #{$size}px;\n      height: #{$size}px;\n\n      @if ($size == 120) {\n        border-width: 4px;\n      }\n\n      & .dga-avatar__text {\n        @extend .#{$text};\n        text-transform: uppercase;\n      }\n      & .dga-avatar__icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: #{$icon_size}px;\n        height: #{$icon_size}px;\n        font-size: #{$icon_size}px;\n        & > * {\n          width: 100%;\n          height: 100%;\n          font-size: #{$icon_size}px;\n        }\n      }\n    }\n  }\n}\n","// import { UserIcon } from '@hugeicons/react-pro';\nimport { Component, Prop, h } from '@stencil/core';\nimport { StripHTML } from '../../utils';\n\nexport type AvatarType = 'initials' | 'image' | 'icon';\nexport type AvatarSize = 120 | 80 | 68 | 48 | 40 | 32 | 24;\n\nexport interface Icon {\n  name: string; \n  size?: number;\n  color?: string;\n  variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk';\n  type?: 'rounded' | 'sharp' | 'standard';\n}\n\nexport interface CustomAttribute {\n  key: string;\n  value: string;\n}\n\n\nexport interface IDgaAvatar {\n  type?: AvatarType;\n  size?: AvatarSize;\n  square?: boolean;\n  border?: boolean ;\n  text?: string ;\n  imgUrl?: string;\n  alt?: string;\n  icon?: Icon;\n}\n\n\n@Component({\n  tag: 'dga-avatar',\n  styleUrl: 'dga-avatar.scss',\n  // shadow: true,\n  // scoped: true,\n})\nexport class DgaAvatar implements StripHTML<IDgaAvatar> {\n  @Prop() type?: AvatarType = 'icon';\n  @Prop() size?: AvatarSize = 32;\n  @Prop({mutable: true , reflect: true}) square?: boolean = false;\n  @Prop({mutable: true , reflect: true}) border?: boolean = false;\n  @Prop() text?: string = 'AB';\n  @Prop() imgUrl?: string = '/assets/avatar-img.png';\n  @Prop() alt?: string = '';\n  @Prop() icon?: Icon;\n\n  private renderChildComponent() {\n    if (this.type === 'initials') return <span class=\"dga-avatar__text\">{this.text}</span>;\n    if (this.type === 'image') return <img class=\"dga-avatar__img\" src={this.imgUrl} alt={this.alt} />;\n    if (this.type === 'icon')\n      return (\n        <div class=\"dga-avatar__icon\">\n          <dga-icon icon={this.icon?.name || \"\"} variant={this.icon?.variant} type={this.icon?.type} color={this.icon?.color} />\n        </div>\n      );\n  }\n\n  render() {\n\n    return (\n      <div\n        class={{\n          'dga-avatar': true,\n          [`dga-avatar--${this.type}`]: true,\n          [`dga-avatar--${this.size}`]: true,\n          'dga-avatar--square': this.square,\n          'dga-avatar--border': this.border,\n        }}\n      >\n        {this.renderChildComponent()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/index-ef15ef00.js.map

@@ -1 +1 @@
-{"file":"index-ef15ef00.js","mappings":";;MAAa,IAAI,GAAG;IAClB,MAAM,IAAI,GAAW,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB;;;;","names":[],"sources":["src/utils/index.ts"],"sourcesContent":["export const guid = (): string => {\n  const head: string = Date.now().toString(36);\n  const tail: string = Math.random().toString(36).substring(2);\n  return head + tail;\n};\n"],"version":3}
+{"file":"index-ef15ef00.js","mappings":";;MAEa,IAAI,GAAG;IAClB,MAAM,IAAI,GAAW,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB;;;;","names":[],"sources":["src/utils/index.ts"],"sourcesContent":["import { JSX } from '@stencil/core';\n\nexport const guid = (): string => {\n  const head: string = Date.now().toString(36);\n  const tail: string = Math.random().toString(36).substring(2);\n  return head + tail;\n};\n\n\n\nexport type StripHTML<T> = Omit<T, keyof JSX.Element>;"],"version":3}

package/dist/collection/components/dga-accordion/dga-accordion.js

@@ -42,10 +42,10 @@ export class DgaAccordion {
         }
     }
     render() {
-        return (h("div", { key: 'ac5e87360549e69caf8c474ffed12214a8cd5990', class: `dga-accordion-item dga-accordion-item--${this.size} 
+        return (h("div", { key: '5594ca927b10316ac18d7e0a03fb503a1ce0b4f0', class: `dga-accordion-item dga-accordion-item--${this.size} 
           ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}
           ${this.flush ? 'dga-accordion-item--flush' : ''} 
-          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}` }, h("a", { key: '51bffeaa74562b96a3b0847e10b84b5fdf030fe6', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'Leading' && (h("div", { key: '887c9f7359529b3b549962a389955a8bb22f9256', class: "dga-accordion-item__arrow" }, h("i", { key: '6fccc9fa75ad4484f63342f0d3c69e0d584f7895', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } }))), h("div", { key: '5a76539262426c22e4af8439c652c89a10dadde9', class: "dga-accordion-item__title" }, this.title), this.iconAlignment === 'Trailing' && (h("div", { key: 'fc28eb3d4f46e4fe6964d2b5bae815a7b455a638', class: "dga-accordion-item__arrow" }, h("i", { key: 'beac26f4f872b58f4aa2406debd459e0e0bd7a6f', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } })))), h("div", { key: '5f28b0c24da507d731f2bc7fdbc66b3723f856e1', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, this.content)));
+          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}` }, h("a", { key: '7b07db942bc6a9c4b6f7853c5afd52090d2cac29', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'Leading' && (h("div", { key: '54ecc6efe2831344a6e114aab79f08fcb471bfa8', class: "dga-accordion-item__arrow" }, h("i", { key: 'd721434a4ebcc33aa6eaa56c6fefecb315c36dfc', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } }))), h("div", { key: '8e911c12b48ee8a65ca6509eb62db56b52d3bf30', class: "dga-accordion-item__title" }, this.title), this.iconAlignment === 'Trailing' && (h("div", { key: '3ccf4477d75ebc9d00b792f2e0ac4a1f4b4da67b', class: "dga-accordion-item__arrow" }, h("i", { key: '313621dd7f59d5a8ede3abe629a36decb3b7be16', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } })))), h("div", { key: '7cf868439fe89461d14799074acdba245b2a7fa4', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, this.content)));
     }
     static get is() { return "dga-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-accordion/dga-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"dga-accordion.js","sourceRoot":"","sources":["../../../src/components/dga-accordion/dga-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAiBnE,MAAM,OAAO,YAAY;IALzB;QAQU,UAAK,GAAW,EAAE,CAAC;QACnB,YAAO,GAAW,EAAE,CAAC;QACrB,SAAI,GAAuB,IAAI,CAAC;QAChC,kBAAa,GAA2B,UAAU,CAAC;QACnD,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAC1B,oBAAe,GAAY,KAAK,CAAC;QACjC,eAAU,GAAW,EAAE,CAAC;QAEvB,WAAM,GAAY,KAAK,CAAC;QAEzB,gBAAW,GAAuB,IAAI,CAAC;KA6DhD;IA3DS,oBAAoB,CAAC,CAA6B;QACxD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAChE,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC;QAC1E,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACpC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC;QAC/E,CAAC;aAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;QAC1C,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAA;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,0CAA0C,IAAI,CAAC,IAAI;YACtD,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE;YAC1E,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YAC7C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAEvF,0DAAG,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,4BAA4B;gBACnK,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,CACnC,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,0DAAG,KAAK,EAAC,8BAA8B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAI,CACnE,CACP;gBACD,4DAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,KAAK,CAAO;gBACxD,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,CACpC,4DAAK,KAAK,EAAC,2BAA2B;oBACpC,0DAAG,KAAK,EAAC,8BAA8B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAI,CACnE,CACP,CACC;YACJ,4DAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAAE,KAAK,EAAC,0BAA0B,IAC5F,IAAI,CAAC,OAAO,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h, Element } from '@stencil/core';\n\nexport interface AccordionItem {\n  title: string;\n  content: string;\n  size?: 'lg' | 'md' | 'sm';\n  iconAlignment?: 'Leading' | 'Trailing';\n  flush?: boolean;\n  disabled?: boolean;\n  extraClass?: string;\n}\n\n@Component({\n  tag: 'dga-accordion',\n  styleUrl: 'dga-accordion.scss',\n  shadow: true\n})\nexport class DgaAccordion {\n  @Element() el!: HTMLElement;\n\n  @Prop() title: string = '';\n  @Prop() content: string = '';\n  @Prop() size: 'lg' | 'md' | 'sm' = 'lg';\n  @Prop() iconAlignment: 'Leading' | 'Trailing' = 'Trailing';\n  @Prop() flush: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() defaultExpanded: boolean = false;\n  @Prop() extraClass: string = '';\n\n  @State() isOpen: boolean = false;\n\n  private bodyElement: HTMLElement | null = null;\n\n  private handleAccordionClick(e: MouseEvent | KeyboardEvent) {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isOpen ? this.collapseAccordion() : this.openAccordion();\n  }\n\n  private openAccordion() {\n    this.isOpen = true;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';\n    }\n  }\n\n  private collapseAccordion() {\n    this.isOpen = false;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n  }\n\n  componentDidRender() {\n    if (this.isOpen && this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 24 + 'px';\n    } else if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n\n    if (this.defaultExpanded) {\n      this.isOpen = this.defaultExpanded\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`dga-accordion-item dga-accordion-item--${this.size} \n          ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}\n          ${this.flush ? 'dga-accordion-item--flush' : ''} \n          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}`}\n      >\n        <a href=\"#\" onClick={e => this.handleAccordionClick(e)} onKeyDown={e => (e.code === 'Space' ? this.handleAccordionClick(e) : null)} class=\"dga-accordion-item__header\">\n          {this.iconAlignment === 'Leading' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n          <div class=\"dga-accordion-item__title\">{this.title}</div>\n          {this.iconAlignment === 'Trailing' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n        </a>\n        <div ref={el => (this.bodyElement = el as HTMLElement | null)} class=\"dga-accordion-item__body\">\n          {this.content}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dga-accordion.js","sourceRoot":"","sources":["../../../src/components/dga-accordion/dga-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Element } from '@stencil/core';\nimport { StripHTML } from '../../utils';\n\nexport interface AccordionItem {\n  title: string;\n  content: string;\n  size?: 'lg' | 'md' | 'sm';\n  iconAlignment?: 'Leading' | 'Trailing';\n  flush?: boolean;\n  disabled?: boolean;\n  extraClass?: string;\n}\n\n\nexport interface IDgaAccordion {\n  title: string;\n  content: string;\n  size: 'lg' | 'md' | 'sm';\n  iconAlignment: 'Leading' | 'Trailing';\n  flush: boolean;\n  disabled: boolean;\n  defaultExpanded: boolean;\n  extraClass: string;\n}\n\n@Component({\n  tag: 'dga-accordion',\n  styleUrl: 'dga-accordion.scss',\n  shadow: true\n})\nexport class DgaAccordion implements StripHTML<IDgaAccordion>  {\n  @Element() el!: HTMLElement;\n\n  @Prop() title: string = '';\n  @Prop() content: string = '';\n  @Prop() size: 'lg' | 'md' | 'sm' = 'lg';\n  @Prop() iconAlignment: 'Leading' | 'Trailing' = 'Trailing';\n  @Prop() flush: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() defaultExpanded: boolean = false;\n  @Prop() extraClass: string = '';\n\n  @State() isOpen: boolean = false;\n\n  private bodyElement: HTMLElement | null = null;\n\n  private handleAccordionClick(e: MouseEvent | KeyboardEvent) {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isOpen ? this.collapseAccordion() : this.openAccordion();\n  }\n\n  private openAccordion() {\n    this.isOpen = true;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';\n    }\n  }\n\n  private collapseAccordion() {\n    this.isOpen = false;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n  }\n\n  componentDidRender() {\n    if (this.isOpen && this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 24 + 'px';\n    } else if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n\n    if (this.defaultExpanded) {\n      this.isOpen = this.defaultExpanded\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`dga-accordion-item dga-accordion-item--${this.size} \n          ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}\n          ${this.flush ? 'dga-accordion-item--flush' : ''} \n          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}`}\n      >\n        <a href=\"#\" onClick={e => this.handleAccordionClick(e)} onKeyDown={e => (e.code === 'Space' ? this.handleAccordionClick(e) : null)} class=\"dga-accordion-item__header\">\n          {this.iconAlignment === 'Leading' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n          <div class=\"dga-accordion-item__title\">{this.title}</div>\n          {this.iconAlignment === 'Trailing' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n        </a>\n        <div ref={el => (this.bodyElement = el as HTMLElement | null)} class=\"dga-accordion-item__body\">\n          {this.content}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/dga-avatar/dga-avatar.js

@@ -20,7 +20,7 @@ export class DgaAvatar {
             return (h("div", { class: "dga-avatar__icon" }, h("dga-icon", { icon: ((_a = this.icon) === null || _a === void 0 ? void 0 : _a.name) || "", variant: (_b = this.icon) === null || _b === void 0 ? void 0 : _b.variant, type: (_c = this.icon) === null || _c === void 0 ? void 0 : _c.type, color: (_d = this.icon) === null || _d === void 0 ? void 0 : _d.color })));
     }
     render() {
-        return (h("div", { key: 'e77346a851de430fba13516fe309946858814adf', class: {
+        return (h("div", { key: '26147409db8cf5c058aa5d8aa9bf5eeefb0c44b1', class: {
                 'dga-avatar': true,
                 [`dga-avatar--${this.type}`]: true,
                 [`dga-avatar--${this.size}`]: true,

package/dist/collection/components/dga-avatar/dga-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"dga-avatar.js","sourceRoot":"","sources":["../../../src/components/dga-avatar/dga-avatar.tsx"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAuBnD,MAAM,OAAO,SAAS;IANtB;QAOU,SAAI,GAAgB,MAAM,CAAC;QAC3B,SAAI,GAAgB,EAAE,CAAC;QACQ,WAAM,GAAa,KAAK,CAAC;QACzB,WAAM,GAAa,KAAK,CAAC;QACxD,SAAI,GAAY,IAAI,CAAC;QACrB,WAAM,GAAY,wBAAwB,CAAC;QAC3C,QAAG,GAAY,EAAE,CAAC;KA8B3B;IA3BS,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;YAAE,OAAO,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;QACvF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAO,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;QACnG,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YACtB,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,gBAAU,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,EAAE,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAI,CAClH,CACP,CAAC;IACN,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAClC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,oBAAoB,EAAE,IAAI,CAAC,MAAM;aAClC,IAEA,IAAI,CAAC,oBAAoB,EAAE,CACxB,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// import { UserIcon } from '@hugeicons/react-pro';\nimport { Component, Prop, h } from '@stencil/core';\n\nexport type AvatarType = 'initials' | 'image' | 'icon';\nexport type AvatarSize = 120 | 80 | 68 | 48 | 40 | 32 | 24;\n\nexport interface Icon {\n  name: string; \n  size?: number;\n  color?: string;\n  variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk';\n  type?: 'rounded' | 'sharp' | 'standard';\n}\n\nexport interface CustomAttribute {\n  key: string;\n  value: string;\n}\n@Component({\n  tag: 'dga-avatar',\n  styleUrl: 'dga-avatar.scss',\n  // shadow: true,\n  // scoped: true,\n})\nexport class DgaAvatar {\n  @Prop() type?: AvatarType = 'icon';\n  @Prop() size?: AvatarSize = 32;\n  @Prop({mutable: true , reflect: true}) square?: boolean = false;\n  @Prop({mutable: true , reflect: true}) border?: boolean = false;\n  @Prop() text?: string = 'AB';\n  @Prop() imgUrl?: string = '/assets/avatar-img.png';\n  @Prop() alt?: string = '';\n  @Prop() icon?: Icon;\n\n  private renderChildComponent() {\n    if (this.type === 'initials') return <span class=\"dga-avatar__text\">{this.text}</span>;\n    if (this.type === 'image') return <img class=\"dga-avatar__img\" src={this.imgUrl} alt={this.alt} />;\n    if (this.type === 'icon')\n      return (\n        <div class=\"dga-avatar__icon\">\n          <dga-icon icon={this.icon?.name || \"\"} variant={this.icon?.variant} type={this.icon?.type} color={this.icon?.color} />\n        </div>\n      );\n  }\n\n  render() {\n\n    return (\n      <div\n        class={{\n          'dga-avatar': true,\n          [`dga-avatar--${this.type}`]: true,\n          [`dga-avatar--${this.size}`]: true,\n          'dga-avatar--square': this.square,\n          'dga-avatar--border': this.border,\n        }}\n      >\n        {this.renderChildComponent()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dga-avatar.js","sourceRoot":"","sources":["../../../src/components/dga-avatar/dga-avatar.tsx"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAsCnD,MAAM,OAAO,SAAS;IANtB;QAOU,SAAI,GAAgB,MAAM,CAAC;QAC3B,SAAI,GAAgB,EAAE,CAAC;QACQ,WAAM,GAAa,KAAK,CAAC;QACzB,WAAM,GAAa,KAAK,CAAC;QACxD,SAAI,GAAY,IAAI,CAAC;QACrB,WAAM,GAAY,wBAAwB,CAAC;QAC3C,QAAG,GAAY,EAAE,CAAC;KA8B3B;IA3BS,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;YAAE,OAAO,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;QACvF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAO,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;QACnG,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YACtB,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;gBAC3B,gBAAU,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,EAAE,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAI,CAClH,CACP,CAAC;IACN,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAClC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,oBAAoB,EAAE,IAAI,CAAC,MAAM;aAClC,IAEA,IAAI,CAAC,oBAAoB,EAAE,CACxB,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// import { UserIcon } from '@hugeicons/react-pro';\nimport { Component, Prop, h } from '@stencil/core';\nimport { StripHTML } from '../../utils';\n\nexport type AvatarType = 'initials' | 'image' | 'icon';\nexport type AvatarSize = 120 | 80 | 68 | 48 | 40 | 32 | 24;\n\nexport interface Icon {\n  name: string; \n  size?: number;\n  color?: string;\n  variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk';\n  type?: 'rounded' | 'sharp' | 'standard';\n}\n\nexport interface CustomAttribute {\n  key: string;\n  value: string;\n}\n\n\nexport interface IDgaAvatar {\n  type?: AvatarType;\n  size?: AvatarSize;\n  square?: boolean;\n  border?: boolean ;\n  text?: string ;\n  imgUrl?: string;\n  alt?: string;\n  icon?: Icon;\n}\n\n\n@Component({\n  tag: 'dga-avatar',\n  styleUrl: 'dga-avatar.scss',\n  // shadow: true,\n  // scoped: true,\n})\nexport class DgaAvatar implements StripHTML<IDgaAvatar> {\n  @Prop() type?: AvatarType = 'icon';\n  @Prop() size?: AvatarSize = 32;\n  @Prop({mutable: true , reflect: true}) square?: boolean = false;\n  @Prop({mutable: true , reflect: true}) border?: boolean = false;\n  @Prop() text?: string = 'AB';\n  @Prop() imgUrl?: string = '/assets/avatar-img.png';\n  @Prop() alt?: string = '';\n  @Prop() icon?: Icon;\n\n  private renderChildComponent() {\n    if (this.type === 'initials') return <span class=\"dga-avatar__text\">{this.text}</span>;\n    if (this.type === 'image') return <img class=\"dga-avatar__img\" src={this.imgUrl} alt={this.alt} />;\n    if (this.type === 'icon')\n      return (\n        <div class=\"dga-avatar__icon\">\n          <dga-icon icon={this.icon?.name || \"\"} variant={this.icon?.variant} type={this.icon?.type} color={this.icon?.color} />\n        </div>\n      );\n  }\n\n  render() {\n\n    return (\n      <div\n        class={{\n          'dga-avatar': true,\n          [`dga-avatar--${this.type}`]: true,\n          [`dga-avatar--${this.size}`]: true,\n          'dga-avatar--square': this.square,\n          'dga-avatar--border': this.border,\n        }}\n      >\n        {this.renderChildComponent()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,GAAW,EAAE;IAC/B,MAAM,IAAI,GAAW,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB,CAAC,CAAC","sourcesContent":["export const guid = (): string => {\n  const head: string = Date.now().toString(36);\n  const tail: string = Math.random().toString(36).substring(2);\n  return head + tail;\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,IAAI,GAAG,GAAW,EAAE;IAC/B,MAAM,IAAI,GAAW,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { JSX } from '@stencil/core';\n\nexport const guid = (): string => {\n  const head: string = Date.now().toString(36);\n  const tail: string = Math.random().toString(36).substring(2);\n  return head + tail;\n};\n\n\n\nexport type StripHTML<T> = Omit<T, keyof JSX.Element>;"]}

package/dist/components/dga-accordion-usage.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-604af0ee.js';
-import { d as defineCustomElement$2 } from './p-4631cddd.js';
+import { d as defineCustomElement$2 } from './p-c31de0f8.js';
 
 const DgaAccordionUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaAccordionUsage extends H {
     constructor() {

package/dist/components/dga-accordion.js

@@ -1,4 +1,4 @@
-import { D as DgaAccordion$1, d as defineCustomElement$1 } from './p-4631cddd.js';
+import { D as DgaAccordion$1, d as defineCustomElement$1 } from './p-c31de0f8.js';
 
 const DgaAccordion = DgaAccordion$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dga-avatar-usage.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-604af0ee.js';
-import { d as defineCustomElement$4 } from './p-457d4b2d.js';
+import { d as defineCustomElement$4 } from './p-9d83601a.js';
 import { d as defineCustomElement$3 } from './p-496a2760.js';
 import { d as defineCustomElement$2 } from './p-888b8e69.js';
 

package/dist/components/dga-avatar.js

@@ -1,4 +1,4 @@
-import { D as DgaAvatar$1, d as defineCustomElement$1 } from './p-457d4b2d.js';
+import { D as DgaAvatar$1, d as defineCustomElement$1 } from './p-9d83601a.js';
 
 const DgaAvatar = DgaAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dga-quote-usage.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h } from './p-604af0ee.js';
-import { d as defineCustomElement$5 } from './p-457d4b2d.js';
+import { d as defineCustomElement$5 } from './p-9d83601a.js';
 import { d as defineCustomElement$4 } from './p-f3661a84.js';
 import { d as defineCustomElement$3 } from './p-888b8e69.js';
-import { d as defineCustomElement$2 } from './p-37b7ef20.js';
+import { d as defineCustomElement$2 } from './p-0f2bfcea.js';
 
 const DgaQuoteUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaQuoteUsage extends H {
     constructor() {

package/dist/components/dga-quote.js

@@ -1,4 +1,4 @@
-import { D as DgaQuote$1, d as defineCustomElement$1 } from './p-37b7ef20.js';
+import { D as DgaQuote$1, d as defineCustomElement$1 } from './p-0f2bfcea.js';
 
 const DgaQuote = DgaQuote$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-37b7ef20.js → p-0f2bfcea.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-604af0ee.js';
-import { d as defineCustomElement$3 } from './p-457d4b2d.js';
+import { d as defineCustomElement$3 } from './p-9d83601a.js';
 import { d as defineCustomElement$2 } from './p-f3661a84.js';
 import { d as defineCustomElement$1 } from './p-888b8e69.js';
 
@@ -68,4 +68,4 @@ function defineCustomElement() {
 
 export { DgaQuote as D, defineCustomElement as d };
 
-//# sourceMappingURL=p-37b7ef20.js.map
+//# sourceMappingURL=p-0f2bfcea.js.map

package/dist/components/{p-37b7ef20.js.map → p-0f2bfcea.js.map}

@@ -1 +1 @@
-{"file":"p-37b7ef20.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,oqjFAAoqjF,CAAC;AACzrjF,uBAAe,WAAW;;MCMb,QAAQ;IALrB;;;QAMU,SAAI,GAAiB,IAAI,CAAC;QAC1B,oBAAe,GAAa,KAAK,CAAC;QAClC,mBAAc,GAAa,IAAI,CAAC;QAChC,eAAU,GAAY,EAAE,CAAC;QACzB,yBAAoB,GAAa,IAAI,CAAC;QACtC,qBAAgB,GAAY,EAAE,CAAC;QAC/B,sBAAiB,GAAa,IAAI,CAAC;QACnC,eAAU,GAAY,EAAE,CAAC;QACzB,sBAAiB,GAAY,EAAE,CAAC;QAChC,eAAU,GAAa,KAAK,CAAC;KA+BtC;IA7BC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,eAAe,EAAE,IAC5E,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,iEAAU,OAAO,EAAE,CAAC,IAClB,6DAAM,KAAK,EAAC,YAAY,aAAS,EACjC,iEAAU,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,EAAE,IACrC,IAAI,CAAC,cAAc,IAAI,2DAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,UAAU,CAAM,EAC/E,IAAI,CAAC,oBAAoB,IAAI,0DAAG,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,gBAAgB,CAAK,CAChF,CACF,CACP,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,2BAA2B,IACnC,iEAAU,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,EAAE,EAAE,KAAK,EAAC,QAAQ,IACpD,IAAI,CAAC,UAAU,IAAI,mEAAY,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,GAAe,EAClF,iEAAU,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IACrC,2DAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,UAAU,CAAM,EAC/C,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,iBAAiB,CAAK,CAC1C,CACF,EAGX,6DAAM,KAAK,EAAC,YAAY,aAAS,CAC7B,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dga-quote/dga-quote.scss?tag=dga-quote","src/components/dga-quote/dga-quote.tsx"],"sourcesContent":[".dga-quote {\n  display: flex;\n  // width: 846px;\n  padding: var(--spacing-2xl, 20px);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-6xl, 48px);\n\n  border-radius: var(--radius-lg, 16px);\n  \n  &--white-bg {\n    background: var(--background-neutral-50, #f9fafb);\n  }\n\n  &__body {\n    position: relative;\n\n    & .quote-icon {\n        display: block;\n        max-height: 90px;\n        // direction: rtl;\n      position: relative;\n      // left: 14px;\n      top: -45px;\n      color: var(--text-primary-sa-flag, #14573a);\n      text-align: right;\n      font-family: 'IBM Plex Sans Arabic';\n      font-size: 128px;\n      font-style: normal;\n      font-weight: 400;\n\n      // display: inline-block; \n      transform: scaleX(-1);\n\n      // transform: scaleX(-1);\n      // line-height: 32px; /* 25% */\n    }\n\n    [dir = \"rtl\"] & .quote-icon {\n      transform: scaleX(1);\n    }\n\n    &-title {\n      color: var(--text-default, #161616);\n      margin: 0;\n\n      @extend .display-xs-medium;\n    }\n\n    &-desc {\n      color: var(--text-primary-paragraph, #384250);\n      margin: 0;\n\n      @extend .text-xl-regular;\n    }\n  }\n\n  &__auther-details {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    // margin-top: 28px;\n\n\n    .auther-title {\n      color: var(--text-default, #161616);\n      text-align: right;\n      margin: 0;\n\n      @extend .text-xl-medium;\n    }\n\n    .auther-desc {\n      color: var(--text-primary-paragraph, #384250);\n      text-align: right;\n      margin: 0;\n\n      @extend .text-lg-regular;\n    }\n\n    & .quote-icon {\n        display: block;\n        max-height: 90px;\n      position: relative;\n      // left: 14px;\n      // top: 5px;\n      // direction: rtl;\n      bottom: 33px;\n      color: var(--Text-text-primary-sa-flag, #14573a);\n      text-align: right;\n      leading-trim: both;\n      text-edge: cap;\n      font-family: 'IBM Plex Sans Arabic';\n      font-size: 128px;\n      font-style: normal;\n      font-weight: 400;\n      transform: scaleX(-1);\n\n      // line-height: 32px; /* 25% */\n    }\n\n\n    [dir = \"rtl\"] & .quote-icon {\n      transform: scaleX(1);\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'dga-quote',\n  styleUrl: 'dga-quote.scss',\n  // shadow: true,\n})\nexport class DgaQuote {\n  @Prop() size?: 'sm' | 'lg' = 'sm';\n  @Prop() whiteBackground?: boolean = false;\n  @Prop() showQuoteTitle?: boolean = true;\n  @Prop() quoteTitle?: string = '';\n  @Prop() showQuoteDescription?: boolean = true;\n  @Prop() quoteDescription?: string = '';\n  @Prop() showAuthorDetails?: boolean = true;\n  @Prop() authorName?: string = '';\n  @Prop() authorDescription?: string = '';\n  @Prop() showAvatar?: boolean = false;\n\n  render() {\n    return (\n      <div class={{ 'dga-quote': true, 'dga-quote--white-bg': this.whiteBackground }}>\n        <div class=\"dga-quote__body\">\n          <dga-flex spacing={9}>\n            <span class=\"quote-icon\">”</span>\n            <dga-flex direction=\"column\" spacing={16}>\n              {this.showQuoteTitle && <h2 class=\"dga-quote__body-title\">{this.quoteTitle}</h2>}\n              {this.showQuoteDescription && <p class=\"dga-quote__body-desc\">{this.quoteDescription}</p>}\n            </dga-flex>\n          </dga-flex>\n        </div>\n        {this.showAuthorDetails && (\n          <div class=\"dga-quote__auther-details\">\n             <dga-flex direction=\"row\" spacing={16} align='center'>\n             {this.showAvatar && <dga-avatar size={80} type='image' border={false}></dga-avatar>}\n              <dga-flex direction=\"column\" spacing={8}>\n                <h3 class=\"auther-title\">{this.authorName}</h3>\n                <p class=\"auther-desc\">{this.authorDescription}</p>\n              </dga-flex>\n            </dga-flex>\n\n\n            <span class=\"quote-icon\">“</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-0f2bfcea.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,oqjFAAoqjF,CAAC;AACzrjF,uBAAe,WAAW;;MCMb,QAAQ;IALrB;;;QAMU,SAAI,GAAiB,IAAI,CAAC;QAC1B,oBAAe,GAAa,KAAK,CAAC;QAClC,mBAAc,GAAa,IAAI,CAAC;QAChC,eAAU,GAAY,EAAE,CAAC;QACzB,yBAAoB,GAAa,IAAI,CAAC;QACtC,qBAAgB,GAAY,EAAE,CAAC;QAC/B,sBAAiB,GAAa,IAAI,CAAC;QACnC,eAAU,GAAY,EAAE,CAAC;QACzB,sBAAiB,GAAY,EAAE,CAAC;QAChC,eAAU,GAAa,KAAK,CAAC;KA+BtC;IA7BC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,eAAe,EAAE,IAC5E,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,iEAAU,OAAO,EAAE,CAAC,IAClB,6DAAM,KAAK,EAAC,YAAY,aAAS,EACjC,iEAAU,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,EAAE,IACrC,IAAI,CAAC,cAAc,IAAI,2DAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,UAAU,CAAM,EAC/E,IAAI,CAAC,oBAAoB,IAAI,0DAAG,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,gBAAgB,CAAK,CAChF,CACF,CACP,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,2BAA2B,IACnC,iEAAU,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,EAAE,EAAE,KAAK,EAAC,QAAQ,IACpD,IAAI,CAAC,UAAU,IAAI,mEAAY,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,GAAe,EAClF,iEAAU,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IACrC,2DAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,UAAU,CAAM,EAC/C,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,iBAAiB,CAAK,CAC1C,CACF,EAGX,6DAAM,KAAK,EAAC,YAAY,aAAS,CAC7B,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dga-quote/dga-quote.scss?tag=dga-quote","src/components/dga-quote/dga-quote.tsx"],"sourcesContent":[".dga-quote {\n  display: flex;\n  // width: 846px;\n  padding: var(--spacing-2xl, 20px);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-6xl, 48px);\n\n  border-radius: var(--radius-lg, 16px);\n  \n  &--white-bg {\n    background: var(--background-neutral-50, #f9fafb);\n  }\n\n  &__body {\n    position: relative;\n\n    & .quote-icon {\n        display: block;\n        max-height: 90px;\n        // direction: rtl;\n      position: relative;\n      // left: 14px;\n      top: -45px;\n      color: var(--text-primary-sa-flag, #14573a);\n      text-align: right;\n      font-family: 'IBM Plex Sans Arabic';\n      font-size: 128px;\n      font-style: normal;\n      font-weight: 400;\n\n      // display: inline-block; \n      transform: scaleX(-1);\n\n      // transform: scaleX(-1);\n      // line-height: 32px; /* 25% */\n    }\n\n    [dir = \"rtl\"] & .quote-icon {\n      transform: scaleX(1);\n    }\n\n    &-title {\n      color: var(--text-default, #161616);\n      margin: 0;\n\n      @extend .display-xs-medium;\n    }\n\n    &-desc {\n      color: var(--text-primary-paragraph, #384250);\n      margin: 0;\n\n      @extend .text-xl-regular;\n    }\n  }\n\n  &__auther-details {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    // margin-top: 28px;\n\n\n    .auther-title {\n      color: var(--text-default, #161616);\n      text-align: right;\n      margin: 0;\n\n      @extend .text-xl-medium;\n    }\n\n    .auther-desc {\n      color: var(--text-primary-paragraph, #384250);\n      text-align: right;\n      margin: 0;\n\n      @extend .text-lg-regular;\n    }\n\n    & .quote-icon {\n        display: block;\n        max-height: 90px;\n      position: relative;\n      // left: 14px;\n      // top: 5px;\n      // direction: rtl;\n      bottom: 33px;\n      color: var(--Text-text-primary-sa-flag, #14573a);\n      text-align: right;\n      leading-trim: both;\n      text-edge: cap;\n      font-family: 'IBM Plex Sans Arabic';\n      font-size: 128px;\n      font-style: normal;\n      font-weight: 400;\n      transform: scaleX(-1);\n\n      // line-height: 32px; /* 25% */\n    }\n\n\n    [dir = \"rtl\"] & .quote-icon {\n      transform: scaleX(1);\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'dga-quote',\n  styleUrl: 'dga-quote.scss',\n  // shadow: true,\n})\nexport class DgaQuote {\n  @Prop() size?: 'sm' | 'lg' = 'sm';\n  @Prop() whiteBackground?: boolean = false;\n  @Prop() showQuoteTitle?: boolean = true;\n  @Prop() quoteTitle?: string = '';\n  @Prop() showQuoteDescription?: boolean = true;\n  @Prop() quoteDescription?: string = '';\n  @Prop() showAuthorDetails?: boolean = true;\n  @Prop() authorName?: string = '';\n  @Prop() authorDescription?: string = '';\n  @Prop() showAvatar?: boolean = false;\n\n  render() {\n    return (\n      <div class={{ 'dga-quote': true, 'dga-quote--white-bg': this.whiteBackground }}>\n        <div class=\"dga-quote__body\">\n          <dga-flex spacing={9}>\n            <span class=\"quote-icon\">”</span>\n            <dga-flex direction=\"column\" spacing={16}>\n              {this.showQuoteTitle && <h2 class=\"dga-quote__body-title\">{this.quoteTitle}</h2>}\n              {this.showQuoteDescription && <p class=\"dga-quote__body-desc\">{this.quoteDescription}</p>}\n            </dga-flex>\n          </dga-flex>\n        </div>\n        {this.showAuthorDetails && (\n          <div class=\"dga-quote__auther-details\">\n             <dga-flex direction=\"row\" spacing={16} align='center'>\n             {this.showAvatar && <dga-avatar size={80} type='image' border={false}></dga-avatar>}\n              <dga-flex direction=\"column\" spacing={8}>\n                <h3 class=\"auther-title\">{this.authorName}</h3>\n                <p class=\"auther-desc\">{this.authorDescription}</p>\n              </dga-flex>\n            </dga-flex>\n\n\n            <span class=\"quote-icon\">“</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-97e3e910.js.map

@@ -1 +1 @@
-{"file":"p-97e3e910.js","mappings":"MAAa,IAAI,GAAG;IAClB,MAAM,IAAI,GAAW,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB;;;;","names":[],"sources":["src/utils/index.ts"],"sourcesContent":["export const guid = (): string => {\n  const head: string = Date.now().toString(36);\n  const tail: string = Math.random().toString(36).substring(2);\n  return head + tail;\n};\n"],"version":3}
+{"file":"p-97e3e910.js","mappings":"MAEa,IAAI,GAAG;IAClB,MAAM,IAAI,GAAW,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,GAAG,IAAI,CAAC;AACrB;;;;","names":[],"sources":["src/utils/index.ts"],"sourcesContent":["import { JSX } from '@stencil/core';\n\nexport const guid = (): string => {\n  const head: string = Date.now().toString(36);\n  const tail: string = Math.random().toString(36).substring(2);\n  return head + tail;\n};\n\n\n\nexport type StripHTML<T> = Omit<T, keyof JSX.Element>;"],"version":3}

package/dist/components/{p-457d4b2d.js → p-9d83601a.js}

@@ -26,7 +26,7 @@ const DgaAvatar = /*@__PURE__*/ proxyCustomElement(class DgaAvatar extends H {
             return (h("div", { class: "dga-avatar__icon" }, h("dga-icon", { icon: ((_a = this.icon) === null || _a === void 0 ? void 0 : _a.name) || "", variant: (_b = this.icon) === null || _b === void 0 ? void 0 : _b.variant, type: (_c = this.icon) === null || _c === void 0 ? void 0 : _c.type, color: (_d = this.icon) === null || _d === void 0 ? void 0 : _d.color })));
     }
     render() {
-        return (h("div", { key: 'e77346a851de430fba13516fe309946858814adf', class: {
+        return (h("div", { key: '26147409db8cf5c058aa5d8aa9bf5eeefb0c44b1', class: {
                 'dga-avatar': true,
                 [`dga-avatar--${this.type}`]: true,
                 [`dga-avatar--${this.size}`]: true,
@@ -66,4 +66,4 @@ function defineCustomElement() {
 
 export { DgaAvatar as D, defineCustomElement as d };
 
-//# sourceMappingURL=p-457d4b2d.js.map
+//# sourceMappingURL=p-9d83601a.js.map

package/dist/components/{p-457d4b2d.js.map → p-9d83601a.js.map}

@@ -1 +1 @@
-{"file":"p-457d4b2d.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,kylFAAkylF,CAAC;AACxzlF,wBAAe,YAAY;;MCuBd,SAAS;IANtB;;;QAOU,SAAI,GAAgB,MAAM,CAAC;QAC3B,SAAI,GAAgB,EAAE,CAAC;QACQ,WAAM,GAAa,KAAK,CAAC;QACzB,WAAM,GAAa,KAAK,CAAC;QACxD,SAAI,GAAY,IAAI,CAAC;QACrB,WAAM,GAAY,wBAAwB,CAAC;QAC3C,QAAG,GAAY,EAAE,CAAC;KA8B3B;IA3BS,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;YAAE,OAAO,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;QACvF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAO,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;QACnG,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YACtB,QACE,WAAK,KAAK,EAAC,kBAAkB,IAC3B,gBAAU,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,EAAE,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAI,CAClH,EACN;KACL;IAED,MAAM;QAEJ,QACE,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,oBAAoB,EAAE,IAAI,CAAC,MAAM;aAClC,IAEA,IAAI,CAAC,oBAAoB,EAAE,CACxB,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dga-avatar/dga-avatar.scss?tag=dga-avatar","src/components/dga-avatar/dga-avatar.tsx"],"sourcesContent":["$avatar_sizes: (\n  120: (\n    'display-md-regular',\n    80,\n  ),\n  80: (\n    'display-sm-regular',\n    56,\n  ),\n  68: (\n    'text-xl-medium',\n    40,\n  ),\n  48: (\n    'text-md-medium',\n    32,\n  ),\n  40: (\n    'text-sm-semibold',\n    32,\n  ),\n  32: (\n    'text-xs-semibold',\n    24,\n  ),\n  24: (\n    'text-2xs-bold',\n    16,\n  ),\n);\n\n.dga-avatar {\n  border-radius: var(--radius-full);\n  border: 2px solid var(--border-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--button-background-neutral-default);\n  overflow: hidden;\n\n  &--initials {\n    // border: 4px solid var(--colors-border-white, #FFF);\n  }\n\n  &--image {\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &--square {\n    border-radius: var(--radius-8);\n  }\n\n  // &--border {\n  //   border: 2px solid var(--alpha-black-20, rgba(22, 22, 22, 0.20));\n  // }\n\n  @each $size, $properties in $avatar_sizes {\n    $text: nth($properties, 1);\n    $icon_size: nth($properties, 2);\n\n    &--#{$size} {\n      width: #{$size}px;\n      height: #{$size}px;\n\n      @if ($size == 120) {\n        border-width: 4px;\n      }\n\n      & .dga-avatar__text {\n        @extend .#{$text};\n        text-transform: uppercase;\n      }\n      & .dga-avatar__icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: #{$icon_size}px;\n        height: #{$icon_size}px;\n        font-size: #{$icon_size}px;\n        & > * {\n          width: 100%;\n          height: 100%;\n          font-size: #{$icon_size}px;\n        }\n      }\n    }\n  }\n}\n","// import { UserIcon } from '@hugeicons/react-pro';\nimport { Component, Prop, h } from '@stencil/core';\n\nexport type AvatarType = 'initials' | 'image' | 'icon';\nexport type AvatarSize = 120 | 80 | 68 | 48 | 40 | 32 | 24;\n\nexport interface Icon {\n  name: string; \n  size?: number;\n  color?: string;\n  variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk';\n  type?: 'rounded' | 'sharp' | 'standard';\n}\n\nexport interface CustomAttribute {\n  key: string;\n  value: string;\n}\n@Component({\n  tag: 'dga-avatar',\n  styleUrl: 'dga-avatar.scss',\n  // shadow: true,\n  // scoped: true,\n})\nexport class DgaAvatar {\n  @Prop() type?: AvatarType = 'icon';\n  @Prop() size?: AvatarSize = 32;\n  @Prop({mutable: true , reflect: true}) square?: boolean = false;\n  @Prop({mutable: true , reflect: true}) border?: boolean = false;\n  @Prop() text?: string = 'AB';\n  @Prop() imgUrl?: string = '/assets/avatar-img.png';\n  @Prop() alt?: string = '';\n  @Prop() icon?: Icon;\n\n  private renderChildComponent() {\n    if (this.type === 'initials') return <span class=\"dga-avatar__text\">{this.text}</span>;\n    if (this.type === 'image') return <img class=\"dga-avatar__img\" src={this.imgUrl} alt={this.alt} />;\n    if (this.type === 'icon')\n      return (\n        <div class=\"dga-avatar__icon\">\n          <dga-icon icon={this.icon?.name || \"\"} variant={this.icon?.variant} type={this.icon?.type} color={this.icon?.color} />\n        </div>\n      );\n  }\n\n  render() {\n\n    return (\n      <div\n        class={{\n          'dga-avatar': true,\n          [`dga-avatar--${this.type}`]: true,\n          [`dga-avatar--${this.size}`]: true,\n          'dga-avatar--square': this.square,\n          'dga-avatar--border': this.border,\n        }}\n      >\n        {this.renderChildComponent()}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-9d83601a.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,kylFAAkylF,CAAC;AACxzlF,wBAAe,YAAY;;MCsCd,SAAS;IANtB;;;QAOU,SAAI,GAAgB,MAAM,CAAC;QAC3B,SAAI,GAAgB,EAAE,CAAC;QACQ,WAAM,GAAa,KAAK,CAAC;QACzB,WAAM,GAAa,KAAK,CAAC;QACxD,SAAI,GAAY,IAAI,CAAC;QACrB,WAAM,GAAY,wBAAwB,CAAC;QAC3C,QAAG,GAAY,EAAE,CAAC;KA8B3B;IA3BS,oBAAoB;;QAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;YAAE,OAAO,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;QACvF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAO,WAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC;QACnG,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YACtB,QACE,WAAK,KAAK,EAAC,kBAAkB,IAC3B,gBAAU,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,KAAI,EAAE,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAI,CAClH,EACN;KACL;IAED,MAAM;QAEJ,QACE,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,oBAAoB,EAAE,IAAI,CAAC,MAAM;aAClC,IAEA,IAAI,CAAC,oBAAoB,EAAE,CACxB,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dga-avatar/dga-avatar.scss?tag=dga-avatar","src/components/dga-avatar/dga-avatar.tsx"],"sourcesContent":["$avatar_sizes: (\n  120: (\n    'display-md-regular',\n    80,\n  ),\n  80: (\n    'display-sm-regular',\n    56,\n  ),\n  68: (\n    'text-xl-medium',\n    40,\n  ),\n  48: (\n    'text-md-medium',\n    32,\n  ),\n  40: (\n    'text-sm-semibold',\n    32,\n  ),\n  32: (\n    'text-xs-semibold',\n    24,\n  ),\n  24: (\n    'text-2xs-bold',\n    16,\n  ),\n);\n\n.dga-avatar {\n  border-radius: var(--radius-full);\n  border: 2px solid var(--border-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--button-background-neutral-default);\n  overflow: hidden;\n\n  &--initials {\n    // border: 4px solid var(--colors-border-white, #FFF);\n  }\n\n  &--image {\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &--square {\n    border-radius: var(--radius-8);\n  }\n\n  // &--border {\n  //   border: 2px solid var(--alpha-black-20, rgba(22, 22, 22, 0.20));\n  // }\n\n  @each $size, $properties in $avatar_sizes {\n    $text: nth($properties, 1);\n    $icon_size: nth($properties, 2);\n\n    &--#{$size} {\n      width: #{$size}px;\n      height: #{$size}px;\n\n      @if ($size == 120) {\n        border-width: 4px;\n      }\n\n      & .dga-avatar__text {\n        @extend .#{$text};\n        text-transform: uppercase;\n      }\n      & .dga-avatar__icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: #{$icon_size}px;\n        height: #{$icon_size}px;\n        font-size: #{$icon_size}px;\n        & > * {\n          width: 100%;\n          height: 100%;\n          font-size: #{$icon_size}px;\n        }\n      }\n    }\n  }\n}\n","// import { UserIcon } from '@hugeicons/react-pro';\nimport { Component, Prop, h } from '@stencil/core';\nimport { StripHTML } from '../../utils';\n\nexport type AvatarType = 'initials' | 'image' | 'icon';\nexport type AvatarSize = 120 | 80 | 68 | 48 | 40 | 32 | 24;\n\nexport interface Icon {\n  name: string; \n  size?: number;\n  color?: string;\n  variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk';\n  type?: 'rounded' | 'sharp' | 'standard';\n}\n\nexport interface CustomAttribute {\n  key: string;\n  value: string;\n}\n\n\nexport interface IDgaAvatar {\n  type?: AvatarType;\n  size?: AvatarSize;\n  square?: boolean;\n  border?: boolean ;\n  text?: string ;\n  imgUrl?: string;\n  alt?: string;\n  icon?: Icon;\n}\n\n\n@Component({\n  tag: 'dga-avatar',\n  styleUrl: 'dga-avatar.scss',\n  // shadow: true,\n  // scoped: true,\n})\nexport class DgaAvatar implements StripHTML<IDgaAvatar> {\n  @Prop() type?: AvatarType = 'icon';\n  @Prop() size?: AvatarSize = 32;\n  @Prop({mutable: true , reflect: true}) square?: boolean = false;\n  @Prop({mutable: true , reflect: true}) border?: boolean = false;\n  @Prop() text?: string = 'AB';\n  @Prop() imgUrl?: string = '/assets/avatar-img.png';\n  @Prop() alt?: string = '';\n  @Prop() icon?: Icon;\n\n  private renderChildComponent() {\n    if (this.type === 'initials') return <span class=\"dga-avatar__text\">{this.text}</span>;\n    if (this.type === 'image') return <img class=\"dga-avatar__img\" src={this.imgUrl} alt={this.alt} />;\n    if (this.type === 'icon')\n      return (\n        <div class=\"dga-avatar__icon\">\n          <dga-icon icon={this.icon?.name || \"\"} variant={this.icon?.variant} type={this.icon?.type} color={this.icon?.color} />\n        </div>\n      );\n  }\n\n  render() {\n\n    return (\n      <div\n        class={{\n          'dga-avatar': true,\n          [`dga-avatar--${this.type}`]: true,\n          [`dga-avatar--${this.size}`]: true,\n          'dga-avatar--square': this.square,\n          'dga-avatar--border': this.border,\n        }}\n      >\n        {this.renderChildComponent()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-4631cddd.js → p-c31de0f8.js}

@@ -49,10 +49,10 @@ const DgaAccordion = /*@__PURE__*/ proxyCustomElement(class DgaAccordion extends
         }
     }
     render() {
-        return (h("div", { key: 'ac5e87360549e69caf8c474ffed12214a8cd5990', class: `dga-accordion-item dga-accordion-item--${this.size} 
+        return (h("div", { key: '5594ca927b10316ac18d7e0a03fb503a1ce0b4f0', class: `dga-accordion-item dga-accordion-item--${this.size} 
           ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}
           ${this.flush ? 'dga-accordion-item--flush' : ''} 
-          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}` }, h("a", { key: '51bffeaa74562b96a3b0847e10b84b5fdf030fe6', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'Leading' && (h("div", { key: '887c9f7359529b3b549962a389955a8bb22f9256', class: "dga-accordion-item__arrow" }, h("i", { key: '6fccc9fa75ad4484f63342f0d3c69e0d584f7895', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } }))), h("div", { key: '5a76539262426c22e4af8439c652c89a10dadde9', class: "dga-accordion-item__title" }, this.title), this.iconAlignment === 'Trailing' && (h("div", { key: 'fc28eb3d4f46e4fe6964d2b5bae815a7b455a638', class: "dga-accordion-item__arrow" }, h("i", { key: 'beac26f4f872b58f4aa2406debd459e0e0bd7a6f', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } })))), h("div", { key: '5f28b0c24da507d731f2bc7fdbc66b3723f856e1', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, this.content)));
+          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}` }, h("a", { key: '7b07db942bc6a9c4b6f7853c5afd52090d2cac29', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'Leading' && (h("div", { key: '54ecc6efe2831344a6e114aab79f08fcb471bfa8', class: "dga-accordion-item__arrow" }, h("i", { key: 'd721434a4ebcc33aa6eaa56c6fefecb315c36dfc', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } }))), h("div", { key: '8e911c12b48ee8a65ca6509eb62db56b52d3bf30', class: "dga-accordion-item__title" }, this.title), this.iconAlignment === 'Trailing' && (h("div", { key: '3ccf4477d75ebc9d00b792f2e0ac4a1f4b4da67b', class: "dga-accordion-item__arrow" }, h("i", { key: '313621dd7f59d5a8ede3abe629a36decb3b7be16', class: "hgi-stroke hgi-arrow-down-01", style: { fontSize: '16px' } })))), h("div", { key: '7cf868439fe89461d14799074acdba245b2a7fa4', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, this.content)));
     }
     get el() { return this; }
     static get style() { return DgaAccordionStyle0; }
@@ -83,4 +83,4 @@ function defineCustomElement() {
 
 export { DgaAccordion as D, defineCustomElement as d };
 
-//# sourceMappingURL=p-4631cddd.js.map
+//# sourceMappingURL=p-c31de0f8.js.map

package/dist/components/{p-4631cddd.js.map → p-c31de0f8.js.map}

@@ -1 +1 @@
-{"file":"p-4631cddd.js","mappings":"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","names":[],"sources":["src/components/dga-accordion/dga-accordion.scss?tag=dga-accordion&encapsulation=shadow","src/components/dga-accordion/dga-accordion.tsx"],"sourcesContent":[".dga-accordion {\n  &-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    display: inline-block;\n    width: 100%;\n\n    &__item {\n      &:last-child {\n        border-bottom: 1px solid var(--border-neutral-primary);\n      }\n    }\n  }\n\n  &-item {\n    border-top: 1px solid var(--border-neutral-primary);\n    width: 100%; //to be edited\n    min-width: 366px;\n    z-index: 1;\n    position: relative;\n\n    &__header {\n      display: flex;\n      padding: var(--spacing-xl);\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-xl);\n      cursor: pointer;\n      border: 2px solid transparent;\n      // transition: background .2s ease-in-out;\n\n      &:hover {\n        background: var(--button-background-neutral-hovered);\n        mix-blend-mode: multiply;\n      }\n    }\n\n    &__title {\n      color: var(--text-default);\n      width: 100%;\n      @extend .text-md-semibold;\n    }\n\n    &__arrow {\n      transition: transform 0.3s ease-in-out;\n      &,\n      & > dga-icon {\n        width: 16px;\n        height: 16px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n\n    &__body {\n      display: flex;\n      align-items: flex-start;\n      padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);\n      gap: var(--spacing-md);\n      color: var(--text-primary-paragraph);\n      @extend .text-md-regular;\n      max-height: 0;\n      overflow: hidden;\n      // will-change: max-height;\n      opacity: 0;\n      transition: all 0.3s ease-in-out;\n    }\n\n    &.active &__body {\n      padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);\n      opacity: 1;\n    }\n\n    &.active &__arrow {\n      transform: rotate(180deg);\n    }\n\n    // &.focused &__header,\n    // &__header:focus {\n    //   background-color: transparent;\n    //   // border: 2px solid var(--border-black);\n    //   outline: none;\n    //   position: relative;\n    //   z-index: 1;\n    // }\n\n    &__header:focus-visible {\n      background-color: transparent;\n      border: 2px solid var(--border-black);\n      outline: none;\n      position: relative;\n      z-index: 1;\n    }\n\n    &__header:active {\n      background-color: var(--button-background-neutral-pressed);\n      outline: none;\n    }\n\n    &.disabled &__header:active,\n    &.disabled &__header:focus,\n    &.disabled &__header:hover {\n      background-color: transparent;\n      outline: none;\n      border: 2px solid transparent;\n    }\n\n    &.disabled &__title,\n    &.disabled &__arrow,\n    &.disabled &__arrow path,\n    //to be edited when add icons\n    &.disabled &__body {\n      color: var(--text-default-disabled) !important;\n      stroke: var(--text-default-disabled) !important; //to be edited when add icons\n    }\n\n    &--lg {\n      .dga-accordion-item__header {\n        padding: var(--spacing-xl);\n      }\n    }\n\n    &--md {\n      .dga-accordion-item__header {\n        padding: var(--spacing-lg) var(--spacing-xl);\n      }\n    }\n\n    &--sm {\n      .dga-accordion-item__header {\n        padding: var(--spacing-md) var(--spacing-xl);\n      }\n    }\n\n    &--flush {\n      width: 100%;\n      position: relative;\n      border-top: 0;\n      /* Create the \"cut\" border effect */\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%);\n      }\n    }\n\n    &--icon-leading {\n      .dga-accordion-item__body {\n        padding: 0 var(--spacing-none) 0 var(--spacing-6xl);\n      }\n\n      &.active .dga-accordion-item__body {\n        padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl);\n      }\n    }\n  }\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item .dga-accordion-item__body {\n  padding: 0 var(--spacing-xl) 0 var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading .dga-accordion-item__body {\n  padding: 0 var(--spacing-6xl) 0 var(--spacing-none);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none);\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\n\nexport interface AccordionItem {\n  title: string;\n  content: string;\n  size?: 'lg' | 'md' | 'sm';\n  iconAlignment?: 'Leading' | 'Trailing';\n  flush?: boolean;\n  disabled?: boolean;\n  extraClass?: string;\n}\n\n@Component({\n  tag: 'dga-accordion',\n  styleUrl: 'dga-accordion.scss',\n  shadow: true\n})\nexport class DgaAccordion {\n  @Element() el!: HTMLElement;\n\n  @Prop() title: string = '';\n  @Prop() content: string = '';\n  @Prop() size: 'lg' | 'md' | 'sm' = 'lg';\n  @Prop() iconAlignment: 'Leading' | 'Trailing' = 'Trailing';\n  @Prop() flush: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() defaultExpanded: boolean = false;\n  @Prop() extraClass: string = '';\n\n  @State() isOpen: boolean = false;\n\n  private bodyElement: HTMLElement | null = null;\n\n  private handleAccordionClick(e: MouseEvent | KeyboardEvent) {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isOpen ? this.collapseAccordion() : this.openAccordion();\n  }\n\n  private openAccordion() {\n    this.isOpen = true;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';\n    }\n  }\n\n  private collapseAccordion() {\n    this.isOpen = false;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n  }\n\n  componentDidRender() {\n    if (this.isOpen && this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 24 + 'px';\n    } else if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n\n    if (this.defaultExpanded) {\n      this.isOpen = this.defaultExpanded\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`dga-accordion-item dga-accordion-item--${this.size} \n          ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}\n          ${this.flush ? 'dga-accordion-item--flush' : ''} \n          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}`}\n      >\n        <a href=\"#\" onClick={e => this.handleAccordionClick(e)} onKeyDown={e => (e.code === 'Space' ? this.handleAccordionClick(e) : null)} class=\"dga-accordion-item__header\">\n          {this.iconAlignment === 'Leading' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n          <div class=\"dga-accordion-item__title\">{this.title}</div>\n          {this.iconAlignment === 'Trailing' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n        </a>\n        <div ref={el => (this.bodyElement = el as HTMLElement | null)} class=\"dga-accordion-item__body\">\n          {this.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-c31de0f8.js","mappings":"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","names":[],"sources":["src/components/dga-accordion/dga-accordion.scss?tag=dga-accordion&encapsulation=shadow","src/components/dga-accordion/dga-accordion.tsx"],"sourcesContent":[".dga-accordion {\n  &-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    display: inline-block;\n    width: 100%;\n\n    &__item {\n      &:last-child {\n        border-bottom: 1px solid var(--border-neutral-primary);\n      }\n    }\n  }\n\n  &-item {\n    border-top: 1px solid var(--border-neutral-primary);\n    width: 100%; //to be edited\n    min-width: 366px;\n    z-index: 1;\n    position: relative;\n\n    &__header {\n      display: flex;\n      padding: var(--spacing-xl);\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-xl);\n      cursor: pointer;\n      border: 2px solid transparent;\n      // transition: background .2s ease-in-out;\n\n      &:hover {\n        background: var(--button-background-neutral-hovered);\n        mix-blend-mode: multiply;\n      }\n    }\n\n    &__title {\n      color: var(--text-default);\n      width: 100%;\n      @extend .text-md-semibold;\n    }\n\n    &__arrow {\n      transition: transform 0.3s ease-in-out;\n      &,\n      & > dga-icon {\n        width: 16px;\n        height: 16px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n\n    &__body {\n      display: flex;\n      align-items: flex-start;\n      padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);\n      gap: var(--spacing-md);\n      color: var(--text-primary-paragraph);\n      @extend .text-md-regular;\n      max-height: 0;\n      overflow: hidden;\n      // will-change: max-height;\n      opacity: 0;\n      transition: all 0.3s ease-in-out;\n    }\n\n    &.active &__body {\n      padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);\n      opacity: 1;\n    }\n\n    &.active &__arrow {\n      transform: rotate(180deg);\n    }\n\n    // &.focused &__header,\n    // &__header:focus {\n    //   background-color: transparent;\n    //   // border: 2px solid var(--border-black);\n    //   outline: none;\n    //   position: relative;\n    //   z-index: 1;\n    // }\n\n    &__header:focus-visible {\n      background-color: transparent;\n      border: 2px solid var(--border-black);\n      outline: none;\n      position: relative;\n      z-index: 1;\n    }\n\n    &__header:active {\n      background-color: var(--button-background-neutral-pressed);\n      outline: none;\n    }\n\n    &.disabled &__header:active,\n    &.disabled &__header:focus,\n    &.disabled &__header:hover {\n      background-color: transparent;\n      outline: none;\n      border: 2px solid transparent;\n    }\n\n    &.disabled &__title,\n    &.disabled &__arrow,\n    &.disabled &__arrow path,\n    //to be edited when add icons\n    &.disabled &__body {\n      color: var(--text-default-disabled) !important;\n      stroke: var(--text-default-disabled) !important; //to be edited when add icons\n    }\n\n    &--lg {\n      .dga-accordion-item__header {\n        padding: var(--spacing-xl);\n      }\n    }\n\n    &--md {\n      .dga-accordion-item__header {\n        padding: var(--spacing-lg) var(--spacing-xl);\n      }\n    }\n\n    &--sm {\n      .dga-accordion-item__header {\n        padding: var(--spacing-md) var(--spacing-xl);\n      }\n    }\n\n    &--flush {\n      width: 100%;\n      position: relative;\n      border-top: 0;\n      /* Create the \"cut\" border effect */\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%);\n      }\n    }\n\n    &--icon-leading {\n      .dga-accordion-item__body {\n        padding: 0 var(--spacing-none) 0 var(--spacing-6xl);\n      }\n\n      &.active .dga-accordion-item__body {\n        padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl);\n      }\n    }\n  }\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item .dga-accordion-item__body {\n  padding: 0 var(--spacing-xl) 0 var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading .dga-accordion-item__body {\n  padding: 0 var(--spacing-6xl) 0 var(--spacing-none);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl);\n}\n\n:is(html[lang='ar'], html[dir='rtl']) .dga-accordion-item--icon-leading.active .dga-accordion-item__body {\n  padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none);\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\nimport { StripHTML } from '../../utils';\n\nexport interface AccordionItem {\n  title: string;\n  content: string;\n  size?: 'lg' | 'md' | 'sm';\n  iconAlignment?: 'Leading' | 'Trailing';\n  flush?: boolean;\n  disabled?: boolean;\n  extraClass?: string;\n}\n\n\nexport interface IDgaAccordion {\n  title: string;\n  content: string;\n  size: 'lg' | 'md' | 'sm';\n  iconAlignment: 'Leading' | 'Trailing';\n  flush: boolean;\n  disabled: boolean;\n  defaultExpanded: boolean;\n  extraClass: string;\n}\n\n@Component({\n  tag: 'dga-accordion',\n  styleUrl: 'dga-accordion.scss',\n  shadow: true\n})\nexport class DgaAccordion implements StripHTML<IDgaAccordion>  {\n  @Element() el!: HTMLElement;\n\n  @Prop() title: string = '';\n  @Prop() content: string = '';\n  @Prop() size: 'lg' | 'md' | 'sm' = 'lg';\n  @Prop() iconAlignment: 'Leading' | 'Trailing' = 'Trailing';\n  @Prop() flush: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() defaultExpanded: boolean = false;\n  @Prop() extraClass: string = '';\n\n  @State() isOpen: boolean = false;\n\n  private bodyElement: HTMLElement | null = null;\n\n  private handleAccordionClick(e: MouseEvent | KeyboardEvent) {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isOpen ? this.collapseAccordion() : this.openAccordion();\n  }\n\n  private openAccordion() {\n    this.isOpen = true;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';\n    }\n  }\n\n  private collapseAccordion() {\n    this.isOpen = false;\n    if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n  }\n\n  componentDidRender() {\n    if (this.isOpen && this.bodyElement) {\n      this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 24 + 'px';\n    } else if (this.bodyElement) {\n      this.bodyElement.style.maxHeight = null;\n    }\n\n    if (this.defaultExpanded) {\n      this.isOpen = this.defaultExpanded\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`dga-accordion-item dga-accordion-item--${this.size} \n          ${this.iconAlignment === 'Leading' ? 'dga-accordion-item--icon-leading' : ''}\n          ${this.flush ? 'dga-accordion-item--flush' : ''} \n          ${this.disabled ? 'disabled' : ''} ${this.extraClass} ${this.isOpen ? 'active' : ''}`}\n      >\n        <a href=\"#\" onClick={e => this.handleAccordionClick(e)} onKeyDown={e => (e.code === 'Space' ? this.handleAccordionClick(e) : null)} class=\"dga-accordion-item__header\">\n          {this.iconAlignment === 'Leading' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n          <div class=\"dga-accordion-item__title\">{this.title}</div>\n          {this.iconAlignment === 'Trailing' && (\n            <div class=\"dga-accordion-item__arrow\">\n              <i class=\"hgi-stroke hgi-arrow-down-01\" style={{ fontSize: '16px' }} />\n            </div>\n          )}\n        </a>\n        <div ref={el => (this.bodyElement = el as HTMLElement | null)} class=\"dga-accordion-item__body\">\n          {this.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}