@scania/tegel 0.0.5 → 0.0.7

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

@@ -1 +0,0 @@
-{"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

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

package/dist/tegel/tegel.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["patchBrowser","importMeta","import","meta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.0.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,EAAaC,OAAOC,KAAKC,IAC/B,MAAMC,EAA6D,GAiBnE,GAAuBJ,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BL,IAAeU,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,8jZAAuCH"}

package/dist/types/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.d.ts

@@ -1,13 +0,0 @@
-export declare class SddsBreadcrumbLink {
-  /** Boolean for the current link */
-  current: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  /** Toggle the disabled state for the breadcrumb */
-  disabled: boolean;
-  render(): any;
-}

package/dist/types/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.d.ts

@@ -1,13 +0,0 @@
-import { HostElement } from '../../../../stencil-public-runtime';
-export declare class SddsFooterLink {
-  /** URL for the link */
-  linkHref: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  host: HostElement;
-  parentIsTopPart: boolean;
-  connectedCallback(): void;
-  render(): any;
-}

package/dist/types/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.d.ts

@@ -1,11 +0,0 @@
-import { HostElement } from '../../../../stencil-public-runtime';
-export declare class SddsFooterLinkGroup {
-  /** Title text for the link group, only valid on top part of footer. */
-  titleText: string;
-  host: HostElement;
-  open: boolean;
-  rightSlot: boolean;
-  parentIsTopPart: boolean;
-  connectedCallback(): void;
-  render(): any;
-}

package/dist/types/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.d.ts

@@ -1,10 +0,0 @@
-export declare class SddsFolderTabsButton {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  tabWidth: number;
-  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
-  setTabWidth(width: number): Promise<void>;
-  render(): any;
-}

package/dist/types/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.d.ts

@@ -1,16 +0,0 @@
-export declare class SddsFolderTabsLink {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  tabWidth: number;
-  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
-  setTabWidth(width: number): Promise<void>;
-  render(): any;
-}

package/dist/types/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.d.ts

@@ -1,7 +0,0 @@
-export declare class SddsInlineTabsButton {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  render(): any;
-}

package/dist/types/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.d.ts

@@ -1,13 +0,0 @@
-export declare class SddsInlineTabsLink {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  render(): any;
-}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.d.ts

@@ -1,7 +0,0 @@
-export declare class SddsNavigationTabsButton {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  render(): any;
-}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.d.ts

@@ -1,13 +0,0 @@
-export declare class SddsNavigationTabsLink {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  render(): any;
-}