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

@scania/tegel 0.0.5 → 0.0.6

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 (1107) hide show

package/dist/components/sdds-table-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-table-header.js","mappings":";;AAAA,MAAM,cAAc,GAAG~~,+5MAA+5M~~;;~~ACGt7M~~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","names":[],"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 { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['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 /* @internal Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'internalSddsMainCheckboxSelect',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n internalSddsMainCheckboxSelect: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('internalSddsMainCheckboxChange', { target: 'body' })\n internalSddsMainCheckboxChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('internalSddsRowExpanded', { target: 'body' })\n internalSddsRowExpandedListener(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.internalSddsMainCheckboxSelect.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"],"version":3}
1	+ {"file":"sdds-table-header.js","mappings":"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","names":[],"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 { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['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 /* @internal Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'internalSddsMainCheckboxSelect',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsMainCheckboxSelect: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('internalSddsMainCheckboxChange', { target: 'body' })\n internalSddsMainCheckboxChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('internalSddsRowExpanded', { target: 'body' })\n internalSddsRowExpandedListener(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.internalSddsMainCheckboxSelect.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"],"version":3}

package/dist/components/sdds-table-toolbar.js CHANGED Viewed

@@ -12,7 +12,7 @@ const TableToolbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.sddsFilter = createEvent(this, "sddsFilter", 7);
+    this.sddsFilter = createEvent(this, "sddsFilter", 6);
     this.tableTitle = '';
     this.enableFiltering = false;
     this.verticalDividers = false;

package/dist/components/sdds-table-toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-table-toolbar.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4nEAA4nE;;ACappE,MAAM,kBAAkB,GAA2C;EACjE,eAAe;EACf,YAAY;EACZ,kBAAkB;CACnB,CAAC;MAOW,YAAY;;;;;;sBAEuB,EAAE;2BAGI,KAAK;4BAEpB,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAgB7B,8BAA8B,CAAC,KAA+C;IAC5E,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,cAAc,CAAC,KAAK;IAClB,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAE7D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACzB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;KACnE;SAAM;MACL,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;KACtE;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1D,WAAK,KAAK,EAAC,4BAA4B,IACrC,eAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9D,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,uBAAuB,IAChC,aACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACF,YAAM,KAAK,EAAC,4BAA4B,IACtC,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrE,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACD,YAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-caption;\n position: relative;\n background-color: var(--sdds-data-table-toolbar-background);\n color: var(--sdds-data-table-color);\n padding: 0 var(--sdds-spacing-element-16);\n height: 64px;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n\n .sdds-table__upper-bar-flex {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n .sdds-table__title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding-top: var(--sdds-spacing-element-16);\n text-align: left;\n }\n\n .sdds-table__actionbar {\n display: flex;\n align-self: center;\n gap: 8px;\n }\n\n .sdds-table__searchbar {\n display: flex;\n align-self: center;\n position: relative;\n height: 40px;\n width: 40px;\n border-radius: 4px 4px 0 0;\n transition: background-color 250ms ease, width 250ms ease;\n overflow: hidden;\n background-color: transparent;\n\n &::after {\n content: '';\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: 0;\n background-color: var(--sdds-blue-400);\n transform: scaleX(0);\n transition: transform 150ms ease;\n }\n\n &:focus-within {\n &::after {\n transform: scaleX(100%);\n }\n }\n\n &:focus-within,\n &.sdds-table__searchbar--active {\n width: 208px;\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n .sdds-table__searchbar-input {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-data-table-color);\n z-index: 1;\n width: 100%;\n height: 100%;\n border: none;\n padding: 0 36px 0 16px;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n\n :focus {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n }\n\n .sdds-table__searchbar-icon {\n z-index: 0;\n position: absolute;\n right: 9px;\n top: 9px;\n width: 20px;\n height: 20px;\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 56px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-table-toolbar',\n styleUrl: 'table-toolbar.scss',\n shadow: true,\n})\nexport class TableToolbar {\n /** Adds title to the data-table /\n @Prop({ reflect: true }) tableTitle: string = '';\n\n /* Enables preview of searchbar /\n @Prop({ reflect: true }) enableFiltering: 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 /* Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */\n @Event({\n eventName: 'sddsFilter',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n sddsFilter: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n searchFunction(event) {\n const searchTerm = event.currentTarget.value.toLowerCase();\n const sddsTableSearchBar = event.currentTarget.parentElement;\n\n this.sddsFilter.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-table-toolbar.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4nEAA4nE;;ACappE,MAAM,kBAAkB,GAA2C;EACjE,eAAe;EACf,YAAY;EACZ,kBAAkB;CACnB,CAAC;MAOW,YAAY;;;;;;sBAEuB,EAAE;2BAGI,KAAK;4BAEpB,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAgB7B,8BAA8B,CAAC,KAA+C;IAC5E,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,cAAc,CAAC,KAAK;IAClB,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAE7D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACzB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;KACnE;SAAM;MACL,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;KACtE;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1D,WAAK,KAAK,EAAC,4BAA4B,IACrC,eAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9D,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,uBAAuB,IAChC,aACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACF,YAAM,KAAK,EAAC,4BAA4B,IACtC,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrE,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACD,YAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-caption;\n position: relative;\n background-color: var(--sdds-data-table-toolbar-background);\n color: var(--sdds-data-table-color);\n padding: 0 var(--sdds-spacing-element-16);\n height: 64px;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n\n .sdds-table__upper-bar-flex {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n .sdds-table__title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding-top: var(--sdds-spacing-element-16);\n text-align: left;\n }\n\n .sdds-table__actionbar {\n display: flex;\n align-self: center;\n gap: 8px;\n }\n\n .sdds-table__searchbar {\n display: flex;\n align-self: center;\n position: relative;\n height: 40px;\n width: 40px;\n border-radius: 4px 4px 0 0;\n transition: background-color 250ms ease, width 250ms ease;\n overflow: hidden;\n background-color: transparent;\n\n &::after {\n content: '';\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: 0;\n background-color: var(--sdds-blue-400);\n transform: scaleX(0);\n transition: transform 150ms ease;\n }\n\n &:focus-within {\n &::after {\n transform: scaleX(100%);\n }\n }\n\n &:focus-within,\n &.sdds-table__searchbar--active {\n width: 208px;\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n .sdds-table__searchbar-input {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-data-table-color);\n z-index: 1;\n width: 100%;\n height: 100%;\n border: none;\n padding: 0 36px 0 16px;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n\n :focus {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n }\n\n .sdds-table__searchbar-icon {\n z-index: 0;\n position: absolute;\n right: 9px;\n top: 9px;\n width: 20px;\n height: 20px;\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 56px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-table-toolbar',\n styleUrl: 'table-toolbar.scss',\n shadow: true,\n})\nexport class TableToolbar {\n /** Adds title to the data-table /\n @Prop({ reflect: true }) tableTitle: string = '';\n\n /* Enables preview of searchbar /\n @Prop({ reflect: true }) enableFiltering: 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 /* Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */\n @Event({\n eventName: 'sddsFilter',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsFilter: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n searchFunction(event) {\n const searchTerm = event.currentTarget.value.toLowerCase();\n const sddsTableSearchBar = event.currentTarget.parentElement;\n\n this.sddsFilter.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-table.js CHANGED Viewed

@@ -7,7 +7,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.internalSddsTablePropChange = createEvent(this, "internalSddsTablePropChange", 7);
+    this.internalSddsTablePropChange = createEvent(this, "internalSddsTablePropChange", 6);
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = undefined;

package/dist/components/sdds-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MC0BnM,KAAK;;;;;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,GAAG,YAAY;KACjC,CAAC,CAAC;GACJ;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;GAChE;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;GACnE;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GAC5D;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;GACzD;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9D,aACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;OAChD,IAED,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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 textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\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 /* @internal Broadcasts changes to the tables props */\n @Event({\n eventName: 'internalSddsTablePropChange',\n bubbles: true,\n composed: true,\n cancelable: ~~true~~,\n })\n internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n this.internalSddsTablePropChange.emit({\n tableId: this.tableId,\n changed: [changedValueName],\n [changedValueName]: changedValue,\n });\n }\n\n @Watch('enableMultiselect')\n enableMultiselectChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('enableMultiselect', newValue);\n }\n\n @Watch('enableExpandableRows')\n enableExpandableRowsChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n }\n\n @Watch('compactDesign')\n compactDesignChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('compactDesign', newValue);\n }\n\n @Watch('verticalDividers')\n verticalDividersChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('verticalDividers', newValue);\n }\n\n @Watch('noMinWidth')\n noMinWidthChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('noMinWidth', newValue);\n }\n\n @Watch('modeVariant')\n modeVariantChanged(newValue: 'primary' \| 'secondary' \| null) {\n this.emitInternalSddsPropChange('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"],"version":3}
1	+ {"file":"sdds-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MC0BnM,KAAK;;;;;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,GAAG,YAAY;KACjC,CAAC,CAAC;GACJ;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;GAChE;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;GACnE;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GAC5D;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;GACzD;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9D,aACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;OAChD,IAED,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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 textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\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 /* @internal Broadcasts changes to the tables props */\n @Event({\n eventName: 'internalSddsTablePropChange',\n bubbles: true,\n composed: true,\n cancelable: false,\n })\n internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n this.internalSddsTablePropChange.emit({\n tableId: this.tableId,\n changed: [changedValueName],\n [changedValueName]: changedValue,\n });\n }\n\n @Watch('enableMultiselect')\n enableMultiselectChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('enableMultiselect', newValue);\n }\n\n @Watch('enableExpandableRows')\n enableExpandableRowsChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n }\n\n @Watch('compactDesign')\n compactDesignChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('compactDesign', newValue);\n }\n\n @Watch('verticalDividers')\n verticalDividersChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('verticalDividers', newValue);\n }\n\n @Watch('noMinWidth')\n noMinWidthChanged(newValue: boolean) {\n this.emitInternalSddsPropChange('noMinWidth', newValue);\n }\n\n @Watch('modeVariant')\n modeVariantChanged(newValue: 'primary' \| 'secondary' \| null) {\n this.emitInternalSddsPropChange('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"],"version":3}

package/dist/components/sdds-textfield.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const textfieldCss = ".textfield-input-lg.sc-sdds-textfield{all:unset;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)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;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)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;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)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{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}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{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)}.textfield-label-inside.sc-sdds-textfield{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}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::input-placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{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)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{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)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.form-textfield-error slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,.form-textfield-error slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{color:var(--sdds-textfield-icon-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{font-size:24px;line-height:0}slot[name=sdds-prefix].sc-sdds-textfield-s>*{padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix].sc-sdds-textfield-s~.textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix].sc-sdds-textfield-s>*{padding-right:var(--sdds-spacing-element-20)}";
+const textfieldCss = ".textfield-input-lg.sc-sdds-textfield{all:unset;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)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;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)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;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)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{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}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{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)}.textfield-label-inside.sc-sdds-textfield{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}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{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)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{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)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield,.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin:0 0 0 14px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.sc-sdds-textfield-s>:not(sdds-icon),.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 0 0 2px}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-error)}.textfield-slot-wrap-suffix.sc-sdds-textfield{margin:0 14px 0 0}.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 2px 0 0}";
 const Textfield = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/sdds-textfield.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-textfield.js","mappings":"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","names":[],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n all: unset;\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 ~ .textfield-label-inside {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Sizes\n.textfield-input-lg {\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.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.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.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 .form-textfield-md & {\n height: 48px;\n }\n\n .form-textfield-sm & {\n height: 40px;\n }\n}\n\n.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.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.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.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.form-textfield.textfield-container-label-inside {\n .textfield-input-lg {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .textfield-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .textfield-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .textfield-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.textfield-focus,\n &.textfield-data {\n .textfield-input-sm ~ .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 .textfield-input-md ~ .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 .textfield-input-lg ~ .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.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 .form-textfield-md & {\n top: 46px;\n }\n\n .form-textfield-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .textfield-focus &::before,\n .textfield-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.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 & .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.form-textfield-disabled {\n .textfield-container {\n border-bottom-color: transparent;\n }\n\n .textfield-slot-wrap-prefix,\n .textfield-slot-wrap-suffix {\n > * {\n color: var(--sdds-textfield-ps-color-disabled);\n }\n }\n\n .textfield-label-outside {\n > * {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Read only state\n\n.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.form-textfield-readonly {\n pointer-events: none;\n\n .textfield-icon__readonly {\n display: block;\n\n &:hover {\n ~ .textfield-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n}\n\n//Success state\n.form-textfield-success {\n .textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-success);\n }\n}\n\n//Error State\n.form-textfield-error {\n .textfield-helper {\n color: var(--sdds-textfield-helper-error);\n }\n\n .textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-error);\n }\n\n .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// .textfield-textcounter {\n.textfield-helper-error-state {\n display: flex;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n.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 & .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.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 &.textfield-error {\n sdds-icon,\n .icon {\n color: var(--sdds-negative);\n }\n }\n}\n\n.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 &.textfield-error {\n sdds-icon,\n .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 & ~ .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 scoped: true,\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 return (\n <div\n class={`\n ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n ${this.value ? 'textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'form-textfield-disabled' : ''}\n ${this.readOnly ? 'form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'form-textfield-md' : ''}\n ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n ${this.state === 'error' \|\| this.state === 'success' ? `form-textfield-${this.state}` : ''}\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n <slot name=\"prefix\" />\n </div>\n\n <div class=\"textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={`textfield-input textfield-input-${this.size}`}\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=\"textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"textfield-bar\"></div>\n\n <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n <slot name=\"suffix\" />\n </div>\n <span class=\"textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"textfield-helper\">\n {this.state === 'error' && (\n <div class=\"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=\"textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-textfield.js","mappings":"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","names":[],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n all: unset;\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 ~ .textfield-label-inside {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Sizes\n.textfield-input-lg {\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.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.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.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 .form-textfield-md & {\n height: 48px;\n }\n\n .form-textfield-sm & {\n height: 40px;\n }\n}\n\n.textfield-input-container {\n position: relative;\n width: 100%;\n}\n\n//Textfield label\n\n.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.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 ::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.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.form-textfield.textfield-container-label-inside {\n .textfield-input-lg {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .textfield-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .textfield-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .textfield-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .textfield-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.textfield-focus,\n &.textfield-data {\n .textfield-input-sm ~ .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 .textfield-input-md ~ .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 .textfield-input-lg ~ .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.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 .form-textfield-md & {\n top: 46px;\n }\n\n .form-textfield-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .textfield-focus &::before,\n .textfield-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.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 & .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.form-textfield-disabled {\n .textfield-container {\n border-bottom-color: transparent;\n }\n\n .textfield-slot-wrap-prefix,\n .textfield-slot-wrap-suffix {\n > * {\n color: var(--sdds-textfield-ps-color-disabled);\n }\n }\n\n .textfield-label-outside {\n > * {\n color: var(--sdds-textfield-label-disabled);\n }\n }\n}\n\n//Read only state\n\n.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.form-textfield-readonly {\n pointer-events: none;\n\n .textfield-icon__readonly {\n display: block;\n\n &:hover {\n ~ .textfield-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n}\n\n//Success state\n.form-textfield-success {\n .textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-success);\n }\n}\n\n//Error State\n.form-textfield-error {\n .textfield-helper {\n color: var(--sdds-textfield-helper-error);\n }\n\n .textfield-container {\n border-bottom-color: var(--sdds-textfield-border-bottom-error);\n }\n\n .textfield-bar {\n &::before,\n &::after {\n background: var(--sdds-textfield-bar-error);\n }\n }\n}\n\n// .textfield-textcounter {\n.textfield-helper-error-state {\n display: flex;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n.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 & .textfield-textcounter-divider {\n // @include type-style('detail-05');\n color: var(--sdds-textfield-textcounter-divider);\n }\n}\n\n.textfield-slot-wrap-prefix,\n.textfield-slot-wrap-suffix {\n align-self: center;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n margin: 0 0 0 14px;\n color: var(--sdds-textfield-ps-color);\n\n &::slotted(:not(sdds-icon)) {\n margin: 0 0 0 2px;\n }\n\n &.textfield-error {\n color: var(--sdds-textfield-ps-color-error);\n }\n}\n\n.textfield-slot-wrap-suffix {\n margin: 0 14px 0 0;\n\n &::slotted(:not(sdds-icon)) {\n margin: 0 2px 0 0;\n }\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 scoped: true,\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 @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 return (\n <div\n class={`\n ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n ${this.value ? 'textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'form-textfield-disabled' : ''}\n ${this.readOnly ? 'form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'form-textfield-md' : ''}\n ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n ${this.state === 'error' \|\| this.state === 'success' ? `form-textfield-${this.state}` : ''}\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n <slot name=\"prefix\" />\n </div>\n\n <div class=\"textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={`textfield-input textfield-input-${this.size}`}\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=\"textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"textfield-bar\"></div>\n\n <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n <slot name=\"suffix\" />\n </div>\n <span class=\"textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"textfield-helper\">\n {this.state === 'error' && (\n <div class=\"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=\"textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-toast.js CHANGED Viewed

@@ -31,6 +31,14 @@ const SddsToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.hidden = true;
       }
     };
+    this.handleShow = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
     this.getHeaderClasses = () => {
       if (!this.hasSubheader && !this.hasLink) {
         return 'only-header';
@@ -51,17 +59,11 @@ const SddsToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /** Hides the toast. */
   async hideToast() {
-    this.hidden = true;
-    return {
-      toastId: this.toastId,
-    };
+    this.handleClose();
   }
   /** Shows the toast. */
   async showToast() {
-    this.hidden = false;
-    return {
-      toastId: this.toastId,
-    };
+    this.handleShow();
   }
   connectedCallback() {
     const children = Array.from(this.host.children);

package/dist/components/sdds-toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-toast.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,upEAAupE;;MCQ/pEA,WAAS;;;;;;~~IAsDpB~~,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;IAEF,gBAAW,GAAG;MACZ,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;KACF,CAAC;IAQF,qBAAgB,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;KACX,CAAC;~~mBA1FwB~~,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;;EAUvD,MAAM,SAAS;IACb,IAAI,CAAC,~~MAAM~~,~~GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,~~EAAE,~~IAAI,~~CAAC~~,OAAO~~;~~KACtB,CAAC;GACH~~;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,~~MAAM~~,~~GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,~~EAAE,~~IAAI,~~CAAC~~,OAAO~~;~~KACtB,CAAC~~;~~GACH;EAqCD~~,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;GACpF;EAYD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,IAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV,IAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC7D,WAAK,KAAK,EAAE,eAAe,IACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR,EACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,IAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACN,cACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,KAAK,EAAE,aAAa,IAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsToast"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n display: none;\n visibility: hidden;\n}\n\n:host {\n z-index: z(toast);\n\n .toast-wrapper {\n display: flex;\n width: calc(352px - 4px);\n background-color: var(--sdds-toast-background-color);\n border-radius: 4px;\n\n &.information {\n border-left: 4px solid var(--sdds-information);\n\n sdds-icon {\n color: var(--sdds-information);\n }\n }\n\n &.success {\n border-left: 4px solid var(--sdds-positive);\n\n sdds-icon {\n color: var(--sdds-positive);\n }\n }\n\n &.error {\n border-left: 4px solid var(--sdds-negative);\n\n sdds-icon {\n color: var(--sdds-negative);\n }\n }\n\n &.warning {\n border-left: 4px solid var(--sdds-warning);\n\n sdds-icon {\n color: var(--sdds-warning);\n }\n }\n\n button.toast-close {\n height: 20px;\n width: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 14px 14px 0 0;\n border: none;\n background: transparent;\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n sdds-icon {\n color: var(--sdds-toast-dissmiss-color);\n padding: 0;\n }\n }\n }\n\n sdds-icon {\n padding: 14px 0 0 12px;\n }\n\n .toast-content {\n padding: 16px 0 16px 10px;\n display: flex;\n flex-direction: column;\n flex: 1;\n\n .toast-header {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-toast-headline-color);\n\n &.no-subheader {\n margin-bottom: 4px;\n }\n\n &.only-header {\n margin-bottom: 0;\n }\n }\n\n .toast-subheader {\n slot::slotted() {\n margin-top: 4px;\n color: var(--sdds-toast-subheadline-color);\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding-bottom: 16px;\n max-width: 252px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.no-link {\n slot::slotted() {\n padding-bottom: 0;\n }\n }\n }\n }\n\n slot[name='toast-link']::slotted() {\n color: var(--sdds-toast-link-color);\n }\n\n .sdds-mode-variant-primary {\n --sdds-toast-background: var(--sdds-toast-background-primary);\n }\n\n .sdds-mode-variant-secondary {\n --sdds-toast-background: var(--sdds-toast-background-secondary);\n }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toast',\n styleUrl: 'sdds-toast.scss',\n shadow: true,\n})\nexport class SddsToast {\n /* ID for the toast. Randomly generated if not specified. /\n @Prop() toastId: string = crypto.randomUUID();\n\n /* Header text for the component. /\n @Prop() header: string;\n\n /* Subheader text for the component. /\n @Prop() subheader: string;\n\n /* Type of toast. /\n @Prop() type: 'information' \| 'error' \| 'warning' \| 'success' = 'information';\n\n /* Hides the toast. /\n @Prop() hidden: boolean = false;\n\n /* ARIA role for the toast. /\n @Prop() toastRole: 'alert' \| 'log' \| 'status' = 'alert';\n\n @Element() host: HostElement;\n\n @State() hasSubheader: boolean;\n\n @State() hasLink: boolean;\n\n /* Hides the toast. /\n @Method()\n async hideToast() {\n this.~~hidden = true~~;\n ~~return {\n toastId: this.toastId,\n };\n~~ }\n\n /* Shows the toast. /\n @Method()\n async showToast() {\n this.~~hidden = false~~;\n ~~return {\n toastId: this.toastId,\n };\n~~ }\n\n /* Sends unique toast identifier component is closed. */\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n toastId: string;\n }>;\n\n getIconName = () => {\n switch (this.type) {\n case 'information':\n return 'info';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'success':\n return 'tick';\n default:\n return 'info';\n }\n };\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n connectedCallback() {\n const children = Array.from(this.host.children);\n this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n }\n\n getHeaderClasses = () => {\n if (!this.hasSubheader && !this.hasLink) {\n return 'only-header';\n }\n if (!this.hasSubheader) {\n return 'no-subheader';\n }\n return '';\n };\n\n render() {\n return (\n <Host\n toastRole={this.toastRole}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n class={`${this.hidden ? 'hide' : 'show'}`}\n >\n <div\n class={`\n toast-wrapper\n ${this.type}\n `}\n >\n <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n <div class={`toast-content`}>\n <div\n class={`toast-header\n ${this.getHeaderClasses()}\n `}\n >\n {this.header}\n </div>\n <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n <slot name=\"toast-subheader\"></slot>\n </div>\n <slot name=\"toast-link\"></slot>\n </div>\n <button\n onClick={() => {\n this.handleClose();\n }}\n class={`toast-close`}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-toast.js","mappings":"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","names":["SddsToast"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n display: none;\n visibility: hidden;\n}\n\n:host {\n z-index: z(toast);\n\n .toast-wrapper {\n display: flex;\n width: calc(352px - 4px);\n background-color: var(--sdds-toast-background-color);\n border-radius: 4px;\n\n &.information {\n border-left: 4px solid var(--sdds-information);\n\n sdds-icon {\n color: var(--sdds-information);\n }\n }\n\n &.success {\n border-left: 4px solid var(--sdds-positive);\n\n sdds-icon {\n color: var(--sdds-positive);\n }\n }\n\n &.error {\n border-left: 4px solid var(--sdds-negative);\n\n sdds-icon {\n color: var(--sdds-negative);\n }\n }\n\n &.warning {\n border-left: 4px solid var(--sdds-warning);\n\n sdds-icon {\n color: var(--sdds-warning);\n }\n }\n\n button.toast-close {\n height: 20px;\n width: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 14px 14px 0 0;\n border: none;\n background: transparent;\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n sdds-icon {\n color: var(--sdds-toast-dissmiss-color);\n padding: 0;\n }\n }\n }\n\n sdds-icon {\n padding: 14px 0 0 12px;\n }\n\n .toast-content {\n padding: 16px 0 16px 10px;\n display: flex;\n flex-direction: column;\n flex: 1;\n\n .toast-header {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-toast-headline-color);\n\n &.no-subheader {\n margin-bottom: 4px;\n }\n\n &.only-header {\n margin-bottom: 0;\n }\n }\n\n .toast-subheader {\n slot::slotted() {\n margin-top: 4px;\n color: var(--sdds-toast-subheadline-color);\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding-bottom: 16px;\n max-width: 252px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.no-link {\n slot::slotted() {\n padding-bottom: 0;\n }\n }\n }\n }\n\n slot[name='toast-link']::slotted() {\n color: var(--sdds-toast-link-color);\n }\n\n .sdds-mode-variant-primary {\n --sdds-toast-background: var(--sdds-toast-background-primary);\n }\n\n .sdds-mode-variant-secondary {\n --sdds-toast-background: var(--sdds-toast-background-secondary);\n }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toast',\n styleUrl: 'sdds-toast.scss',\n shadow: true,\n})\nexport class SddsToast {\n /* ID for the toast. Randomly generated if not specified. /\n @Prop() toastId: string = crypto.randomUUID();\n\n /* Header text for the component. /\n @Prop() header: string;\n\n /* Subheader text for the component. /\n @Prop() subheader: string;\n\n /* Type of toast. /\n @Prop() type: 'information' \| 'error' \| 'warning' \| 'success' = 'information';\n\n /* Hides the toast. /\n @Prop() hidden: boolean = false;\n\n /* ARIA role for the toast. /\n @Prop() toastRole: 'alert' \| 'log' \| 'status' = 'alert';\n\n @Element() host: HostElement;\n\n @State() hasSubheader: boolean;\n\n @State() hasLink: boolean;\n\n /* Hides the toast. /\n @Method()\n async hideToast() {\n this.handleClose();\n }\n\n /* Shows the toast. /\n @Method()\n async showToast() {\n this.handleShow();\n }\n\n /* Sends unique toast identifier component is closed. */\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n toastId: string;\n }>;\n\n getIconName = () => {\n switch (this.type) {\n case 'information':\n return 'info';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'success':\n return 'tick';\n default:\n return 'info';\n }\n };\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n handleShow = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = false;\n }\n };\n\n connectedCallback() {\n const children = Array.from(this.host.children);\n this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n }\n\n getHeaderClasses = () => {\n if (!this.hasSubheader && !this.hasLink) {\n return 'only-header';\n }\n if (!this.hasSubheader) {\n return 'no-subheader';\n }\n return '';\n };\n\n render() {\n return (\n <Host\n toastRole={this.toastRole}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n class={`${this.hidden ? 'hide' : 'show'}`}\n >\n <div\n class={`\n toast-wrapper\n ${this.type}\n `}\n >\n <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n <div class={`toast-content`}>\n <div\n class={`toast-header\n ${this.getHeaderClasses()}\n `}\n >\n {this.header}\n </div>\n <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n <slot name=\"toast-subheader\"></slot>\n </div>\n <slot name=\"toast-link\"></slot>\n </div>\n <button\n onClick={() => {\n this.handleClose();\n }}\n class={`toast-close`}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/side-menu-item.js ADDED Viewed

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as dfs } from './utils.js';
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const SddsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selected = false;
+    this.active = false;
+    this.collapsed = false;
+  }
+  updateSlotted(searchPredicate, mutationCallback) {
+    const assignedElements = this.slotEl.assignedElements({ flatten: true });
+    const firstSlottedElement = assignedElements[0];
+    if (firstSlottedElement) {
+      const foundElement = dfs(firstSlottedElement, searchPredicate);
+      if (foundElement) {
+        mutationCallback(foundElement);
+      }
+    }
+  }
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements() {
+    if (this.slotEl) {
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => {
+        element.classList.add('__sdds-side-menu-item-icon');
+        if (this.collapsed) {
+          element.classList.add('__sdds-side-menu-item-icon-collapsed');
+        }
+        else {
+          element.classList.remove('__sdds-side-menu-item-icon-collapsed');
+        }
+      };
+      this.updateSlotted(isIconOrSvg, addIconClass);
+    }
+  }
+  connectedCallback() {
+    var _a;
+    // closest() will return null if side-menu-item is inside a shadowRoot that
+    // does not contain a side-menu. This is the case for the side-menu-dropdown.
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  collapsedSideMenuEventHandeler(event) {
+    this.collapsed = event.detail.collapsed;
+    this.updateSlottedElements();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-active': this.active,
+        'component-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuItemCss; }
+}, [1, "sdds-side-menu-item", {
+    "selected": [4],
+    "active": [4],
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandeler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsSideMenuItem);
+      }
+      break;
+  } });
+}
+export { SddsSideMenuItem as S, defineCustomElement as d };
+//# sourceMappingURL=side-menu-item.js.map

package/dist/components/side-menu-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"side-menu-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,8yCAA8yC;;MCSzzC,gBAAgB;;;;;oBAIC,KAAK;kBAIP,KAAK;qBAED,KAAK;;EAMnC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;GACF;;;;EAKD,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,KAC1B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO;QAC3B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;SAC/D;aAAM;UACL,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,sCAAsC,CAAC,CAAC;SAClE;OACF,CAAC;MACF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;KAC/C;GACF;EAED,iBAAiB;;;;IAGf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,SAAS,CAAC;GAC7C;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACxE;EAGD,8BAA8B,CAAC,KAAkC;IAC/D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;IACxC,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;QACnC,kBAAkB,EAAE,IAAI,CAAC,MAAM;QAC/B,qBAAqB,EAAE,IAAI,CAAC,SAAS;OACtC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-item/side-menu-item.scss?tag=sdds-side-menu-item&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-item/side-menu-item.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../../mixins/focus-state';\n\n:host {\n display: block;\n\n .component {\n ::slotted(a),\n ::slotted(button) {\n all: unset;\n box-sizing: border-box;\n height: 68px;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 0 24px;\n border: none;\n background-color: var(--sdds-sidebar-side-menu-background-cover);\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-sidebar-side-menu-single-item-color);\n }\n\n ::slotted(a:focus-visible),\n ::slotted(button:focus-visible) {\n @include sdds-focus-state;\n }\n\n &:hover {\n ::slotted(a),\n ::slotted(button) {\n cursor: pointer;\n background-color: var(--sdds-sidebar-item-state-hover);\n }\n }\n\n &-collapsed {\n ::slotted(a),\n ::slotted(button) {\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n }\n\n &-selected:not(&-active) {\n ::slotted(a),\n ::slotted(button) {\n border-left: 4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);\n padding-left: 20px;\n background-color: var(--sdds-sidebar-item-state-selected);\n }\n }\n }\n}\n\n@media (min-width: $grid-lg) {\n :host {\n .component.component-collapsed {\n ::slotted(a),\n ::slotted(button) {\n color: rgb(90 90 90 / 0%);\n overflow: hidden;\n }\n }\n }\n}\n","import { Component, h, Host, Element, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-side-menu-item',\n styleUrl: 'side-menu-item.scss',\n shadow: true,\n})\nexport class SddsSideMenuItem {\n @Element() host: HTMLSddsSideMenuItemElement;\n\n /** If the item should appear selected. */\n @Prop() selected: boolean = false;\n\n /** If the item should appear active. Can be used when the item is\n * triggering a dropdown, and the dropdown is open, for example. */\n @Prop() active: boolean = false;\n\n @State() collapsed: boolean = false;\n\n private sideMenuEl: HTMLSddsSideMenuElement;\n\n private slotEl: HTMLSlotElement;\n\n updateSlotted(\n searchPredicate: (element: HTMLElement) => boolean,\n mutationCallback: (element: HTMLElement) => void,\n ) {\n const assignedElements = this.slotEl.assignedElements({ flatten: true });\n const firstSlottedElement = assignedElements[0] as HTMLElement;\n if (firstSlottedElement) {\n const foundElement = dfs(firstSlottedElement, searchPredicate);\n if (foundElement) {\n mutationCallback(foundElement);\n }\n }\n }\n\n /**\n * This function is needed because we can't use CSS selectors to style something in the light dom\n */\n updateSlottedElements() {\n if (this.slotEl) {\n const isIconOrSvg = (element) =>\n element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n const addIconClass = (element) => {\n element.classList.add('__sdds-side-menu-item-icon');\n if (this.collapsed) {\n element.classList.add('__sdds-side-menu-item-icon-collapsed');\n } else {\n element.classList.remove('__sdds-side-menu-item-icon-collapsed');\n }\n };\n this.updateSlotted(isIconOrSvg, addIconClass);\n }\n }\n\n connectedCallback() {\n // closest() will return null if side-menu-item is inside a shadowRoot that\n // does not contain a side-menu. This is the case for the side-menu-dropdown.\n this.sideMenuEl = this.host.closest('sdds-side-menu');\n this.collapsed = this.sideMenuEl?.collapsed;\n }\n\n componentDidLoad() {\n this.slotEl = this.host.shadowRoot.querySelector('slot');\n this.updateSlottedElements();\n this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n }\n\n @Listen('sddsSideMenuCollapsed', { target: 'body' })\n collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>) {\n this.collapsed = event.detail.collapsed;\n this.updateSlottedElements();\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'component': true,\n 'component-selected': this.selected,\n 'component-active': this.active,\n 'component-collapsed': this.collapsed,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/side-menu-user-image.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+const SideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.src = undefined;
+    this.alt = undefined;
+  }
+  render() {
+    return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
+  }
+  static get style() { return sideMenuUserImageCss; }
+}, [1, "sdds-side-menu-user-image", {
+    "src": [1],
+    "alt": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-user-image"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-user-image":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuUserImage);
+      }
+      break;
+  } });
+}
+export { SideMenuUserImage as S, defineCustomElement as d };
+//# sourceMappingURL=side-menu-user-image.js.map

package/dist/components/side-menu-user-image.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"side-menu-user-image.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,wEAAwE;;MCSxF,iBAAiB;;;;;;;;EAO5B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,EACZ,IAAI,CAAC,GAAG,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAC7C,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.scss?tag=sdds-side-menu-user-image&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.tsx"],"sourcesContent":[":host {\n img,\n ::slotted(*) {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// TODO this component is just for the dropdown detecting that it should\n// change layout\n@Component({\n tag: 'sdds-side-menu-user-image',\n styleUrl: 'side-menu-user-image.scss',\n shadow: true,\n})\nexport class SideMenuUserImage {\n /** The image source. */\n @Prop() src: string;\n\n /** The image alt text. */\n @Prop() alt: string;\n\n render() {\n return (\n <Host>\n <slot></slot>\n {this.src && <img src={this.src} alt={this.alt} />}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/side-menu-user-label.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const sideMenuUserLabelCss = ":host{display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--sdds-grey-500)}";
+const SideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+  }
+  static get style() { return sideMenuUserLabelCss; }
+}, [1, "sdds-side-menu-user-label", {
+    "heading": [1],
+    "subheading": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-user-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-user-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuUserLabel);
+      }
+      break;
+  } });
+}
+export { SideMenuUserLabel as S, defineCustomElement as d };
+//# sourceMappingURL=side-menu-user-label.js.map

package/dist/components/side-menu-user-label.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"side-menu-user-label.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,gMAAgM;;MCOhN,iBAAiB;;;;;;;;EAO5B,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,IAAI,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CAC9D,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.scss?tag=sdds-side-menu-user-label&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.tsx"],"sourcesContent":[":host {\n display: block;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-sidebar-side-menu-single-item-color);\n\n .subheading {\n color: var(--sdds-grey-500);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-side-menu-user-label',\n styleUrl: 'side-menu-user-label.scss',\n shadow: true,\n})\nexport class SideMenuUserLabel {\n /** The heading text. */\n @Prop() heading!: string;\n\n /** The subheading text. */\n @Prop() subheading: string;\n\n render() {\n return (\n <Host>\n {this.heading}\n {this.subheading && <div class=\"subheading\">{this.subheading}</div>}\n </Host>\n );\n }\n}\n"],"version":3}