npm - @scania/tegel - Versions diffs - 0.0.4 → 0.0.5 - Mend

@scania/tegel 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (745) hide show

package/dist/tegel/p-77a4950d.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tableBodyCellCss","relevantTableProps","TableBodyCell","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","headCellHoverEventListener","receivedID","receivedKeyValue","activeSorting","cellKey","textAlignEventListener","receivedKey","receivedTextAlign","textAlignState","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","render","h","Host","class","compactDesign","verticalDividers","noMinWidth","disablePadding","style","textAlign","cellValue","tableBodyRowCss","TableBodyRow","bodyCheckBoxClicked","row","bodyCheckBoxStatus","currentTarget","checked","classList","add","remove","bodyRowToTable","emit","bodyCheckBoxStatusUpdater","status","mainCheckBoxStatus","headCheckboxListener","updateBodyCheckboxesEventListener","receivedBodyCheckboxStatus","componentDidLoad","runPaginationEvent","modeVariant","enableMultiselect","type","onChange"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: table-cell;\n box-sizing: border-box;\n color: var(--sdds-data-table-color);\n padding: var(--sdds-spacing-element-16);\n min-width: 192px;\n vertical-align: top;\n background-color: transparent;\n transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n@Component({\n tag: 'sdds-body-cell',\n styleUrl: 'table-body-cell.scss',\n shadow: true,\n})\nexport class TableBodyCell {\n /** Value that will be presented as text inside a cell */\n @Prop({ reflect: true }) cellValue: string | number;\n\n /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n @Prop({ reflect: true }) cellKey: any;\n\n /** Disables internal padding. Useful when passing other components to cell. */\n @Prop({ reflect: true }) disablePadding: boolean = false;\n\n @State() textAlignState: string;\n\n @State() activeSorting: 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 @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\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 // Listen to headKey from data-table-header-element\n @Listen('headCellHoverEvent', { target: 'body' })\n headCellHoverEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedKeyValue] = event.detail;\n\n if (this.tableId === receivedID) {\n this.activeSorting = this.cellKey === receivedKeyValue;\n }\n }\n\n // Listen to textAlignEvent from data-table-header-element\n @Listen('textAlignEvent', { target: 'body' })\n textAlignEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n if (this.tableId === receivedID) {\n if (this.cellKey === receivedKey) {\n this.textAlignState = receivedTextAlign;\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\n render() {\n return (\n <Host\n class={{\n 'sdds-table__body-cell': true,\n 'sdds-table__body-cell--hover': this.activeSorting,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table__body-cell--no-padding': this.disablePadding,\n }}\n style={{ textAlign: this.textAlignState }}\n >\n {this.cellValue}\n <slot />\n </Host>\n );\n }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n @include sdds-box-sizing;\n\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n\n .sdds-table__body-cell--checkbox {\n min-width: 48px;\n width: 48px;\n padding: 0;\n }\n}\n\n:host(.sdds-table__row:hover) {\n background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n display: none;\n}\n\n:host(.sdds-table__row--expended) {\n width: 100%;\n background-color: pink;\n}\n\n:host {\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n}\n\n:host(.sdds-table__compact) {\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__body-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'verticalDividers',\n 'compactDesign',\n 'modeVariant',\n];\n\n@Component({\n tag: 'sdds-table-body-row',\n styleUrl: 'table-body-row.scss',\n shadow: true,\n})\nexport class TableBodyRow {\n @State() enableMultiselect: boolean = false;\n\n @State() bodyCheckBoxStatus: boolean = false;\n\n @State() mainCheckBoxStatus: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' | 'secondary' = null;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n bodyCheckBoxClicked(event) {\n const row = this.host;\n this.bodyCheckBoxStatus = event.currentTarget.checked;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n }\n\n bodyCheckBoxStatusUpdater(status) {\n this.mainCheckBoxStatus = status;\n this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n const row = this.host;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n }\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\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 /** Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n @Event({\n eventName: 'bodyRowToTable',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n bodyRowToTable: EventEmitter<boolean>;\n\n /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: 'runPaginationEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n runPaginationEvent: EventEmitter<string>;\n\n @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n headCheckboxListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n this.bodyCheckBoxStatusUpdater(event.detail[1]);\n }\n }\n\n @Listen('updateBodyCheckboxesEvent', { target: 'body' })\n updateBodyCheckboxesEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\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\n componentDidLoad() {\n this.runPaginationEvent.emit(this.tableId);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n {this.enableMultiselect && (\n <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(event) => this.bodyCheckBoxClicked(event)}\n checked={this.bodyCheckBoxStatus}\n />\n </label>\n </div>\n </td>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-84e5d141.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,h as s,H as o,g as a}from"./p-0b4eba86.js";const l=":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal {box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";const i=class{constructor(s){d(this,s);this.prevent=false;this.size="md";this.actions="static";this.open=false}async openModal(){this.open=true}setDissmissButtons(){const d=this.el.querySelectorAll("[data-dismiss-modal]");[...Array.from(d),this.closeButtonEl].forEach((d=>{d.addEventListener("click",(()=>{this.open=false}))}))}handleClick(d){const s=d.composedPath();const o=s[0];if(o.classList[0]==="sdds-modal-close"\|\|o.classList[0]==="sdds-modal-backdrop"&&this.prevent===false){this.open=false}}componentDidRender(){this.setDissmissButtons()}render(){return s(o,{onClick:d=>{this.handleClick(d)},class:`sdds-modal-backdrop ${this.open?"show":"hide"}`},s("div",{class:`sdds-modal ${this.actions?`sdds-modal__actions-${this.actions}`:""} ${this.size?`sdds-modal-${this.size}`:""} `},s("div",{class:"sdds-modal-header"},s("slot",{name:"sdds-modal-headline"}),s("button",{class:"sdds-modal-close","aria-label":"close",ref:d=>{this.closeButtonEl=d}},s("sdds-icon",{name:"cross",size:"20px"}))),s("div",{class:"sdds-modal-body"},s("slot",{name:"sdds-modal-body"})),s("div",{class:"sdds-modal-actions"},s("slot",{name:"sdds-modal-actions"}))))}get el(){return a(this)}};i.style=l;export{i as sdds_modal};
2	- //# sourceMappingURL=p-84e5d141.entry.js.map

package/dist/tegel/p-84e5d141.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["modalCss","Modal","async","this","open","setDissmissButtons","nodes","el","querySelectorAll","Array","from","closeButtonEl","forEach","addEventListener","handleClick","e","targetList","composedPath","target","classList","prevent","componentDidRender","render","h","Host","onClick","event","class","actions","size","name","ref"],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n $screen-s: (\n xs: 100%,\n sm: 100%,\n md: 100%,\n lg: 100%,\n ),\n $screen-md: (\n xs: 75%,\n sm: 62.5%,\n md: 75%,\n lg: 100%,\n ),\n $screen-l: (\n xs: 31.25%,\n sm: 43.75%,\n md: 62.5%,\n lg: 75%,\n ),\n $screen-xl: (\n xs: 31.25%,\n sm: 37.5%,\n md: 62.5%,\n lg: 75%,\n ),\n $screen-xxl: (\n xs: 25%,\n sm: 37.5%,\n md: 50%,\n lg: 75%,\n ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n /* SCROLL STUFF */\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n background-color: var(--sdds-grey-300);\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background-color: var(--sdds-grey-300);\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background-color: var(--sdds-grey-500);\n }\n}\n\n@mixin modal-scroll-outer {\n /* SCROLL STUFF */\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n background-color: var(--sdds-grey-300);\n border-radius: 0 1em 1em 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background-color: var(--sdds-grey-300);\n border-radius: 0 1em 1em 0;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background-color: var(--sdds-grey-500);\n border-radius: 0 1em 1em 0;\n }\n}\n\n@mixin modal-host {\n left: 0;\n top: 0;\n position: fixed;\n height: 100%;\n width: 100%;\n z-index: z(modal);\n background-color: var(--sdds-modal-backdrop);\n padding: 0 16px;\n\n @media (max-width: $screen-s) {\n padding: 0;\n }\n\n &.show {\n display: flex;\n }\n\n &.hide {\n display: none;\n }\n}\n\n@mixin modal-header {\n display: flex;\n padding-bottom: var(--sdds-spacing-element-8);\n position: sticky;\n top: 0;\n background-color: var(--sdds-modal-background);\n z-index: 1;\n\n &::before {\n content: ' ';\n position: absolute;\n height: 16px;\n top: -16px;\n width: 100%;\n background-color: var(--sdds-modal-background);\n }\n}\n\n@mixin modal-headline {\n color: var(--sdds-modal-text);\n font: var(--sdds-headline-05);\n letter-spacing: var(--sdds-headline-05-ls);\n margin: 0;\n flex: 1;\n}\n\n@mixin modal-body {\n color: var(--sdds-modal-text);\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n padding-bottom: 40px;\n overflow-y: visible;\n padding-right: 16px;\n @include modal-scroll-inner;\n\n @media (min-width: $screen-l) {\n padding-right: 64px;\n }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n @include sdds-box-sizing;\n\n background-color: var(--sdds-modal-background);\n margin: auto;\n position: relative;\n border-radius: 4px;\n padding: 16px;\n max-height: 85vh;\n overflow-y: auto;\n\n @include modal-scroll-outer;\n\n &__actions-sticky {\n overflow: hidden;\n\n .sdds-modal-body {\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n padding-bottom: 96px;\n margin: 0 -16px 0 0;\n max-height: calc(85vh - 36px);\n overflow-y: auto;\n }\n\n .sdds-modal-actions {\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n background-color: var(--sdds-modal-background);\n padding: var(--sdds-spacing-element-16);\n display: flex;\n gap: 16px;\n }\n }\n\n &__actions-static {\n .sdds-modal-actions {\n background-color: var(--sdds-modal-background);\n display: flex;\n gap: 16px;\n }\n }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n @media (min-width: $screen) {\n @each $modal, $value in $modals {\n .sdds-modal-#{$modal} {\n width: $value;\n }\n }\n }\n}\n\n@media (max-width: $screen-s) {\n .sdds-modal-md,\n .sdds-modal-lg,\n .sdds-modal-sm {\n height: 100%;\n\n slot[name='sdds-modal-actions']::slotted(*) {\n display: flex;\n }\n }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n @include modal-header;\n}\n\n.sdds-modal-headline {\n @include modal-headline;\n\n color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n @include modal-body;\n}\n\n.sdds-modal-backdrop {\n @include sdds-box-sizing;\n @include modal-host;\n}\n\nbutton.sdds-modal-close {\n background-color: transparent;\n border: 0;\n padding: 0;\n appearance: unset;\n}\n\n.sdds-modal-close {\n display: inline-block;\n height: auto;\n color: var(--sdds-modal-icon);\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n\n @media (min-width: $screen-s) {\n margin-left: var(--sdds-spacing-element-16);\n }\n\n @media (min-width: $screen-l) {\n margin-left: var(--sdds-spacing-element-48);\n }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n display: inline-block;\n height: auto;\n background-repeat: no-repeat;\n cursor: pointer;\n\n @media (min-width: $screen-s) {\n margin-left: var(--sdds-spacing-element-16);\n }\n\n @media (min-width: $screen-l) {\n margin-left: var(--sdds-spacing-element-48);\n }\n\n svg {\n fill: var(--sdds-modal-icon);\n }\n}\n\n.sdds-modal-overflow {\n overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n @include modal-host;\n\n .sdds-modal-close {\n border: none;\n background-color: transparent;\n }\n\n .sdds-modal-close-btn {\n border: none;\n background-color: transparent;\n }\n}\n\n:host(.show) {\n display: flex;\n}\n\n:host(.hide) {\n display: none;\n}\n","import { Component, h, Host, Prop, Element, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n /** Disables closing modal on clicking on overlay area. */\n @Prop() prevent: boolean = false;\n\n /** Size of modal */\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n /** Sticky or Static Actions */\n @Prop() actions: 'sticky' | 'static' = 'static';\n\n /* Opens or closes the modal. */\n @Prop() open: boolean = false;\n\n @Element() el: HTMLElement;\n\n closeButtonEl: HTMLElement;\n\n /** Shows the modal */\n @Method()\n async openModal() {\n this.open = true;\n }\n\n setDissmissButtons() {\n const nodes = this.el.querySelectorAll('[data-dismiss-modal]');\n\n [...Array.from(nodes), this.closeButtonEl].forEach((el) => {\n el.addEventListener('click', () => {\n this.open = false;\n });\n });\n }\n\n handleClick(e) {\n const targetList = e.composedPath();\n const target = targetList[0];\n if (\n target.classList[0] === 'sdds-modal-close' ||\n (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n ) {\n this.open = false;\n }\n }\n\n componentDidRender() {\n this.setDissmissButtons();\n }\n\n render() {\n return (\n <Host\n onClick={(event) => {\n this.handleClick(event);\n }}\n class={`sdds-modal-backdrop ${this.open ? 'show' : 'hide'}`}\n >\n <div\n class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n this.size ? `sdds-modal-${this.size}` : ''\n } `}\n >\n <div class=\"sdds-modal-header\">\n <slot name=\"sdds-modal-headline\"></slot>\n <button\n class=\"sdds-modal-close\"\n aria-label=\"close\"\n ref={(el) => {\n this.closeButtonEl = el as HTMLElement;\n }}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n\n <div class=\"sdds-modal-body\">\n <slot name=\"sdds-modal-body\"></slot>\n </div>\n\n <div class=\"sdds-modal-actions\">\n <slot name=\"sdds-modal-actions\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAW,++M,MCOJC,EAAK,M,sCAEW,M,UAGe,K,aAGH,S,UAGf,K,CAQxBC,kBACEC,KAAKC,KAAO,I,CAGdC,qBACE,MAAMC,EAAQH,KAAKI,GAAGC,iBAAiB,wBAEvC,IAAIC,MAAMC,KAAKJ,GAAQH,KAAKQ,eAAeC,SAASL,IAClDA,EAAGM,iBAAiB,SAAS,KAC3BV,KAAKC,KAAO,KAAK,GACjB,G,CAINU,YAAYC,GACV,MAAMC,EAAaD,EAAEE,eACrB,MAAMC,EAASF,EAAW,GAC1B,GACEE,EAAOC,UAAU,KAAO,oBACvBD,EAAOC,UAAU,KAAO,uBAAyBhB,KAAKiB,UAAY,MACnE,CACAjB,KAAKC,KAAO,K,EAIhBiB,qBACElB,KAAKE,oB,CAGPiB,SACE,OACEC,EAACC,EAAI,CACHC,QAAUC,IACRvB,KAAKW,YAAYY,EAAM,EAEzBC,MAAO,uBAAuBxB,KAAKC,KAAO,OAAS,UAEnDmB,EAAA,OACEI,MAAO,cAAcxB,KAAKyB,QAAU,uBAAuBzB,KAAKyB,UAAY,MAC1EzB,KAAK0B,KAAO,cAAc1B,KAAK0B,OAAS,OAG1CN,EAAA,OAAKI,MAAM,qBACTJ,EAAA,QAAMO,KAAK,wBACXP,EAAA,UACEI,MAAM,mBAAkB,aACb,QACXI,IAAMxB,IACJJ,KAAKQ,cAAgBJ,CAAiB,GAGxCgB,EAAA,aAAWO,KAAK,QAAQD,KAAK,WAIjCN,EAAA,OAAKI,MAAM,mBACTJ,EAAA,QAAMO,KAAK,qBAGbP,EAAA,OAAKI,MAAM,sBACTJ,EAAA,QAAMO,KAAK,yB"}

package/dist/tegel/p-913cb5e9.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as s,H as a,g as o}from"./p-0b4eba86.js";const i='.sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-background);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:" ";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-background);opacity:var(--sdds-navigation-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);opacity:0.6;padding:26px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}::slotted(.sdds-navigation-tabs-tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-color-focus);opacity:1}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-color-active);opacity:1}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-color-disabled);opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled);pointer-events:none}';const n=class{constructor(s){t(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false;this.modeVariant=null}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let a=0;const o=Array.from(this.host.children);o.forEach((t=>{const s=window.getComputedStyle(t);a+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);t.classList.add("sdds-navigation-tabs-tab")}));this.componentWidth=s;this.buttonsWidth=a;this.scrollWidth=a-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let t=0;const s=Array.from(this.host.children);s.forEach((s=>{const a=window.getComputedStyle(s);const o=s.clientWidth+parseFloat(a.marginLeft)+parseFloat(a.marginRight);if(o>t){t=o}}));this.buttonWidth=t}scrollRight(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const t=this.navWrapperElement.scrollLeft;if(t>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(t<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(a,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:"sdds-navigation-tabs"},s("div",{class:"sdds-navigation-tabs-wrapper",ref:t=>{this.navWrapperElement=t}},s("slot",null)),s("div",{class:"sdds-navigation-tabs-navigation"},s("button",{class:`sdds-navigation-tabs-forward ${this.showRightScroll?"sdds-navigation-tabs-forward-show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z",fill:"#0D0F13"}))),s("button",{class:`sdds-navigation-tabs-back ${this.showLeftScroll?"sdds-navigation-tabs-back-show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z",fill:"#0D0F13"}))))))}get host(){return o(this)}};n.style=i;export{n as sdds_navigation_tabs};
2	- //# sourceMappingURL=p-913cb5e9.entry.js.map

package/dist/tegel/p-913cb5e9.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["navigationTabsCss","NavigationTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n\n.sdds-navigation-tabs {\n @include sdds-box-sizing;\n\n background-color: var(--sdds-navigation-tabs-background);\n position: relative;\n display: flex;\n\n &::after {\n content: ' ';\n display: block;\n border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);\n opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n }\n\n &-wrapper {\n display: flex;\n flex-wrap: nowrap;\n width: 100%;\n overflow-x: scroll;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &-forward {\n cursor: pointer;\n width: 48px;\n height: 100%;\n border: 0;\n position: absolute;\n right: 0;\n top: 0;\n background-color: var(--sdds-navigation-tabs-scroll-btn-background);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n\n &__show {\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);\n text-decoration: none;\n }\n\n &:active {\n background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n\n &-back {\n cursor: pointer;\n width: 48px;\n height: 100%;\n border: 0;\n position: absolute;\n left: 0;\n top: 0;\n background-color: var(--sdds-navigation-tabs-scroll-btn-background);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n\n &__show {\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n\n /* tab */\n ::slotted(&-tab) {\n //fixme: headline-07 has a line-height that is not matching old storybook\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-navigation-tabs-tab-color);\n opacity:0.6;\n padding: 26px 0;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n\n ::slotted(&-tab:first-child) {\n margin-left: 32px;\n }\n\n ::slotted(&-tab:last-child) {\n margin-right: 32px;\n }\n\n /* tab states */\n ::slotted(&-tab:hover) {\n color: var(--sdds-navigation-tabs-tab-color-hover);\n opacity: 1;\n\n &::after {\n width: 100%;\n }\n }\n\n ::slotted(&-tab:focus) {\n @include sdds-focus-state;\n\n color: var(--sdds-navigation-tabs-tab-color-focus);\n opacity: 1;\n\n &::after {\n width: 0;\n }\n }\n\n ::slotted(&-tab-active) {\n color: var(--sdds-navigation-tabs-tab-color-active);\n opacity:1;\n\n &::after {\n width: 100%;\n\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n }\n }\n\n ::slotted(&-tab-active:focus)::after {\n width: 100%;\n }\n\n ::slotted(&-tab-disabled) {\n color: var(--sdds-navigation-tabs-tab-color-disabled);\n opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n pointer-events: none;\n }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-navigation-tabs',\n styleUrl: 'navigation-tabs.scss',\n shadow: true,\n})\nexport class NavigationTabs {\n @Element() host: HTMLElement;\n\n @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n \n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n componentWidth: number = 0; // visible width of this component\n\n buttonsWidth: number = 0; // total width of all nav items combined\n\n scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n buttonWidth: number = 0; // current calculated width of the largest nav button\n\n componentDidRender() {\n this.calculateButtonWidth();\n }\n\n componentDidLoad() {\n const resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n const componentWidth = entry.contentRect.width;\n let buttonsWidth = 0;\n\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n buttonsWidth +=\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n navButton.classList.add('sdds-navigation-tabs-tab');\n });\n\n this.componentWidth = componentWidth;\n this.buttonsWidth = buttonsWidth;\n this.scrollWidth = buttonsWidth - componentWidth;\n\n if (this.buttonsWidth > this.componentWidth) {\n this.evaluateScrollButtons();\n } else {\n this.showLeftScroll = false;\n this.showRightScroll = false;\n }\n });\n });\n\n resizeObserver.observe(this.navWrapperElement);\n\n this.calculateButtonWidth();\n }\n\n calculateButtonWidth() {\n let best = 0;\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n const width =\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n if (width > best) {\n best = width;\n }\n });\n\n this.buttonWidth = best;\n }\n\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n evaluateScrollButtons() {\n const scroll = this.navWrapperElement.scrollLeft;\n\n if (scroll >= this.scrollWidth) {\n this.showRightScroll = false;\n } else {\n this.showRightScroll = true;\n }\n\n if (scroll <= 0) {\n this.showLeftScroll = false;\n } else {\n this.showLeftScroll = true;\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <div class=\"sdds-navigation-tabs\">\n <div\n class=\"sdds-navigation-tabs-wrapper\"\n ref={(el) => {\n this.navWrapperElement = el as HTMLElement;\n }}\n >\n <slot />\n </div>\n <div class=\"sdds-navigation-tabs-navigation\">\n <button\n class={`sdds-navigation-tabs-forward ${\n this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''\n }`}\n onClick={() => this.scrollRight()}\n disabled={!this.showRightScroll}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n fill=\"#0D0F13\"\n ></path>\n </svg>\n </button>\n <button\n class={`sdds-navigation-tabs-back ${\n this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''\n }`}\n onClick={() => this.scrollLeft()}\n disabled={!this.showLeftScroll}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n fill=\"#0D0F13\"\n ></path>\n </svg>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,m7G,MCObC,EAAc,M,yBAYzBC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,UAjBM,G,oBAEO,M,qBAEC,M,iBAGY,I,CAYhDC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,2BAA2B,IAGrD9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAAEC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACpFH,EAAA,OAAKE,MAAM,wBACTF,EAAA,OACEE,MAAM,+BACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,mCACTF,EAAA,UACEE,MAAO,gCACL1C,KAAKiC,gBAAkB,oCAAsC,KAE/Da,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,4WACFF,KAAK,cAIXV,EAAA,UACEE,MAAO,6BACL1C,KAAKgC,eAAiB,iCAAmC,KAE3Dc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,kXACFF,KAAK,gB"}

package/dist/tegel/p-93571e36.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as l,h as s,H as e,g as t}from"./p-0b4eba86.js";const i='.sdds-inline-tabs-fullbleed{box-sizing:border-box;display:flex;position:relative;}.sdds-inline-tabs-fullbleed *{box-sizing:border-box}.sdds-inline-tabs-fullbleed::after{content:" ";display:block;border-bottom:1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);opacity:var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-inline-tabs-fullbleed-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs-fullbleed--forward,.sdds-inline-tabs-fullbleed--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs-fullbleed--forward__show,.sdds-inline-tabs-fullbleed--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs-fullbleed--forward:hover,.sdds-inline-tabs-fullbleed--back:hover{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover)}.sdds-inline-tabs-fullbleed--forward:active,.sdds-inline-tabs-fullbleed--back:active{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active)}.sdds-inline-tabs-fullbleed--forward:focus,.sdds-inline-tabs-fullbleed--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs-fullbleed--forward svg,.sdds-inline-tabs-fullbleed--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs-fullbleed-centered{justify-content:center}::slotted(.sdds-inline-tabs-fullbleed--tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-fullbleed-tab-color);opacity:0.6;padding:16px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;text-align:left}::slotted(.sdds-inline-tabs-fullbleed--tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active){color:var(--sdds-inline-tabs-fullbleed-tab-color-active);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after{width:100%;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active)}::slotted(.sdds-inline-tabs-fullbleed--tab:first-child){margin-left:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:last-child){margin-right:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:hover){color:var(--sdds-inline-tabs-fullbleed-tab-color-hover);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-inline-tabs-fullbleed-tab-color-focus);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after{width:0}::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab__disabled){color:var(--sdds-inline-tabs-fullbleed-tab-color-disabled);pointer-events:none;opacity:var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled)}.sdds-inline-tabs-fullbleed{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}';const d=class{constructor(s){l(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.modeVariant=null;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const l=new ResizeObserver((l=>{l.forEach((l=>{const s=l.contentRect.width;let e=0;const t=Array.from(this.host.children);t.forEach((l=>{const s=window.getComputedStyle(l);e+=l.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);l.classList.add("sdds-inline-tabs-fullbleed--tab")}));this.componentWidth=s;this.buttonsWidth=e;this.scrollWidth=e-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));l.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let l=0;const s=Array.from(this.host.children);s.forEach((s=>{const e=window.getComputedStyle(s);const t=s.clientWidth+parseFloat(e.marginLeft)+parseFloat(e.marginRight);if(t>l){l=t}}));this.buttonWidth=l}scrollRight(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const l=this.navWrapperElement.scrollLeft;if(l>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(l<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(e,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:`sdds-inline-tabs-fullbleed`},s("div",{class:"sdds-inline-tabs-fullbleed-wrapper",ref:l=>{this.navWrapperElement=l}},s("slot",null)),s("div",{class:"sdds-inline-tabs-fullbleed-navigation"},s("button",{class:`sdds-inline-tabs-fullbleed--forward ${this.showRightScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z"}))),s("button",{class:`sdds-inline-tabs-fullbleed--back ${this.showLeftScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z"}))))))}get host(){return t(this)}};d.style=i;export{d as sdds_inline_tabs_fullbleed};
2	- //# sourceMappingURL=p-93571e36.entry.js.map

package/dist/tegel/p-93571e36.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["inlineTabsFullbleedCss","InlineTabsFullbleed","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n @include sdds-box-sizing;\n\n display: flex;\n position: relative;\n\n &::after {\n content: ' ';\n display: block;\n border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n }\n\n &-wrapper {\n display: flex;\n flex-wrap: nowrap;\n width: 100%;\n overflow-x: scroll;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &--forward,\n &--back {\n cursor: pointer;\n width: 48px;\n height: 100%;\n border: 0;\n position: absolute;\n right: 0;\n top: 0;\n background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n\n &__show {\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n svg{\n fill:var(--sdds-inline-tabs-scroll-btn-color);\n }\n }\n\n &-centered {\n justify-content: center;\n }\n\n /* tab */\n ::slotted(&--tab) {\n //fixme: headline-07 has a line-height that is not matching old storybook\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-inline-tabs-fullbleed-tab-color);\n opacity: 0.6;\n padding: 16px 0;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out;\n white-space: nowrap;\n text-align: left;\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n \n ::slotted(&--tab__active) {\n color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n opacity:1;\n\n &::after {\n width: 100%;\n background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n }\n }\n\n ::slotted(&--tab:first-child) {\n margin-left: 32px;\n }\n\n ::slotted(&--tab:last-child) {\n margin-right: 32px;\n }\n\n /* tab states */\n ::slotted(&--tab:hover) {\n color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n opacity:1;\n\n &::after {\n width: 100%;\n }\n }\n\n ::slotted(&--tab:focus) {\n @include sdds-focus-state;\n\n color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n opacity:1;\n \n &::after {\n width: 0;\n }\n }\n\n ::slotted(&--tab__active:focus)::after {\n width: 100%;\n }\n\n ::slotted(&--tab__disabled) {\n color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n pointer-events: none;\n opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n }\n}\n\n.sdds-inline-tabs-fullbleed {\n background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n .sdds-inline-tabs-fullbleed--forward {\n background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n }\n\n .sdds-inline-tabs-fullbleed--back {\n background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tabs-fullbleed',\n styleUrl: 'inline-tabs-fullbleed.scss',\n shadow: true,\n})\nexport class InlineTabsFullbleed {\n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @Element() host: HTMLElement;\n\n @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n\n navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n componentWidth: number = 0; // visible width of this component\n\n buttonsWidth: number = 0; // total width of all nav items combined\n\n scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n buttonWidth: number = 0; // current calculated width of the largest nav button\n\n componentDidRender() {\n this.calculateButtonWidth();\n }\n\n componentDidLoad() {\n const resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n const componentWidth = entry.contentRect.width;\n let buttonsWidth = 0;\n\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n buttonsWidth +=\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n });\n\n this.componentWidth = componentWidth;\n this.buttonsWidth = buttonsWidth;\n this.scrollWidth = buttonsWidth - componentWidth;\n\n if (this.buttonsWidth > this.componentWidth) {\n this.evaluateScrollButtons();\n } else {\n this.showLeftScroll = false;\n this.showRightScroll = false;\n }\n });\n });\n\n resizeObserver.observe(this.navWrapperElement);\n\n this.calculateButtonWidth();\n }\n\n calculateButtonWidth() {\n let best = 0;\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n const width =\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n if (width > best) {\n best = width;\n }\n });\n\n this.buttonWidth = best;\n }\n\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n evaluateScrollButtons() {\n const scroll = this.navWrapperElement.scrollLeft;\n\n if (scroll >= this.scrollWidth) {\n this.showRightScroll = false;\n } else {\n this.showRightScroll = true;\n }\n\n if (scroll <= 0) {\n this.showLeftScroll = false;\n } else {\n this.showLeftScroll = true;\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <div class={`sdds-inline-tabs-fullbleed`}>\n <div\n class=\"sdds-inline-tabs-fullbleed-wrapper\"\n ref={(el) => {\n this.navWrapperElement = el as HTMLElement;\n }}\n >\n <slot />\n </div>\n <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n <button\n class={`sdds-inline-tabs-fullbleed--forward ${\n this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n }`}\n onClick={() => this.scrollRight()}\n disabled={!this.showRightScroll}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n ></path>\n </svg>\n </button>\n <button\n class={`sdds-inline-tabs-fullbleed--back ${\n this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n }`}\n onClick={() => this.scrollLeft()}\n disabled={!this.showLeftScroll}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n ></path>\n </svg>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,mqH,MCOlBC,EAAmB,M,yBAY9BC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,iBAlByB,K,UAInB,G,oBAEO,M,qBAEC,K,CAYpCC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,kCAAkC,IAG5D9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACnFH,EAAA,OAAKE,MAAO,8BACVF,EAAA,OACEE,MAAM,qCACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,yCACTF,EAAA,UACEE,MAAO,uCACL1C,KAAKiC,gBAAkB,yCAA2C,KAEpEa,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,gXAIRZ,EAAA,UACEE,MAAO,oCACL1C,KAAKgC,eAAiB,yCAA2C,KAEnEc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,wX"}

package/dist/tegel/p-9904d7ec.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tableHeaderCss","relevantTableProps","TableHeaderRow","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","updateMainCheckboxEventListener","receivedID","receivedMainCheckboxStatus","mainCheckboxSelected","singleRowExpandedEventListener","setTimeout","bodyExpandClicked","numberOfExtendRowsActive","host","parentElement","querySelector","getElementsByClassName","length","numberOfExtendRows","getElementsByTagName","mainExpendSelected","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","componentWillRender","enableToolbarDesign","headCheckBoxClicked","currentTarget","checked","mainCheckboxSelectedEvent","emit","render","h","Host","class","compactDesign","verticalDividers","enableMultiselect","type","onChange","e","enableExpandableRows"],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-header-group;\n\n .sdds-table__header-cell--checkbox {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-divider);\n height: 48px;\n box-sizing: border-box;\n\n // To fix issues with border-radius propagating up from button\n overflow: hidden;\n transition: background-color 200ms ease;\n min-width: unset;\n width: 48px;\n padding: 0;\n border-top-left-radius: 4px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n cursor: pointer;\n\n .sdds-table__expand-input {\n display: none;\n }\n\n .sdds-expandable-row-icon {\n height: 20px;\n width: 20px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n\n .sdds-expandable-row-icon--opened {\n transform: rotate(180deg);\n }\n }\n\n ::slotted(sdds-header-cell:hover) {\n background-color: var(--sdds-data-table-header-background-hover);\n }\n}\n\n:host(.sdds-table--compact) {\n .sdds-table__header-cell--checkbox {\n height: 32px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__header-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n\n:host(.sdds-table--toolbar-available) {\n .sdds-table__header-cell--checkbox {\n border-top-left-radius: 0;\n }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: 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() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'mainCheckboxSelectedEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n mainCheckboxSelectedEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\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 @Listen('updateMainCheckboxEvent', { target: 'body' })\n updateMainCheckboxEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('singleRowExpandedEvent', { target: 'body' })\n singleRowExpandedEventListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\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\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,g6MCGvB,MAAMC,EAAwD,CAC5D,oBACA,uBACA,mBACA,gBACA,c,MAQWC,EAAc,M,qHACa,M,0BAEG,M,0BAEA,M,wBAEF,M,sBAEF,M,mBAEH,M,gBAEH,M,qBAEK,M,yBAEI,M,aAEb,E,CAgB3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAMrDI,gCAAgCV,GAC9B,MAAOW,EAAYC,GAA8BZ,EAAMG,OACvD,GAAIF,KAAKC,UAAYS,EAAY,CAC/BV,KAAKY,qBAAuBD,C,EAKhCE,+BAA+Bd,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAO,GAAI,CAEpCY,YAAW,KACTd,KAAKe,mBAAmB,GACvB,I,EAIPA,oBACE,MAAMC,EAA2BhB,KAAKiB,KAAKC,cACxCC,cAAc,mBACdC,uBAAuB,kCAAkCC,OAC5D,MAAMC,EAAqBtB,KAAKiB,KAAKC,cAClCC,cAAc,mBACdI,qBAAqB,kCAAkCF,OAE1D,GAAIC,IAAuBN,EAA0B,CACnDhB,KAAKwB,mBAAqB,I,KACrB,CACLxB,KAAKwB,mBAAqB,K,EAI9BC,oBACEzB,KAAK0B,QAAU1B,KAAKiB,KAAKU,QAAQ,cACjC3B,KAAKC,QAAUD,KAAK0B,QAAQzB,O,CAG9B2B,oBACEhC,EAAmBW,SAASsB,IAC1B7B,KAAK6B,GAAiB7B,KAAK0B,QAAQG,EAAc,G,CAIrDC,sBACE9B,KAAK+B,oBACH/B,KAAKiB,KAAKU,QAAQ,cAAcJ,qBAAqB,sBAAsBF,QAAU,C,CAGzFW,oBAAoBjC,GAClBC,KAAKY,qBAAuBb,EAAMkC,cAAcC,QAChDlC,KAAKmC,0BAA0BC,KAAK,CAACpC,KAAKC,QAASD,KAAKY,sB,CAG1DyB,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,sBAAuBxC,KAAKyC,cAC5B,sBAAuBzC,KAAK0C,iBAC5B,gCAAiC1C,KAAK+B,sBAGxCO,EAAA,UACGtC,KAAK2C,mBACJL,EAAA,MAAIE,MAAM,6DACRF,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,+CACXF,EAAA,SACEE,MAAM,kBACNI,KAAK,WACLC,SAAWC,GAAM9C,KAAKgC,oBAAoBc,GAC1CZ,QAASlC,KAAKY,0BAMvBZ,KAAK+C,sBACJT,EAAA,MAAIE,MAAM,8DAEZF,EAAA,c"}

package/dist/tegel/p-a3741fdd.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as o,H as i,g as t}from"./p-0b4eba86.js";import{c as e}from"./p-ec26fc38.js";const n=":host{box-sizing:border-box;min-width:160px;min-height:160px;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";const a=class{constructor(o){s(this,o);this.selector="";this.referenceEl=undefined;this.show=false;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined}handleOutsideClick(){if(this.show){this.show=false}}componentDidLoad(){var s;this.target=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);this.renderedShowValue=this.show;this.popperInstance=e(this.target,this.popoverCanvasElement,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const o=()=>{this.show=true};const i=()=>{this.show=false};this.target.addEventListener("mousedown",(s=>{s.stopPropagation();if(this.show){i()}else{o()}}));this.popoverCanvasElement.addEventListener("mousemove",(s=>{s.stopPropagation()}));this.popoverCanvasElement.addEventListener("mousedown",(s=>{s.stopPropagation()}))}componentDidRender(){if(this.show&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.show}disconnectedCallback(){var s;(s=this.popperInstance)===null\|\|s===void 0?void 0:s.destroy()}render(){return o(i,{class:`sdds-popover-canvas ${this.show?"sdds-popover-canvas-show":""}`},o("slot",null))}get popoverCanvasElement(){return t(this)}};a.style=n;export{a as sdds_popover_canvas};
2	- //# sourceMappingURL=p-a3741fdd.entry.js.map

package/dist/tegel/p-a3741fdd.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["popoverCanvasCss","PopoverCanvas","handleOutsideClick","this","show","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","renderedShowValue","popperInstance","createPopper","popoverCanvasElement","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","showCanvas","hideCanvas","addEventListener","event","stopPropagation","componentDidRender","update","disconnectedCallback","destroy","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n min-width: 160px;\n min-height: 160px;\n color: var(--sdds-popover-canvas-color);\n background-color: var(--sdds-popover-canvas-background);\n padding: 16px;\n box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n border-radius: 4px;\n z-index: z(tooltip);\n display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n opacity: 1;\n display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-popover-canvas',\n styleUrl: 'popover-canvas.scss',\n shadow: true,\n})\nexport class PopoverCanvas {\n @Element() popoverCanvasElement!: HTMLElement;\n\n /** The CSS-selector for an element that will trigger the popover */\n @Prop() selector: string = '';\n\n /** Element that will trigger the popover (takes priority over selector) */\n @Prop() referenceEl: HTMLElement;\n\n /** Decides if the Popover Canvas should be visible from the start */\n @Prop() show: boolean = false;\n\n /** Decides the placement of the Popover Canvas */\n @Prop() placement: Placement = 'auto';\n\n /** Sets the offset skidding */\n @Prop() offsetSkidding: number = 0;\n\n /** Sets the offset distance */\n @Prop() offsetDistance: number = 8;\n\n @State() renderedShowValue: boolean = false;\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n @Listen('mousedown', { target: 'window' })\n handleOutsideClick() {\n if (this.show) {\n this.show = false;\n }\n }\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n this.renderedShowValue = this.show;\n\n this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showCanvas = () => {\n this.show = true;\n };\n\n const hideCanvas = () => {\n this.show = false;\n };\n\n this.target.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n\n if (this.show) {\n hideCanvas();\n } else {\n showCanvas();\n }\n });\n\n this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n event.stopPropagation();\n });\n\n this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n });\n }\n\n componentDidRender() {\n if (this.show && !this.renderedShowValue) {\n // Here we update the popper position since its position is wrong\n // before it is rendered.\n this.popperInstance.update();\n }\n this.renderedShowValue = this.show;\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n render() {\n return (\n <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,qX,MCSZC,EAAa,M,uCAIG,G,qCAMH,M,eAGO,O,oBAGE,E,oBAGA,E,uBAEK,M,oDAOtCC,qBACE,GAAIC,KAAKC,KAAM,CACbD,KAAKC,KAAO,K,EAIhBC,mB,MACEF,KAAKG,QAASC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcP,KAAKQ,UAC9DR,KAAKS,kBAAoBT,KAAKC,KAE9BD,KAAKU,eAAiBC,EAAaX,KAAKG,OAAQH,KAAKY,qBAAsB,CACzEC,UAAWb,KAAKa,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACjB,KAAKkB,eAAgBlB,KAAKmB,qBAM3C,MAAMC,EAAa,KACjBpB,KAAKC,KAAO,IAAI,EAGlB,MAAMoB,EAAa,KACjBrB,KAAKC,KAAO,KAAK,EAGnBD,KAAKG,OAAOmB,iBAAiB,aAAcC,IACzCA,EAAMC,kBAEN,GAAIxB,KAAKC,KAAM,CACboB,G,KACK,CACLD,G,KAIJpB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,IAGzBxB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,G,CAI3BC,qBACE,GAAIzB,KAAKC,OAASD,KAAKS,kBAAmB,CAGxCT,KAAKU,eAAegB,Q,CAEtB1B,KAAKS,kBAAoBT,KAAKC,I,CAGhC0B,uB,OACEvB,EAAAJ,KAAKU,kBAAc,MAAAN,SAAA,SAAAA,EAAEwB,S,CAGvBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuBhC,KAAKC,KAAO,2BAA6B,MAC3E6B,EAAA,a"}

package/dist/tegel/p-ba975249.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r,h as d,g as s}from"./p-0b4eba86.js";const e=":root,.sdds-mode-light{--sdds-breadcrumb-color:var(--sdds-grey-900);--sdds-breadcrumb-color-hover:var(--sdds-grey-700);--sdds-breadcrumb-color-focus:var(--sdds-grey-700);--sdds-breadcrumb-color-disabled:var(--sdds-grey-500);--sdds-breadcrumb-separator-color:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-breadcrumb-color:var(--sdds-grey-300);--sdds-breadcrumb-color-hover:var(--sdds-grey-500);--sdds-breadcrumb-color-focus:var(--sdds-grey-500);--sdds-breadcrumb-color-disabled:var(--sdds-grey-700);--sdds-breadcrumb-separator-color:var(--sdds-grey-700)}nav ol.sdds-breadcrumb{box-sizing:border-box;padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}nav ol.sdds-breadcrumb *{box-sizing:border-box}";const a=class{constructor(d){r(this,d)}connectedCallback(){this.el.children[this.el.children.length-1].classList.add("sdds-breadcrumb-item-last")}render(){return d("nav",null,d("ol",{class:"sdds-breadcrumb"},d("slot",null)))}get el(){return s(this)}};a.style=e;export{a as sdds_breadcrumb};
2	- //# sourceMappingURL=p-ba975249.entry.js.map

package/dist/tegel/p-ba975249.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sddsBreadcrumbCss","SddsBreadcrumb","connectedCallback","this","el","children","length","classList","add","render","h","class"],"sources":["./src/components/breadcrumb/sdds-breadcrumb.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb.tsx"],"sourcesContent":["@import 'breadcrumb-vars';\n@import '../../mixins/box-sizing';\n\nnav ol.sdds-breadcrumb {\n @include sdds-box-sizing;\n\n padding: 0;\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n flex-wrap: wrap;\n list-style-type: none;\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb',\n styleUrl: 'sdds-breadcrumb.scss',\n shadow: true,\n})\nexport class SddsBreadcrumb {\n @Element() el: HTMLElement;\n\n connectedCallback() {\n this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n }\n\n render() {\n return (\n <nav>\n <ol class={'sdds-breadcrumb'}>\n <slot></slot>\n </ol>\n </nav>\n );\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAoB,6wB,MCObC,EAAc,M,yBAGzBC,oBACEC,KAAKC,GAAGC,SAASF,KAAKC,GAAGC,SAASC,OAAS,GAAGC,UAAUC,IAAI,4B,CAG9DC,SACE,OACEC,EAAA,WACEA,EAAA,MAAIC,MAAO,mBACTD,EAAA,c"}

package/dist/tegel/p-c79b3861.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as s,h as t,H as a,g as i}from"./p-0b4eba86.js";const d=":host,.sdds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host ,.sdds-table {box-sizing:border-box}:host(.sdds-table--responsive),.sdds-table--responsive{width:100%}";const n=class{constructor(t){e(this,t);this.tablePropsChangedEvent=s(this,"tablePropsChangedEvent",7);this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=undefined;this.enableMultiselect=false;this.enableExpandableRows=false;this.enableResponsive=false;this.modeVariant=null;this.tableId=crypto.randomUUID()}emitTablePropsChangedEvent(e,s){this.tablePropsChangedEvent.emit({tableId:this.tableId,changed:[e],[e]:s})}enableMultiselectChanged(e){this.emitTablePropsChangedEvent("enableMultiselect",e)}enableExpandableRowsChanged(e){this.emitTablePropsChangedEvent("enableExpandableRows",e)}compactDesignChanged(e){this.emitTablePropsChangedEvent("compactDesign",e)}verticalDividersChanged(e){this.emitTablePropsChangedEvent("verticalDividers",e)}noMinWidthChanged(e){this.emitTablePropsChangedEvent("noMinWidth",e)}modeVariantChanged(e){this.emitTablePropsChangedEvent("modeVariant",e)}render(){return t(a,{class:{"sdds-table--responsive":this.enableResponsive}},t("table",{class:{"sdds-table":true,"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table--responsive":this.enableResponsive}},t("slot",null)))}get host(){return i(this)}static get watchers(){return{enableMultiselect:["enableMultiselectChanged"],enableExpandableRows:["enableExpandableRowsChanged"],compactDesign:["compactDesignChanged"],verticalDividers:["verticalDividersChanged"],noMinWidth:["noMinWidthChanged"],modeVariant:["modeVariantChanged"]}}};n.style=d;export{n as sdds_table};
2	- //# sourceMappingURL=p-c79b3861.entry.js.map

package/dist/tegel/p-c79b3861.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tableCss","Table","crypto","randomUUID","emitTablePropsChangedEvent","changedValueName","changedValue","this","tablePropsChangedEvent","emit","tableId","changed","enableMultiselectChanged","newValue","enableExpandableRowsChanged","compactDesignChanged","verticalDividersChanged","noMinWidthChanged","modeVariantChanged","render","h","Host","class","enableResponsive","compactDesign","verticalDividers","noMinWidth"],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n border-collapse: collapse;\n display: table;\n @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n verticalDividers: boolean;\n compactDesign: boolean;\n noMinWidth: boolean;\n enableMultiselect: boolean;\n enableExpandableRows: boolean;\n enableResponsive: boolean;\n modeVariant: 'primary' | 'secondary' | null;\n};\n\nexport type TablePropsChangedEvent = {\n tableId: string;\n changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n tag: 'sdds-table',\n styleUrl: 'table.scss',\n shadow: true,\n})\nexport class Table {\n /** Enables style with vertical dividers between columns */\n @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n /** Enables style where data-table toolbar, rows and footer are less high */\n @Prop({ reflect: true }) compactDesign: boolean = false;\n\n /** Enables to customise width on data-table columns */\n @Prop({ reflect: true }) noMinWidth: boolean;\n // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n /** Enables multiselect feature of data-table */\n @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n /** Enables extended row feature of data-table */\n @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n /** Enables table to take 100% available width with equal spacing of columns */\n @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n /** Variant of the component, based on current mode. */\n @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n /** ID used for internal table functionality and events, must be unique.\n *\n * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n */\n @Prop() tableId: string = crypto.randomUUID();\n\n @Element() host: HTMLElement;\n\n /** Broadcasts changes to the tables props */\n @Event({\n eventName: 'tablePropsChangedEvent',\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n this.tablePropsChangedEvent.emit({\n tableId: this.tableId,\n changed: [changedValueName],\n [changedValueName]: changedValue,\n });\n }\n\n @Watch('enableMultiselect')\n enableMultiselectChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n }\n\n @Watch('enableExpandableRows')\n enableExpandableRowsChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n }\n\n @Watch('compactDesign')\n compactDesignChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('compactDesign', newValue);\n }\n\n @Watch('verticalDividers')\n verticalDividersChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('verticalDividers', newValue);\n }\n\n @Watch('noMinWidth')\n noMinWidthChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('noMinWidth', newValue);\n }\n\n @Watch('modeVariant')\n modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n this.emitTablePropsChangedEvent('modeVariant', newValue);\n }\n\n render() {\n return (\n <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n <table\n class={{\n 'sdds-table': true,\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--responsive': this.enableResponsive,\n }}\n >\n <slot />\n </table>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,gM,MCyBJC,EAAK,M,8GAEqC,M,mBAGH,M,iDAOI,M,0BAGG,M,sBAGJ,M,iBAGW,K,aAMtCC,OAAOC,Y,CAajCC,2BAA2BC,EAA+BC,GACxDC,KAAKC,uBAAuBC,KAAK,CAC/BC,QAASH,KAAKG,QACdC,QAAS,CAACN,GACVA,CAACA,GAAmBC,G,CAKxBM,yBAAyBC,GACvBN,KAAKH,2BAA2B,oBAAqBS,E,CAIvDC,4BAA4BD,GAC1BN,KAAKH,2BAA2B,uBAAwBS,E,CAI1DE,qBAAqBF,GACnBN,KAAKH,2BAA2B,gBAAiBS,E,CAInDG,wBAAwBH,GACtBN,KAAKH,2BAA2B,mBAAoBS,E,CAItDI,kBAAkBJ,GAChBN,KAAKH,2BAA2B,aAAcS,E,CAIhDK,mBAAmBL,GACjBN,KAAKH,2BAA2B,cAAeS,E,CAGjDM,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,CAAE,yBAA0Bf,KAAKgB,mBAC5CH,EAAA,SACEE,MAAO,CACL,aAAc,KACd,sBAAuBf,KAAKiB,cAC5B,sBAAuBjB,KAAKkB,iBAC5B,2BAA4BlB,KAAKmB,WACjC,yBAA0BnB,KAAKgB,mBAGjCH,EAAA,c"}

package/dist/tegel/p-d910763a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,c as e,h as s}from"./p-0b4eba86.js";const t=':root,.sdds-mode-light{--sdds-textfield-background-primary:var(--sdds-grey-50);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-color:var(--sdds-grey-868);--sdds-textfield-placeholder:var(--sdds-grey-500);--sdds-textfield-background-disabled-primary:var(--sdds-grey-50);--sdds-textfield-background-disabled-secondary:var(--sdds-white);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-color-disabled:var(--sdds-grey-400);--sdds-textfield-placeholder-disabled:var(--sdds-grey-400);--sdds-textfield-label-disabled:var(--sdds-grey-400);--sdds-textfield-ps-color-disabled:var(--sdds-grey-400);--sdds-textfield-label-color:var(--sdds-grey-958);--sdds-textfield-label-inside-color:var(--sdds-grey-700);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-500);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-700);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-700);--sdds-textfield-textcounter-divider:var(--sdds-grey-500);--sdds-textfield-ps-color:var(--sdds-grey-600);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-800);--sdds-textfield-border-bottom-success:var(--sdds-grey-958);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-958);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-958)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-mode-dark{--sdds-textfield-background-primary:var(--sdds-grey-900);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-secondary:var(--sdds-grey-868);--sdds-textfield-color:var(--sdds-grey-200);--sdds-textfield-placeholder:var(--sdds-grey-600);--sdds-textfield-ps-color-disabled:var(--sdds-grey-700);--sdds-textfield-color-disabled:var(--sdds-grey-800);--sdds-textfield-background-disabled-primary:var(--sdds-grey-900);--sdds-textfield-background-disabled-secondary:var(--sdds-grey-868);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-placeholder-disabled:var(--sdds-grey-800);--sdds-textfield-label-disabled:var(--sdds-grey-700);--sdds-textfield-label-color:var(--sdds-grey-100);--sdds-textfield-label-inside-color:var(--sdds-grey-400);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-700);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-600);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-600);--sdds-textfield-textcounter-divider:var(--sdds-grey-700);--sdds-textfield-ps-color:var(--sdds-grey-100);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-400);--sdds-textfield-border-bottom-success:var(--sdds-grey-50);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-100);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-50)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-textfield-input{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-textfield-input::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-md{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-md::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-md:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-md:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-md:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-md:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-sm{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-sm::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-sm:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-sm:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-sm:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-sm:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.sdds-textfield-container:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.sdds-form-textfield-md .sdds-textfield-container{height:48px}.sdds-form-textfield-sm .sdds-textfield-container{height:40px}.sdds-textfield-input-container{position:relative;width:100%}.sdds-textfield-label-outside>{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.sdds-textfield-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.sdds-form-textfield{display:block;min-width:208px}.sdds-form-textfield-nomin{min-width:auto}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input~.sdds-textfield-label-inside{top:20px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-textfield-bar{position:absolute;width:100%}.sdds-textfield-bar::before,.sdds-textfield-bar::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.sdds-form-textfield-md .sdds-textfield-bar::before,.sdds-form-textfield-md .sdds-textfield-bar::after{top:46px}.sdds-form-textfield-sm .sdds-textfield-bar::before,.sdds-form-textfield-sm .sdds-textfield-bar::after{top:40px}.sdds-textfield-bar::before{left:50%}.sdds-textfield-bar::after{right:50%}.sdds-textfield-focus .sdds-textfield-bar::before,.sdds-textfield-focus .sdds-textfield-bar::after{width:50%}.sdds-textfield-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.sdds-textfield-helper .sdds-textfield-textcounter{margin-left:auto}.sdds-form-textfield-disabled .sdds-textfield-container{border-bottom-color:transparent}.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix>,.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix>{color:var(--sdds-textfield-ps-color-disabled)}.sdds-form-textfield-disabled .sdds-textfield-label-outside>{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-icon__readonly{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.sdds-textfield-icon__readonly-label{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.sdds-form-textfield-readonly{pointer-events:none}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly{display:block}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover~.sdds-textfield-icon__readonly-label{display:block}.sdds-form-textfield-readonly .sdds-textfield-input{padding-right:54px;background-color:transparent}.sdds-form-textfield-success .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.sdds-form-textfield-error .sdds-textfield-helper{color:var(--sdds-textfield-helper-error)}.sdds-form-textfield-error .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.sdds-form-textfield-error .sdds-textfield-bar::before,.sdds-form-textfield-error .sdds-textfield-bar::after{background:var(--sdds-textfield-bar-error)}.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon){color:var(--sdds-textfield-icon-error)}.sdds-textfield-helper-error-state{display:flex;gap:8px;flex-wrap:nowrap}.sdds-textfield-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.sdds-textfield-textcounter .sdds-textfield-textcounter-divider{color:var(--sdds-textfield-textcounter-divider)}.sdds-textfield-slot-wrap-prefix{align-self:center}.sdds-textfield-slot-wrap-prefix>{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}.sdds-textfield-slot-wrap-suffix{align-self:center}.sdds-textfield-slot-wrap-suffix>{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}slot[name=sdds-prefix]::slotted(sdds-icon),slot[name=sdds-suffix]::slotted(sdds-icon){font-size:24px;line-height:0}slot[name=sdds-prefix]::slotted(){padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix]::slotted()~.sdds-textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix]::slotted(*){padding-right:var(--sdds-spacing-element-20)}';const i=class{constructor(s){d(this,s);this.sddsChange=e(this,"sddsChange",6);this.sddsInput=e(this,"sddsInput",6);this.sddsFocus=e(this,"sddsFocus",6);this.sddsBlur=e(this,"sddsBlur",6);this.type="text";this.labelPosition="no-label";this.label="";this.helper=undefined;this.placeholder="";this.value="";this.disabled=false;this.readOnly=false;this.size="lg";this.modeVariant=null;this.noMinWidth=false;this.name="";this.state="default";this.maxLength=undefined;this.autofocus=false;this.focusInput=undefined}handleChange(d){this.sddsChange.emit(d)}handleInput(d){this.sddsInput.emit(d);this.value=d.target.value}handleFocus(d){this.textInput.focus();this.focusInput=true;this.sddsFocus.emit(d)}handleBlur(d){this.focusInput=false;this.sddsBlur.emit(d)}render(){var d;let e=" sdds-textfield-input";if(this.size==="md"){e+=`${e}-md`}if(this.size==="sm"){e+=`${e}-sm`}return s("div",{class:`\n ${this.noMinWidth?"sdds-form-textfield-nomin":""}\n ${this.focusInput&&!this.disabled?"sdds-form-textfield sdds-textfield-focus":" sdds-form-textfield"}\n ${this.value?"sdds-textfield-data":""}\n ${this.labelPosition==="inside"&&this.size!=="sm"?"sdds-textfield-container-label-inside":""}\n ${this.disabled?"sdds-form-textfield-disabled":""}\n ${this.readOnly?"sdds-form-textfield-readonly":""}\n ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n ${this.size==="md"?"sdds-form-textfield-md":""}\n ${this.size==="sm"?"sdds-form-textfield-sm":""}\n ${this.state==="error"\|\|this.state==="success"?`sdds-form-textfield-${this.state}`:""}\n `},this.labelPosition==="outside"&&s("div",{class:"sdds-textfield-label-outside"},s("div",null,this.label)),s("div",{onClick:()=>this.textInput.focus(),class:"sdds-textfield-container"},s("div",{class:`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`},s("slot",{name:"sdds-prefix"})),s("div",{class:"sdds-textfield-input-container"},s("input",{ref:d=>this.textInput=d,class:e,type:this.type,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,autofocus:this.autofocus,maxlength:this.maxLength,name:this.name,onInput:d=>this.handleInput(d),onChange:d=>this.handleChange(d),onFocus:d=>{if(!this.readOnly){this.handleFocus(d)}},onBlur:d=>{if(!this.readOnly){this.handleBlur(d)}}}),this.labelPosition==="inside"&&this.size!=="sm"&&s("label",{class:"sdds-textfield-label-inside"},this.label)),s("div",{class:"sdds-textfield-bar"}),s("div",{class:`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`},s("slot",{name:"sdds-suffix"})),s("span",{class:"sdds-textfield-icon__readonly"},s("sdds-icon",{name:"edit_inactive",size:"20px"})),s("span",{class:"sdds-textfield-icon__readonly-label"},"This field is non-editable")),s("div",{class:"sdds-textfield-helper"},this.state==="error"&&s("div",{class:"sdds-textfield-helper-error-state"},s("sdds-icon",{name:"error",size:"16px"}),this.helper),this.state!=="error"&&this.helper,this.maxLength>0&&s("div",{class:"sdds-textfield-textcounter"},this.value===null?0:(d=this.value)===null\|\|d===void 0?void 0:d.length,s("span",{class:"sdds-textfield-textcounter-divider"}," / "),this.maxLength)))}};i.style=t;export{i as sdds_textfield};
2	- //# sourceMappingURL=p-d910763a.entry.js.map

package/dist/tegel/p-d910763a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["textfieldCss","Textfield","handleChange","event","this","sddsChange","emit","handleInput","sddsInput","value","target","handleFocus","textInput","focus","focusInput","sddsFocus","handleBlur","sddsBlur","render","className","size","h","class","noMinWidth","disabled","labelPosition","readOnly","modeVariant","state","label","onClick","name","ref","inputEl","type","readonly","placeholder","autofocus","maxlength","maxLength","onInput","onChange","onFocus","onBlur","helper","_a","length"],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield","./src/components/textfield/textfield.tsx"],"sourcesContent":["@import './textfield-vars.scss';\n\n@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-textfield-color);\n background-color: var(--sdds-textfield-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-textfield-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-textfield-placeholder-focus-color);\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--sdds-textfield-background-disabled);\n color: var(--sdds-textfield-color-disabled);\n\n &::placeholder {\n color: var(--sdds-textfield-placeholder-disabled);\n }\n\n ~ .sdds-textfield-label-inside {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Sizes\n.sdds-textfield-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}\n\n.sdds-textfield-input-md {\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-16);\n}\n\n.sdds-textfield-input-sm {\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-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-textfield-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-textfield-background);\n border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n }\n\n .sdds-form-textfield-md & {\n height: 48px;\n }\n\n .sdds-form-textfield-sm & {\n height: 40px;\n }\n}\n\n.sdds-textfield-input-container {\n position: relative;\n width: 100%;\n}\n\n//Textfield label\n\n/* slot[name=\"sdds-label\"]::slotted(*) {\n @include type-style(\"detail-05\");\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-textfield-label-color);\n} */\n\n//Textfield label\n.sdds-textfield-label-outside > * {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-textfield-label-color);\n}\n\n.sdds-textfield-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-textfield-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\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-textfield-placeholder-focus-color);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-textfield {\n display: block;\n min-width: 208px;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-textfield.sdds-textfield-container-label-inside {\n .sdds-textfield-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-textfield-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-textfield-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-textfield-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-textfield-focus,\n &.sdds-textfield-data {\n .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-textfield-input-md ~ .sdds-textfield-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-textfield-input ~ .sdds-textfield-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//Textfield bottom bar when in focus\n.sdds-textfield-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-textfield-bar);\n transition: 0.35s ease all;\n\n .sdds-form-textfield-md & {\n top: 46px;\n }\n\n .sdds-form-textfield-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-textfield-focus &::before,\n .sdds-textfield-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-textfield-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: flex;\n gap: 8px;\n justify-content: space-between;\n\n & .sdds-textfield-textcounter {\n margin-left: auto;\n }\n\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.sdds-form-textfield-disabled {\n .sdds-textfield-container {\n border-bottom-color: transparent;\n }\n\n .sdds-textfield-slot-wrap-prefix,\n .sdds-textfield-slot-wrap-suffix {\n > * {\n color: var(--sdds-textfield-ps-color-disabled);\n }\n }\n\n .sdds-textfield-label-outside {\n > * {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Read only state\n\n.sdds-textfield-icon__readonly {\n display: none;\n position: absolute;\n right: 18px;\n top: 18px;\n color: var(--sdds-textfield-icon-read-only-label-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 white-space: nowrap;\n border-radius: 4px 0 4px 4px;\n background-color: var(--sdds-textfield-icon-read-only-label-background);\n }\n}\n\n.sdds-form-textfield-readonly {\n pointer-events: none;\n\n .sdds-textfield-icon__readonly {\n display: block;\n\n &:hover {\n ~ .sdds-textfield-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .sdds-textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n}\n\n//Success state\n.sdds-form-textfield-success {\n .sdds-textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-success);\n }\n}\n\n//Error State\n.sdds-form-textfield-error {\n .sdds-textfield-helper {\n color: var(--sdds-textfield-helper-error);\n }\n\n .sdds-textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-error);\n }\n\n .sdds-textfield-bar {\n &::before,\n &::after {\n background: var(--sdds-textfield-bar-error);\n }\n }\n\n slot[name='sdds-prefix']::slotted(sdds-icon),\n slot[name='sdds-suffix']::slotted(sdds-icon) {\n color: var(--sdds-textfield-icon-error);\n }\n}\n\n// .sdds-textfield-textcounter {\n.sdds-textfield-helper-error-state {\n display: flex;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n.sdds-textfield-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-textfield-textcounter);\n float: right;\n\n & .sdds-textfield-textcounter-divider {\n // @include type-style('detail-05');\n color: var(--sdds-textfield-textcounter-divider);\n }\n}\n\n/* slot[name=\"sdds-prefix\"]::slotted(*),\nslot[name=\"sdds-suffix\"]::slotted(*) {\n @include type-style(\"detail-02\");\n align-self: center;\n color: var(--sdds-textfield-ps-color);\n} */\n\n.sdds-textfield-slot-wrap-prefix {\n align-self: center;\n\n > * {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n margin-left: 16px;\n color: var(--sdds-textfield-ps-color);\n }\n\n &.sdds-textfield-error {\n sdds-icon,\n .sdds-icon {\n color: var(--sdds-negative);\n }\n }\n}\n\n.sdds-textfield-slot-wrap-suffix {\n align-self: center;\n\n > * {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n margin-right: 16px;\n color: var(--sdds-textfield-ps-color);\n }\n\n &.sdds-textfield-error {\n sdds-icon,\n .sdds-icon {\n color: var(--sdds-negative);\n }\n }\n}\n\n//TODO: When new icons are avaliable have a look at this one\nslot[name='sdds-prefix']::slotted(sdds-icon),\nslot[name='sdds-suffix']::slotted(sdds-icon) {\n font-size: 24px; //FIXME: When new icons is avaliable it should be 16x16\n line-height: 0;\n}\n\n//Text gerenerated infront of the input field\nslot[name='sdds-prefix']::slotted(*) {\n padding-left: var(--sdds-spacing-element-20);\n\n & ~ .sdds-textfield-input {\n padding-left: var(--sdds-spacing-element-12);\n }\n}\n\n//Text generated after the input field\nslot[name='sdds-suffix']::slotted(*) {\n padding-right: var(--sdds-spacing-element-20);\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-textfield',\n styleUrl: 'textfield.scss',\n shadow: false,\n})\nexport class Textfield {\n /** Textinput for focus state */\n textInput?: HTMLInputElement;\n\n /** Which input type, text, password or similar */\n @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n /** Position of the label for the textfield. */\n @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n /** Label text */\n @Prop() label: string = '';\n\n /** Helper text */\n @Prop() helper: string;\n\n /** Placeholder text */\n @Prop() placeholder: string = '';\n\n /** Value of the input text */\n @Prop({ reflect: true }) 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 /** Size of the input */\n @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n /** Mode variant of the textfield */\n\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** With setting */\n @Prop() noMinWidth: boolean = false;\n\n /** Name property */\n @Prop() name = '';\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 /** Autofocus for input */\n @Prop() autofocus: boolean = false;\n\n /** Listen to the focus state of the input */\n @State() focusInput;\n\n /** Change event for the textfield */\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 /** Input event for the textfield */\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 textfield */\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.textInput.focus();\n this.focusInput = true;\n this.sddsFocus.emit(event);\n }\n\n /** Blur event for the textfield */\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.focusInput = false;\n this.sddsBlur.emit(event);\n }\n\n render() {\n let className = ' sdds-textfield-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}\n ${\n this.focusInput && !this.disabled\n ? 'sdds-form-textfield sdds-textfield-focus'\n : ' sdds-form-textfield'\n }\n ${this.value ? 'sdds-textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'sdds-textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'sdds-form-textfield-disabled' : ''}\n ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}\n ${\n this.state === 'error' || this.state === 'success'\n ? `sdds-form-textfield-${this.state}`\n : ''\n }\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"sdds-textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"sdds-textfield-container\">\n <div class={`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`}>\n <slot name=\"sdds-prefix\" />\n </div>\n\n <div class=\"sdds-textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n readonly={this.readOnly}\n placeholder={this.placeholder}\n value={this.value}\n autofocus={this.autofocus}\n maxlength={this.maxLength}\n name={this.name}\n onInput={(event) => this.handleInput(event)}\n onChange={(event) => this.handleChange(event)}\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 />\n\n {this.labelPosition === 'inside' && this.size !== 'sm' && (\n <label class=\"sdds-textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"sdds-textfield-bar\"></div>\n\n <div class={`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`}>\n <slot name=\"sdds-suffix\" />\n </div>\n <span class=\"sdds-textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"sdds-textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"sdds-textfield-helper\">\n {this.state === 'error' && (\n <div class=\"sdds-textfield-helper-error-state\">\n <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n {this.helper}\n </div>\n )}\n {this.state !== 'error' && this.helper}\n\n {this.maxLength > 0 && (\n <div class=\"sdds-textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"sdds-textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-e25424af.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as t,H as l}from"./p-0b4eba86.js";const n=":host{display:block}";const e=class{constructor(t){s(this,t);this.label=undefined;this.disabled=false;this.default=false}render(){return t(l,null,t("slot",null))}};e.style=n;export{e as sdds_inline_tab};
2	- //# sourceMappingURL=p-e25424af.entry.js.map

package/dist/tegel/p-e25424af.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["inlineTabCss","InlineTabsChild","render","h","Host"],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tab',\n styleUrl: 'inline-tab.scss',\n shadow: true,\n})\nexport class InlineTabsChild {\n @Prop() label: string;\n\n @Prop() disabled: boolean = false;\n\n @Prop() default: boolean = false;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,uB,MCORC,EAAe,M,4DAGE,M,aAED,K,CAE3BC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/tegel/p-ebffa726.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sliderCss","Slider","this","wrapperElement","scrubberElement","scrubberInnerElement","dividersElement","trackElement","trackFillElement","minusElement","plusElement","inputElement","nativeRangeInputElement","scrubberGrabPos","x","y","scrubberGrabbed","scrubberLeft","tickValues","disabledState","readonlyState","useControls","useInput","useSmall","useSnapping","supposedValueSlot","eventListenersAdded","resizeObserverAdded","crypto","randomUUID","async","componentWillLoad","componentDidLoad","handleKeydown","event","key","stepLeft","stepRight","handleMouseUp","classList","remove","updateValue","focus","handleTouchEnd","handleMouseMove","numTicks","parseInt","ticks","trackRect","getBoundingClientRect","localLeft","clientX","left","v","Math","round","getTrackWidth","constrainScrubber","style","updateTrack","handleTouchMove","preventDefault","touches","trackWidth","percentageFilled","width","dispatchChangeEvent","sddsChange","emit","value","supposedValue","percentage","trunc","getMin","getMax","updateValueForced","parseFloat","min","max","right","calculateScrubberLeftFromValue","initValue","normalizedValue","normalizedMax","calculatedLeft","resizeObserver","ResizeObserver","observe","addEventListener","grabScrubber","offsetX","offsetY","rect","targetTouches","pageX","pageY","top","stopPropagation","newValue","blur","xOffset","yOffset","add","calculateInputSizeFromMax","length","controlsStep","delta","disabled","currentValue","stepDir","step","i","push","readOnly","controls","input","size","snap","console","warn","render","h","class","ref","el","type","name","id","sliderId","label","map","showTickNumbers","tabindex","tooltip","height","viewBox","fill","xmlns","d","onFocus","e"],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-vars';\n@import '../../mixins/box-sizing';\n\nsdds-slider {\n @include sdds-box-sizing;\n\n width: 100%;\n\n input[type='range'].sdds-slider-native-element {\n display: none;\n }\n}\n\n.sdds-slider-wrapper {\n width: 100%;\n\n &.read-only {\n pointer-events: none;\n }\n}\n\n.sdds-slider {\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n padding-top: 65px;\n\n .sdds-slider-inner {\n width: 100%;\n height: 20px;\n position: relative;\n }\n\n .sdds-slider__controls {\n position: relative;\n top: -25px;\n\n .sdds-slider__control {\n cursor: pointer;\n\n &.sdds-slider__control-minus {\n padding: 18px 18px 18px 0;\n }\n\n &.sdds-slider__control-plus {\n padding: 18px 0 18px 18px;\n }\n }\n }\n\n .sdds-slider__input-values {\n position: relative;\n top: -25px;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n\n .sdds-slider__input-value {\n user-select: none;\n padding: 18px;\n color: var(--sdds-grey-700);\n\n //@include type-style('detail-02');\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n\n .sdds-slider__input-field-wrapper {\n background-color: var(--sdds-slider-inputfield-background);\n display: flex;\n align-items: center;\n justify-content: center;\n\n input.sdds-slider__input-field {\n // @include type-style('detail-02');\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-slider-input-inputfield-color);\n border: 0;\n background-color: transparent;\n text-align: center;\n padding: 12px;\n box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);\n border-radius: 4px 4px 0 0;\n\n &:hover {\n box-shadow: inset 0 -1px 0 var(--sdds-grey-600);\n }\n\n &:focus {\n box-shadow: inset 0 -2px 0 var(--sdds-blue-400);\n outline: 0;\n }\n }\n }\n }\n\n label {\n // @include type-style('detail-05');\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n user-select: none;\n position: absolute;\n color: var(--sdds-slider-label-color);\n top: -16px;\n transform: translateY(-100%);\n\n &.offset {\n top: -35px;\n }\n }\n\n .sdds-slider__value {\n // @include type-style('detail-01');\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n user-select: none;\n border-radius: 4px;\n padding: 8px;\n position: absolute;\n transform: translate(-50%, -100%);\n top: -24px;\n background-color: var(--sdds-grey-800);\n color: var(--sdds-white);\n\n svg {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 34px;\n }\n }\n\n .sdds-slider__scrubber {\n position: absolute;\n\n .sdds-slider__scrubber-inner {\n width: 20px;\n height: 20px;\n border-radius: 100%;\n background-color: var(--sdds-slider-thumb-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n\n &::before {\n content: ' ';\n display: none;\n width: 48px;\n height: 48px;\n background-color: var(--sdds-slider-thumb-color);\n position: absolute;\n border-radius: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n &::before {\n display: block;\n opacity: 0.08;\n }\n }\n\n &.pressed {\n width: 24px;\n height: 24px;\n\n &::before {\n display: block;\n opacity: 0.16 !important;\n }\n }\n }\n }\n\n .sdds-slider__value-dividers-wrapper {\n position: relative;\n width: 100%;\n pointer-events: none;\n }\n\n .sdds-slider__value-dividers {\n pointer-events: none;\n position: absolute;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n .sdds-slider__value-divider {\n transform: translateY(-50%);\n height: 16px;\n background-color: var(--sdds-slider-divider-color);\n color: var(--sdds-slider-divider-values-color);\n width: 1px;\n\n span {\n display: block;\n user-select: none;\n color: var(-sdds-grey-700);\n\n // @include type-style('detail-05');\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n position: relative;\n top: -7px;\n left: 50%;\n transform: translate(-50%, -100%);\n width: 50px;\n text-align: center;\n }\n }\n }\n\n .sdds-slider__track {\n width: 100%;\n height: 2px;\n border-radius: 1px;\n background-color: var(--sdds-slider-track-color);\n position: relative;\n\n &:focus {\n outline: 0;\n\n .sdds-slider__scrubber {\n .sdds-slider__scrubber-inner {\n width: 24px;\n height: 24px;\n\n &::before {\n display: block;\n opacity: 0.08;\n }\n }\n }\n }\n\n .sdds-slider__track-fill {\n background-color: var(--sdds-slider-track-fill-color);\n border-radius: 2px;\n height: 4px;\n position: absolute;\n left: 0;\n top: -1px;\n }\n }\n\n &.disabled {\n // pointer-events: none;\n cursor: not-allowed;\n\n > * {\n pointer-events: none;\n }\n\n label {\n color: var(--sdds-slider-label-color-disabled);\n }\n\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n svg {\n fill: var(--sdds-slider-controls-color);\n }\n }\n }\n }\n\n .sdds-slider__input-values {\n .sdds-slider__input-value {\n color: var(--sdds-slider-controls-color);\n }\n\n .sdds-slider__input-field-wrapper {\n pointer-events: none;\n\n input.sdds-slider__input-field {\n color: var(--sdds-slider-controls-color);\n pointer-events: none;\n }\n }\n }\n\n .sdds-slider__value {\n display: none;\n }\n\n .sdds-slider__track {\n .sdds-slider__track-fill {\n background-color: var(--sdds-slider-track-fill-color);\n }\n }\n\n .sdds-slider__value-dividers {\n .sdds-slider__value-divider {\n span {\n color: var(--sdds-slider-track-fill-color);\n }\n }\n }\n\n .sdds-slider__scrubber {\n pointer-events: none;\n\n .sdds-slider__scrubber-inner {\n background: var(--sdds-slider-track-color);\n cursor: default;\n }\n }\n }\n\n &.sdds-slider-small {\n .sdds-slider__scrubber {\n .sdds-slider__scrubber-inner {\n width: 16px;\n height: 16px;\n\n &::before {\n width: 40px;\n height: 40px;\n }\n\n &.pressed {\n width: 20px;\n height: 20px;\n }\n }\n }\n }\n}\n\n.sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n svg {\n fill: var(--sdds-slider-controls-color);\n }\n }\n }\n}\n","import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-slider',\n styleUrl: 'slider.scss',\n shadow: false,\n})\nexport class Slider {\n /** Text for label */\n @Prop() label: string = '';\n\n /** Initial value */\n @Prop() value: string = '0';\n\n /** Minimum value */\n @Prop() min: string = '0';\n\n /** Maximum value */\n @Prop() max: string = '100';\n\n /** Number of tick markers (tick for min- and max-value will be added automatically) */\n @Prop() ticks: string = '0';\n\n /** Decide to show numbers above the tick markers or not */\n @Prop() showTickNumbers: boolean = false;\n\n /** Decide to show the tooltip or not */\n @Prop() tooltip: boolean = null;\n\n /** Sets the disabled state for the whole component */\n @Prop() disabled: boolean = null;\n\n /** Sets the read only state for the whole component */\n @Prop() readOnly: boolean = null;\n\n /** Decide to show the controls or not */\n @Prop() controls: boolean = null;\n\n /** Decide to show the input field or not */\n @Prop() input: boolean = null;\n\n /** Defines how much to increment/decrement the value when using controls */\n @Prop() step: string = '1';\n\n /** Name property (will be inherited by the native slider component) */\n @Prop() name: string = '';\n\n /** Sets the size of the scrubber */\n @Prop() size: 'sm' | '' = '';\n\n /** Snap to the ticks grid */\n @Prop() snap: boolean = null;\n\n /** Id for the sliders input element, randomly generated if not specified. */\n @Prop() sliderId: string = crypto.randomUUID();\n\n wrapperElement: HTMLElement = null;\n\n scrubberElement: HTMLElement = null;\n\n scrubberInnerElement: HTMLElement = null;\n\n dividersElement: HTMLElement = null;\n\n trackElement: HTMLElement = null;\n\n trackFillElement: HTMLElement = null;\n\n minusElement: HTMLElement = null;\n\n plusElement: HTMLElement = null;\n\n inputElement: HTMLInputElement = null;\n\n nativeRangeInputElement: HTMLInputElement = null;\n\n scrubberGrabPos: object = { x: 0, y: 0 };\n\n scrubberGrabbed: boolean = false;\n\n scrubberLeft: number = 0;\n\n tickValues: Array<number> = [];\n\n disabledState: boolean = false;\n\n readonlyState: boolean = false;\n\n useControls: boolean = false;\n\n useInput: boolean = false;\n\n useSmall: boolean = false;\n\n useSnapping: boolean = false;\n\n supposedValueSlot: number = -1;\n\n eventListenersAdded: boolean = false;\n\n resizeObserverAdded: boolean = false;\n\n /** Sends unique checkbox identifier and value when the slider has a change in value. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n value: string;\n }>;\n\n /** Public method to re-initialise the slider if some configuration props are changed */\n @Method() async reset() {\n // @TODO: maybe refactor to use watch-decorators instead\n this.componentWillLoad();\n this.componentDidLoad();\n }\n\n @Listen('keydown')\n handleKeydown(event) {\n switch (event.key) {\n case 'ArrowLeft':\n this.stepLeft();\n break;\n\n case 'ArrowRight':\n this.stepRight();\n break;\n\n default:\n break;\n }\n }\n\n @Listen('mouseup', { target: 'window' })\n handleMouseUp() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('touchend', { target: 'window' })\n handleTouchEnd() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('mousemove', { target: 'window' })\n handleMouseMove(event) {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.clientX - trackRect.left;\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.touches[0].clientX - trackRect.left;\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n updateTrack() {\n const trackWidth = this.getTrackWidth();\n const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n this.trackFillElement.style.width = `${percentageFilled}%`;\n }\n\n dispatchChangeEvent() {\n this.sddsChange.emit({ value: this.value });\n }\n\n updateValue() {\n const trackWidth = this.getTrackWidth();\n\n /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) */\n if (this.supposedValueSlot > 0) {\n const supposedValue = this.tickValues[this.supposedValueSlot];\n this.value = `${supposedValue}`;\n } else {\n const percentage = this.scrubberLeft / trackWidth;\n this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n }\n\n this.dispatchChangeEvent();\n }\n\n updateValueForced(value) {\n this.value = value;\n this.dispatchChangeEvent();\n }\n\n getMin() {\n return parseFloat(this.min);\n }\n\n getMax() {\n return parseFloat(this.max);\n }\n\n constrainScrubber(x) {\n const width = this.getTrackWidth();\n\n if (x < 0) {\n return 0;\n }\n\n if (x > width) {\n return width;\n }\n\n return x;\n }\n\n getTrackWidth() {\n const trackRect = this.trackElement.getBoundingClientRect();\n return trackRect.right - trackRect.left;\n }\n\n calculateScrubberLeftFromValue(value) {\n const initValue = value;\n const trackWidth = this.getTrackWidth();\n\n const normalizedValue = initValue - this.getMin();\n const normalizedMax = this.getMax() - this.getMin();\n\n const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n this.scrubberLeft = calculatedLeft;\n\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n }\n\n componentDidLoad() {\n if (!this.resizeObserverAdded) {\n this.resizeObserverAdded = true;\n\n const resizeObserver = new ResizeObserver((/* entries */) => {\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n });\n\n resizeObserver.observe(this.wrapperElement);\n }\n\n if (!this.eventListenersAdded) {\n this.eventListenersAdded = true;\n\n this.scrubberElement.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.grabScrubber(event.offsetX, event.offsetY);\n });\n\n this.scrubberElement.addEventListener('touchstart', (event) => {\n const rect = this.scrubberElement.getBoundingClientRect();\n const x = event.targetTouches[0].pageX - rect.left;\n const y = event.targetTouches[0].pageY - rect.top;\n this.grabScrubber(x, y);\n });\n\n if (this.useControls) {\n this.minusElement.addEventListener('click', () => {\n this.stepLeft();\n });\n\n this.plusElement.addEventListener('click', () => {\n this.stepRight();\n });\n }\n\n if (this.inputElement) {\n this.inputElement.addEventListener('keydown', (event) => {\n event.stopPropagation();\n\n if (event.key === 'Enter') {\n let newValue = parseInt(this.inputElement.value);\n\n if (newValue < this.getMin()) {\n newValue = this.getMin();\n } else if (newValue > this.getMax()) {\n newValue = this.getMax();\n }\n\n this.calculateScrubberLeftFromValue(newValue);\n this.updateValueForced(newValue);\n this.updateTrack();\n\n this.inputElement.blur();\n this.wrapperElement.focus();\n }\n });\n }\n }\n\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n }\n\n grabScrubber(xOffset, yOffset) {\n if (this.readonlyState) {\n return;\n }\n\n this.scrubberGrabPos = {\n x: xOffset,\n y: yOffset,\n };\n\n this.scrubberGrabbed = true;\n this.scrubberInnerElement.classList.add('pressed');\n }\n\n calculateInputSizeFromMax() {\n return this.max.length;\n }\n\n controlsStep(delta) {\n if (this.readonlyState || this.disabled) {\n return;\n }\n\n const trackWidth = this.getTrackWidth();\n const percentage = this.scrubberLeft / trackWidth;\n const numTicks = parseInt(this.ticks);\n\n let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n currentValue += delta;\n\n if (currentValue < this.getMin()) {\n currentValue = this.getMin();\n } else if (currentValue > this.getMax()) {\n currentValue = this.getMax();\n }\n\n this.value = `${currentValue}`;\n\n /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n if (this.useSnapping && numTicks > 0) {\n const stepDir = delta > 0 ? 1 : -1;\n this.supposedValueSlot += stepDir;\n\n if (this.supposedValueSlot < 0) {\n this.supposedValueSlot = 0;\n } else if (this.supposedValueSlot > numTicks + 1) {\n this.supposedValueSlot = numTicks + 1;\n }\n }\n\n this.calculateScrubberLeftFromValue(currentValue);\n this.updateTrack();\n this.updateValue();\n }\n\n stepLeft() {\n this.controlsStep(-parseInt(this.step));\n }\n\n stepRight() {\n this.controlsStep(parseInt(this.step));\n }\n\n componentWillLoad() {\n const numTicks = parseInt(this.ticks);\n\n if (numTicks > 0) {\n this.tickValues = [this.getMin()];\n\n const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n for (let i = 1; i < numTicks + 1; i++) {\n this.tickValues.push(this.getMin() + Math.round(step * i));\n }\n\n this.tickValues.push(this.getMax());\n }\n\n if (this.disabled !== null) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly !== null) {\n this.readonlyState = true;\n } else {\n this.readonlyState = false;\n }\n\n this.useInput = false;\n this.useControls = false;\n\n if (this.controls !== null) {\n this.useControls = true;\n } else if (this.input !== null) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.size === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap !== null) {\n this.useSnapping = true;\n }\n\n const min = this.getMin();\n const max = this.getMax();\n\n if (min > max) {\n console.warn(\n 'min-prop must have a higher value than max-prop for the component to work correctly.',\n );\n this.disabledState = true;\n }\n }\n\n render() {\n return (\n <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n <input\n ref={(el) => {\n this.nativeRangeInputElement = el as HTMLInputElement;\n }}\n class=\"sdds-slider-native-element\"\n type=\"range\"\n value={this.value}\n name={this.name}\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n id={this.sliderId}\n ></input>\n\n <div\n class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n this.useSmall ? 'sdds-slider-small' : ''\n }`}\n ref={(el) => {\n this.wrapperElement = el as HTMLElement;\n }}\n >\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.min}\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.minusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-minus\"\n >\n <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n\n <div class=\"sdds-slider-inner\">\n <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div\n ref={(el) => {\n this.dividersElement = el as HTMLElement;\n }}\n class=\"sdds-slider__value-dividers\"\n >\n {this.tickValues.map((value) => (\n <div class=\"sdds-slider__value-divider\">\n {this.showTickNumbers && <span>{value}</span>}\n </div>\n ))}\n </div>\n </div>\n )}\n\n <div\n class=\"sdds-slider__track\"\n ref={(el) => {\n this.trackElement = el as HTMLElement;\n }}\n tabindex={this.disabled ? '-1' : '0'}\n >\n <div\n class=\"sdds-slider__track-fill\"\n ref={(el) => {\n this.trackFillElement = el as HTMLElement;\n }}\n ></div>\n\n <div\n class=\"sdds-slider__scrubber\"\n ref={(el) => {\n this.scrubberElement = el as HTMLElement;\n }}\n >\n {this.tooltip !== null && (\n <div class=\"sdds-slider__value\">\n {this.value}\n <svg\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n fill=\"#37414F\"\n />\n </svg>\n </div>\n )}\n\n <div\n class=\"sdds-slider__scrubber-inner\"\n ref={(el) => {\n this.scrubberInnerElement = el as HTMLElement;\n }}\n ></div>\n </div>\n </div>\n </div>\n\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.max}\n </div>\n <div class=\"sdds-slider__input-field-wrapper\">\n <input\n onFocus={(e) => {\n if (this.readonlyState) {\n e.preventDefault();\n this.inputElement.blur();\n }\n }}\n size={this.calculateInputSizeFromMax()}\n class=\"sdds-slider__input-field\"\n value={this.value}\n ref={(el) => {\n this.inputElement = el as HTMLInputElement;\n }}\n />\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.plusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-plus\"\n >\n <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}