@scania/tegel 0.0.2 → 0.0.5

package/dist/tegel/p-ef5487a3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tableFooterCss","relevantTableProps","removeShakeAnimation","e","target","classList","remove","TableFooter","this","paginationPrev","event","preventDefault","paginationValue","runPagination","paginationNext","numberOfPages","disablePaginationFunction","dataRowsPagination","host","parentNode","querySelector","querySelectorAll","forEach","item","i","index","tempPaginationDisable","lastResult","rowsPerPage","firstResult","add","clientPaginationPrev","clientPaginationValue","sendPaginationValue","clientPaginationNext","clientMaxPages","internalSddsPropChangeListener","tableId","detail","changed","filter","changedProp","includes","Error","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","numberOfRows","parentElement","childElementCount","numberOfColumns","Math","ceil","clientSetColumnsNumber","columnsNumber","internalSddsEnablePagination","emit","paginationInputChange","insertedValue","value","max","sddsPaginationListener","sddsPageChange","clientPaginationInputChange","render","h","Host","class","compactDesign","colSpan","enablePagination","enableClientPagination","type","min","pattern","dir","onChange","onFocusout","onAnimationEnd","disabled","onClick","fill","xmlns","viewBox","d"],"sources":["./src/components/data-table/table-footer/table-footer.scss?tag=sdds-table-footer&encapsulation=shadow","./src/components/data-table/table-footer/table-footer.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-footer-group;\n  height: 48px;\n\n  .sdds-table__footer-row {\n    background-color: var(--sdds-data-table-footer-background);\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__footer-cell {\n    padding: 0 16px;\n\n    .sdds-table__pagination {\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .sdds-table__row-selector,\n      .sdds-table__page-selector {\n        display: flex;\n        align-items: center;\n      }\n\n      .sdds-table__page-selector-input {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        background-color: var(--sdds-data-table-footer-page-selector-input-background);\n        color: var(--sdds-data-table-color);\n        width: 36px;\n        height: 30px;\n        border: none;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n        margin-right: 4px;\n        padding-right: 8px;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);\n        }\n\n        &:disabled {\n          color: var(--sdds-data-table-footer-page-selector-input-color-disabled);\n        }\n      }\n\n      .sdds-table__page-selector-input--shake {\n        animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      }\n\n      .sdds-table__footer-text {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding: 1px 8px 0 0;\n      }\n\n      .sdds-table__footer-btn {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        background-color: transparent;\n        cursor: pointer;\n        height: 32px;\n        width: 32px;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-btn-hover);\n        }\n\n        &:disabled {\n          cursor: default;\n          opacity: 0.38;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n      }\n\n      .sdds-table__footer-btn-svg {\n        height: 20px;\n        width: 20px;\n        fill: var(--sdds-data-table-color)\n      }\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 32px;\n\n  .sdds-table__footer-cell {\n    .sdds-table__pagination {\n      height: 32px;\n\n      .sdds-table__page-selector-input {\n        height: 24px;\n      }\n\n      .sdds-table__footer-btn {\n        height: 28px;\n        width: 28px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'internalSddsEnablePagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsEnablePagination: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.internalSddsEnablePagination.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('internalSddsPagination', { target: 'body' })\n  sddsPaginationListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic. */\n  @Event({\n    eventName: 'sddsPageChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsPageChange: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.sddsPageChange.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-fcb9e2c1.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as a}from"./p-387e1798.js";const s='.textarea-container.sc-sdds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-sdds-textarea{min-width:unset}.textarea-container.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before,.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after{content:"";height:2px;width:0;position:absolute;background:var(--sdds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before{left:50%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after{right:50%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after,.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-sdds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textarea-color);background-color:var(--sdds-textarea-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--sdds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-sdds-textarea::placeholder{opacity:1;color:var(--sdds-textarea-placeholder)}.textarea-input.sc-sdds-textarea:focus::placeholder{color:var(--sdds-textarea-placeholder-focus-color)}.textarea-input.sc-sdds-textarea:disabled{background-color:var(--sdds-textarea-disabled-background);color:var(--sdds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-sdds-textarea:disabled::placeholder{color:var(--sdds-textarea-disabled-placeholder)}.textarea-input.sc-sdds-textarea:disabled~.textfield-label-inside.sc-sdds-textarea{color:var(--sdds-textarea-disabled-label)}.textarea-input.sc-sdds-textarea::-webkit-resizer{display:none}.textarea-input.sc-sdds-textarea:hover{border-bottom-color:var(--sdds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-sdds-textarea{color:var(--sdds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--sdds-textarea-background)}.textarea-resizer-icon.sc-sdds-textarea svg.sc-sdds-textarea{display:block}.textarea-label.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);transition:0.1s ease all;color:var(--sdds-textarea-label-inside-color);position:absolute;top:var(--sdds-spacing-element-20);left:var(--sdds-spacing-element-16)}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea .sc-sdds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textarea-placeholder-focus-color)}.textarea-container.textarea-focus.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.textarea-container.textarea-focus.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::before,.textarea-container.textarea-focus.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.textarea-textcounter.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--sdds-spacing-element-4)}.textarea-textcounter.sc-sdds-textarea .textfield-textcounter-divider.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter-divider)}.textarea-helper.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-sdds-textarea~.textarea-textcounter.sc-sdds-textarea{flex-basis:auto}.textarea-success.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:var(--sdds-textarea-border-bottom-success)}.textarea-error.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:var(--sdds-textarea-border-bottom-error)}.textarea-error.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::after,.textarea-error.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::before{background:var(--sdds-textarea-bar-error)}.textarea-error.sc-sdds-textarea .textarea-helper.sc-sdds-textarea{color:var(--sdds-textarea-helper-error)}.textarea-disabled.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:transparent}.textarea-disabled.sc-sdds-textarea .textarea-label.sc-sdds-textarea{color:var(--sdds-textarea-disabled-label)}.textarea-icon__readonly.sc-sdds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-sdds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;color:var(--sdds-textarea-icon-read-only-label-color);background-color:var(--sdds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-sdds-textarea{pointer-events:none}.textarea-readonly.sc-sdds-textarea .textarea-icon__readonly.sc-sdds-textarea{display:block}.textarea-readonly.sc-sdds-textarea .textarea-icon__readonly.sc-sdds-textarea:hover~.textarea-icon__readonly-label.sc-sdds-textarea{display:block}.textarea-readonly.sc-sdds-textarea .textfield-input.sc-sdds-textarea{padding-right:54px;background-color:transparent}.textarea-readonly.sc-sdds-textarea .textfield-container.sc-sdds-textarea{background-color:transparent}';const r=class{constructor(a){e(this,a);this.sddsChange=t(this,"sddsChange",6);this.sddsBlur=t(this,"sddsBlur",6);this.sddsInput=t(this,"sddsInput",6);this.sddsFocus=t(this,"sddsFocus",6);this.label="";this.name="";this.helper=undefined;this.cols=undefined;this.rows=undefined;this.labelPosition="no-label";this.placeholder="";this.value="";this.disabled=false;this.readOnly=false;this.state="default";this.maxLength=undefined;this.modeVariant=null;this.autoFocus=false;this.noMinWidth=false;this.focusInput=undefined}handleChange(e){this.sddsChange.emit(e)}handleBlur(e){this.sddsBlur.emit(e);this.focusInput=false}handleInput(e){this.sddsInput.emit(e);this.value=e.target.value}handleFocus(e){this.textEl.focus();this.focusInput=true;this.sddsFocus.emit(e)}render(){var e;return a("div",{class:`\n        textarea-container\n        ${this.labelPosition==="inside"?"textarea-label-inside":""}\n        ${this.focusInput?"textarea-focus":""}\n        ${this.disabled?"textarea-disabled":""}\n        ${this.readOnly?"textarea-readonly":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n        ${this.value?"textarea-data":""}\n        ${this.state==="error"||this.state==="success"?`textarea-${this.state}`:""}\n        ${this.noMinWidth?"no-min-width":""}\n        `},this.labelPosition!=="no-label"&&a("span",{class:"textarea-label"},this.label),a("div",{class:"textarea-wrapper"},a("textarea",{class:"textarea-input",ref:e=>this.textEl=e,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,name:this.name,autofocus:this.autoFocus,maxlength:this.maxLength,cols:this.cols,rows:this.rows,onFocus:e=>{if(!this.readOnly){this.handleFocus(e)}},onBlur:e=>{if(!this.readOnly){this.handleBlur(e)}},onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e)}),a("span",{class:"textarea-resizer-icon"},a("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z",fill:"currentColor"}))),a("span",{class:"textarea-icon__readonly"},a("sdds-icon",{name:"edit_inactive"})),a("span",{class:"textarea-icon__readonly-label"},"This field is non-editable")),a("span",{class:"textarea-helper"},this.state==="error"&&a("sdds-icon",{name:"error",size:"16px"}),this.helper),this.maxLength>0&&a("div",{class:"textarea-textcounter"},this.value===null?0:(e=this.value)===null||e===void 0?void 0:e.length,a("span",{class:"textfield-textcounter-divider"}," / ")," ",this.maxLength))}};r.style=s;export{r as sdds_textarea};
+//# sourceMappingURL=p-fcb9e2c1.entry.js.map

package/dist/tegel/p-fcb9e2c1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","Textarea","handleChange","event","this","sddsChange","emit","handleBlur","sddsBlur","focusInput","handleInput","sddsInput","value","target","handleFocus","textEl","focus","sddsFocus","render","h","class","labelPosition","disabled","readOnly","modeVariant","state","noMinWidth","label","ref","inputEl","readonly","placeholder","name","autofocus","autoFocus","maxlength","maxLength","cols","rows","onFocus","onBlur","onInput","onChange","width","height","viewBox","fill","xmlns","d","size","helper","_a","length"],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n}\n\n.textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n\n  &.no-min-width {\n    min-width: unset;\n  }\n}\n\n.textarea-container {\n  .textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.textarea-container:not(.textarea-disabled) {\n  .textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.textarea-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.textarea-container {\n  &.textarea-label-inside {\n    .textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.textarea-focus {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.textarea-data {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.textarea-success {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.textarea-error {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.textarea-disabled {\n  .textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.textarea-readonly {\n  pointer-events: none;\n\n  .textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        textarea-container\n        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}\n        ${this.focusInput ? 'textarea-focus' : ''}\n        ${this.disabled ? 'textarea-disabled' : ''}\n        ${this.readOnly ? 'textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && <span class={'textarea-label'}>{this.label}</span>}\n        <div class=\"textarea-wrapper\">\n          <textarea\n            class={'textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,stN,MCQPC,EAAQ,M,wLAKK,G,UAGD,G,iFAYoC,W,iBAG7B,G,WAGN,G,cAGI,M,cAGA,M,WAGqB,U,0CAMF,K,eAGlB,M,gBAGC,M,0BAc9BC,aAAaC,GACXC,KAAKC,WAAWC,KAAKH,E,CAYvBI,WAAWJ,GACTC,KAAKI,SAASF,KAAKH,GACnBC,KAAKK,WAAa,K,CAapBC,YAAYP,GACVC,KAAKO,UAAUL,KAAKH,GACpBC,KAAKQ,MAAQT,EAAMU,OAAOD,K,CAa5BE,YAAYX,GACVC,KAAKW,OAAOC,QACZZ,KAAKK,WAAa,KAClBL,KAAKa,UAAUX,KAAKH,E,CAGtBe,S,MACE,OACEC,EAAA,OACEC,MAAO,yCAELhB,KAAKiB,gBAAkB,SAAW,wBAA0B,eAC5DjB,KAAKK,WAAa,iBAAmB,eACrCL,KAAKkB,SAAW,oBAAsB,eACtClB,KAAKmB,SAAW,oBAAsB,eACtCnB,KAAKoB,cAAgB,KAAO,qBAAqBpB,KAAKoB,cAAgB,eACtEpB,KAAKQ,MAAQ,gBAAkB,eAC/BR,KAAKqB,QAAU,SAAWrB,KAAKqB,QAAU,UAAY,YAAYrB,KAAKqB,QAAU,eAChFrB,KAAKsB,WAAa,eAAiB,gBAGpCtB,KAAKiB,gBAAkB,YAAcF,EAAA,QAAMC,MAAO,kBAAmBhB,KAAKuB,OAC3ER,EAAA,OAAKC,MAAM,oBACTD,EAAA,YACEC,MAAO,iBACPQ,IAAMC,GAAazB,KAAKW,OAASc,EACjCP,SAAUlB,KAAKkB,SACfQ,SAAU1B,KAAKmB,SACfQ,YAAa3B,KAAK2B,YAClBnB,MAAOR,KAAKQ,MACZoB,KAAM5B,KAAK4B,KACXC,UAAW7B,KAAK8B,UAChBC,UAAW/B,KAAKgC,UAChBC,KAAMjC,KAAKiC,KACXC,KAAMlC,KAAKkC,KACXC,QAAUpC,IACR,IAAKC,KAAKmB,SAAU,CAClBnB,KAAKU,YAAYX,E,GAGrBqC,OAASrC,IACP,IAAKC,KAAKmB,SAAU,CAClBnB,KAAKG,WAAWJ,E,GAGpBsC,QAAUtC,GAAUC,KAAKM,YAAYP,GACrCuC,SAAWvC,GAAUC,KAAKF,aAAaC,KAEzCgB,EAAA,QAAMC,MAAM,yBACVD,EAAA,OACEwB,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAEN5B,EAAA,oBACY,UAAS,YACT,UACV6B,EAAE,6uBACFF,KAAK,mBAIX3B,EAAA,QAAMC,MAAM,2BACVD,EAAA,aAAWa,KAAK,mBAElBb,EAAA,QAAMC,MAAM,iCAA+B,+BAE7CD,EAAA,QAAMC,MAAO,mBACVhB,KAAKqB,QAAU,SAAWN,EAAA,aAAWa,KAAK,QAAQiB,KAAK,SACvD7C,KAAK8C,QAGP9C,KAAKgC,UAAY,GAChBjB,EAAA,OAAKC,MAAO,wBACThB,KAAKQ,QAAU,KAAO,GAAIuC,EAAA/C,KAAKQ,SAAK,MAAAuC,SAAA,SAAAA,EAAEC,OACvCjC,EAAA,QAAMC,MAAM,iCAA+B,OAAW,IAAEhB,KAAKgC,W"}