npm - @scania/tegel - Versions diffs - 0.0.52 → 0.0.71-beta - Mend

@scania/tegel 0.0.52 → 0.0.71-beta

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

package/dist/cjs/sdds-spinner.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-spinner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,+wEAA+wE;;MCOrxE,OAAO;;;gBAEwB,IAAI;mBAGH,UAAU;;EAErD,MAAM;IACJ,QACEA,8BAAe,WAAW,EAAC,IAAI,EAAC,QAAQ,gBAAY,SAAS,IAC3DA,iBAAK,KAAK,EAAE,qCAAqC,IAAI,CAAC,IAAI,EAAE,iBAAc,MAAM,IAC9EA,oBAAQ,KAAK,EAAE,2CAA2C,IAAI,CAAC,OAAO,EAAE,GAAI,CACxE,CACF,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/spinner/spinner.scss?tag=sdds-spinner","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import './spinner-vars.scss';\n@import '../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n}\n\n.sdds-spinner-svg {\n width: calc(var(--sdds-spinner-radius) * 2);\n height: calc(var(--sdds-spinner-radius) * 2);\n transform: scale(-1, 1) rotate(-90deg);\n\n &-xs {\n --sdds-spinner-radius: var(--sdds-spinner-radius-xs);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n }\n\n &-sm {\n --sdds-spinner-radius: var(--sdds-spinner-radius-sm);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n }\n\n &-md {\n --sdds-spinner-radius: var(--sdds-spinner-radius-md);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n }\n\n &-lg {\n --sdds-spinner-radius: var(--sdds-spinner-radius-lg);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);\n }\n}\n\n.sdds-spinner-circle {\n cx: var(--sdds-spinner-radius);\n cy: var(--sdds-spinner-radius);\n r: calc(var(--sdds-spinner-radius) - (var(--sdds-spinner-stroke-width) / 2));\n stroke-width: var(--sdds-spinner-stroke-width);\n fill: none;\n\n //Calculation for lenght of dash\n --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));\n\n stroke-dasharray: var(--sdds-spinner-stroke-dash);\n stroke-width: var(--sdds-spinner-stroke-width);\n animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;\n\n &-standard {\n stroke: var(--sdds-spinner-background);\n }\n\n &-inverted {\n stroke: var(--sdds-spinner-background-inverted);\n }\n}\n\n@keyframes dash {\n from {\n stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));\n }\n\n to {\n stroke-dashoffset: var(--sdds-spinner-stroke-dash);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-spinner',\n styleUrl: 'spinner.scss',\n shadow: false,\n})\nexport class Spinner {\n /** Size of spinner */\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n /** Variant of spinner */\n @Prop() variant: 'standard' | 'inverted' = 'standard';\n\n render() {\n return (\n <div aria-live=\"assertive\" role=\"status\" aria-label=\"loading\">\n <svg class={`sdds-spinner-svg sdds-spinner-svg-${this.size}`} aria-hidden=\"true\">\n <circle class={`sdds-spinner-circle sdds-spinner-circle-${this.variant}`} />\n </svg>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-stepper-item.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-stepper-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,ynIAAynI;;MCOvoI,WAAW;;;qBAEM,EAAE;iBAGgC,UAAU;;;;;;;EAgBxE,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;GAC5C;;EAID,MAAM,QAAQ,CAAC,KAAK;IAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;GACpC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EACnC,EAAE,IAEFA,iBAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjDA,uBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAC/B,KAEbA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CAC3B,CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACdA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,SAAS,CAAO,CACvE,CACG,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n content: ' ';\n position: absolute;\n background-color: var(--sdds-stepper-icon-step-background-after);\n opacity: 0.16;\n}\n\n:host {\n position: relative;\n\n sdds-icon {\n line-height: 1;\n }\n\n [role='listItem'] {\n display: flex;\n justify-content: start;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n &.text-below {\n flex-direction: column;\n }\n\n &.lg {\n padding: 0 20px;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n\n .content-container {\n height: 30px;\n width: 30px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 36px;\n width: 1px;\n top: 40px;\n left: 36px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 24px);\n right: 0;\n top: 16px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n right: calc(50% + 24px);\n left: 0;\n top: 16px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n &.sm {\n padding: 0 20px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n\n .content-container {\n height: 24px;\n width: 24px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n\n &::before {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 16px + 8px);\n right: 0;\n top: 13px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n left: 0;\n right: calc(50% + 24px);\n top: 13px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n .content-container {\n border-radius: 100px;\n border: 1px solid var(--sdds-stepper-icon-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n &.error {\n border-color: var(--sdds-negative);\n color: var(--sdds-negative);\n }\n\n &.success {\n background-color: var(--sdds-positive);\n border-color: var(--sdds-positive);\n color: var(--sdds-white);\n }\n\n &.upcoming {\n background-color: transparent;\n border-color: var(--sdds-stepper-label-border-color-upcoming);\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n\n .label {\n text-align: center;\n\n &.lg {\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n }\n\n &.sm {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n }\n\n &.upcoming {\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n }\n}\n\n:host(.last) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::after {\n display: none;\n }\n }\n }\n\n [role='listItem'] {\n &.sm {\n &.vertical {\n &::before {\n display: none;\n }\n }\n }\n }\n}\n\n:host(.first) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::before {\n display: none;\n }\n }\n }\n}\n","import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-stepper-item',\n styleUrl: 'sdds-stepper-item.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** Label text for the stepper-item. */\n @Prop() labelText: string = '';\n\n /** State of the stepper-item */\n @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n @State() hideLabel: boolean;\n\n @State() size: string;\n\n @State() iconSize: string;\n\n @State() direction: string;\n\n @State() labelPosition: string;\n\n @Element() el: HTMLElement;\n\n stepperEl: HTMLSddsStepperElement;\n\n componentWillLoad() {\n this.stepperEl = this.el.closest('sdds-stepper');\n this.direction = this.stepperEl.direction;\n this.labelPosition = this.stepperEl.labelPosition;\n this.size = this.stepperEl.size;\n this.hideLabel = this.stepperEl.hideLabels;\n }\n\n /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */\n @Method()\n async setWidth(width) {\n this.el.style.width = `${width}px`;\n }\n\n render() {\n return (\n <Host>\n <div\n role=\"listItem\"\n class={`${this.size} ${this.direction} text-${this.labelPosition} ${\n this.hideLabel ? 'hide-labels' : ''\n }`}\n >\n <div class={`${this.state} content-container`}>\n {this.state === 'success' || this.state === 'error' ? (\n <sdds-icon\n name={this.state === 'success' ? 'tick' : 'warning'}\n size={this.size === 'lg' ? '20px' : '16px'}\n ></sdds-icon>\n ) : (\n <slot name=\"index\"></slot>\n )}\n </div>\n {!this.hideLabel && (\n <div class={`label ${this.size} ${this.state}`}>{this.labelText}</div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-stepper.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-stepper.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,iMAAiM;;MCQ3M,WAAW;;;qBAEyB,YAAY;yBAGhB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;iBAEV,CAAC;;EAM1B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;MACjC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;GACF;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;MAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAsC,CAAC;MACpF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI;QACzB,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;UACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/B;OACF,CAAC,CAAC;MACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC5D;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,+BAA+B,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,IAExFA,qBAAa,CACV,CACA,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n [role='list'] {\n display: flex;\n justify-content: space-evenly;\n\n &.vertical {\n height: 100%;\n flex-direction: column;\n justify-content: unset;\n gap: 48px;\n }\n\n &.vertical.sm {\n gap: 36px;\n }\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-stepper',\n styleUrl: 'sdds-stepper.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** The direction the children are layed out. */\n @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n /** Text position, only available on direction:horizontal */\n @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n /** Size of the component and it's children. */\n @Prop() size: 'sm' | 'lg' = 'lg';\n\n /** Hides the label for the child components if true. */\n @Prop() hideLabels: boolean = false;\n\n @State() width: number = 0;\n\n @Element() host: HostElement;\n\n children: Array<HTMLSddsStepperItemElement>;\n\n componentWillLoad() {\n this.host.children[0].classList.add('first');\n this.host.children[this.host.children.length - 1].classList.add('last');\n if (this.direction === 'vertical') {\n this.labelPosition = 'aside';\n }\n }\n\n componentDidLoad() {\n if (this.labelPosition === 'below') {\n this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n this.children.forEach((item) => {\n if (item.offsetWidth > this.width) {\n this.width = item.offsetWidth;\n }\n });\n this.children.forEach((item) => item.setWidth(this.width));\n }\n }\n\n render() {\n return (\n <Host>\n <ol\n role=\"list\"\n class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n >\n <slot></slot>\n </ol>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-table-body-row-expandable.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n @include sdds-box-sizing;\n\n display: contents;\n\n .sdds-table__row,\n .sdds-table__row-extend {\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n }\n\n .sdds-table__row:hover,\n .sdds-table__row-extend:hover {\n background-color: var(--sdds-data-table-body-row-background-hover);\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 46px;\n cursor: pointer;\n padding: 0 16px;\n position: relative;\n\n .sdds-table__expand-input {\n all: unset;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n\n .sdds-expendable-row-icon {\n height: 16px;\n width: 16px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n }\n\n .sdds-table__row-expand {\n display: none;\n transition: background-color 200ms ease;\n\n .sdds-table__cell-expand {\n padding: 16px 16px 16px 66px;\n color: var(--sdds-data-table-color);\n }\n }\n}\n\n:host(.sdds-table__row-expand--active) {\n .sdds-table__row {\n background-color: var(--sdds-data-table-body-row-background-selected);\n }\n\n .sdds-table__expand-control-container {\n .sdds-expendable-row-icon {\n transform: rotate(180deg);\n }\n }\n\n .sdds-table__row-expand {\n background-color: var(--sdds-data-table-body-row-background-selected);\n display: table-row;\n }\n}\n\n// test\n:host(.sdds-table__compact) {\n .sdds-table__expand-control-container {\n height: 30px;\n }\n\n .sdds-table__row-expand {\n .sdds-table__cell-expand {\n padding: 8px 16px 8px 66px;\n }\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__cell--expand {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n 'modeVariant',\n];\n@Component({\n tag: 'sdds-table-body-row-expandable',\n styleUrl: 'table-body-row-expandable.scss',\n shadow: true,\n})\nexport class TableBodyRowExpandable {\n /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n @Prop() colSpan: number = null;\n\n @State() isExpanded: boolean = false;\n\n @State() tableId: string = '';\n\n @State() columnsNumber: number = null;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' | 'secondary' = null;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** @internal Sends out expanded status which is used by the table header component */\n @Event({\n eventName: 'internalSddsRowExpanded',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n internalSddsRowExpanded: EventEmitter<any>;\n\n /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: 'internalSddsPagination',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsPagination: EventEmitter<string>;\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 componentDidLoad() {\n this.internalSddsPagination.emit(this.tableId);\n }\n\n componentWillRender() {\n if (this.colSpan !== null) {\n this.columnsNumber = this.colSpan;\n } else {\n this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n }\n }\n\n sendValue() {\n this.internalSddsRowExpanded.emit([this.tableId, this.isExpanded]);\n }\n\n onChangeHandler(event) {\n this.isExpanded = event.currentTarget.checked === true;\n this.sendValue();\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__row-expand--active': this.isExpanded,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n <tr class=\"sdds-table__row\">\n <td class=\"sdds-table__cell sdds-table__cell--expand\">\n <label class=\"sdds-table__expand-control-container\">\n <input\n class=\"sdds-table__expand-input\"\n type=\"checkbox\"\n onChange={(event) => this.onChangeHandler(event)}\n checked={this.isExpanded}\n />\n <span class=\"sdds-expendable-row-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=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </label>\n </td>\n <slot />\n </tr>\n\n <tr class=\"sdds-table__row-expand\">\n <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n <slot name=\"expand-row\" />\n </td>\n </tr>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-table-body.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-table-body.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/data-table/table-body/table-body.scss?tag=sdds-table-body","./src/components/data-table/table-body/table-body.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\nsdds-table-body {\n @include sdds-box-sizing;\n\n display: table-row-group;\n\n .sdds-table__info-message {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: table-cell;\n box-sizing: border-box;\n color: var(--sdds-data-table-color);\n padding: var(--sdds-spacing-element-16);\n min-width: 192px;\n vertical-align: top;\n background-color: transparent;\n transition: background-color 200ms ease;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport dummyData from './dummy-data.json';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n];\n\n@Component({\n tag: 'sdds-table-body',\n styleUrl: 'table-body.scss',\n shadow: false,\n})\nexport class TableBody {\n /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */\n @Prop() disableFilteringFunction: boolean = false;\n\n /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */\n @Prop() disableSortingFunction: boolean = false;\n\n /** Prop to pass JSON string which enables automatic rendering of table rows and cells */\n @Prop() bodyData: any;\n\n /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */\n @Prop() enableDummyData: boolean = false;\n\n @State() dummyData: any = JSON.stringify(dummyData);\n\n @Element() host: HTMLElement;\n\n @State() rowsPerPage: number = 1;\n\n @State() enableMultiselect: boolean = false;\n\n @State() enablePaginationTableBody: boolean = false;\n\n @State() enableExpandableRows: boolean = true;\n\n @State() innerBodyData = [];\n\n @State() bodyDataManipulated = [];\n\n @State() bodyDataOriginal = [];\n\n @State() multiselectArray = [];\n\n @State() multiselectArrayJSON: string;\n\n @State() mainCheckboxStatus: boolean = false;\n\n @State() columnsNumber: number = 0;\n\n @State() disableAllSorting: boolean = false;\n\n @State() numberOfPages: number = 0;\n\n @State() paginationValue: number = 1;\n\n @State() tempPaginationDisable: boolean = false;\n\n @State() showNoResultsMessage: boolean = false;\n\n @State() tableId: string = '';\n\n tableEl: HTMLSddsTableElement;\n\n @Watch('bodyData')\n arrayDataWatcher(newValue: string) {\n if (typeof newValue === 'string') {\n this.innerBodyData = JSON.parse(newValue);\n } else {\n this.innerBodyData = newValue;\n }\n this.bodyDataManipulated = [...this.innerBodyData];\n this.bodyDataOriginal = [...this.innerBodyData];\n }\n\n /** @internal Event that sends unique table identifier and enable/disable status for sorting functionality */\n @Event({\n eventName: 'internalSddsSortingChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsSortingChange: EventEmitter<any>;\n\n /** @internal Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n @Event({\n eventName: 'internalSddsCheckboxChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsCheckboxChange: EventEmitter<any>;\n\n /** @internal Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */\n @Event({\n eventName: 'internalSddsMainCheckboxChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsMainCheckboxChange: 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 static compareValues(key, order = 'asc') {\n return function innerSort(a, b) {\n // eslint-disable-next-line no-prototype-builtins\n if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {\n // property doesn't exist on either object\n return 0;\n }\n\n const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];\n const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];\n\n let comparison = 0;\n if (varA > varB) {\n comparison = 1;\n } else if (varA < varB) {\n comparison = -1;\n }\n return order === 'desc' ? comparison * -1 : comparison;\n };\n }\n\n uncheckAll = () => {\n this.mainCheckboxStatus = false;\n this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n this.internalSddsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n };\n\n sortData(keyValue, sortingDirection) {\n if (!this.disableSortingFunction) {\n if (this.enableMultiselect) {\n // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.\n this.uncheckAll();\n }\n\n // use spread operator to make enable sorting and modifying array, same as using .slice()\n this.bodyDataManipulated = [...this.bodyDataManipulated];\n this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));\n }\n }\n\n // Listen to sortColumnData from data-table-header-element - TODO\n @Listen('sddsSortChange', { target: 'body' })\n updateOptionsContent(event: CustomEvent<any>) {\n const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;\n if (this.tableId === receivedID) {\n this.sortData(receivedKeyValue, receivedSortingDirection);\n }\n }\n\n selectedDataExporter = () => {\n const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');\n\n this.multiselectArray = [];\n for (let j = 0; j < selectedRows.length; j++) {\n const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');\n const selectedObject = {};\n for (let i = 0; i < rowCells.length; i++) {\n const currentCellKey = rowCells[i].getAttribute('cell-key');\n const currentCellValue = rowCells[i].getAttribute('cell-value');\n selectedObject[currentCellKey] = currentCellValue;\n }\n this.multiselectArray.push(selectedObject);\n }\n this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);\n };\n\n @Listen('internalSddsMainCheckboxChange', { target: 'body' }) // -\n headCheckboxListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n [, this.mainCheckboxStatus] = event.detail;\n this.selectedDataExporter();\n }\n }\n\n bodyCheckBoxClicked = () => {\n const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;\n\n const numberOfRowsSelected = this.host.getElementsByClassName(\n 'sdds-table__row--selected',\n ).length;\n\n this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;\n\n this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n\n this.selectedDataExporter();\n };\n\n // No need to read the value, event is here just to trigger another function\n @Listen('internalSddsRowChange', { target: 'body' })\n bodyCheckboxListener() {\n this.bodyCheckBoxClicked();\n }\n\n searchFunction(searchTerm) {\n if (!this.disableFilteringFunction) {\n /*\n // Logic for filtering JSON data on all columns\n // Really nice solution, do not delete, might be needed in future\n // Reason to go with upper one is not to lose selected state on checkboxes\n if (searchTerm.length > 0) {\n this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>\n Object.keys(option).some(\n (key) =>\n String(option[key] ?? '')\n .toLowerCase()\n .indexOf(searchTerm) >= 0\n )\n );\n } else {\n this.bodyDataManipulated = this.bodyDataOriginal;\n }\n */\n\n // grab all rows in body\n const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');\n\n if (searchTerm.length > 0) {\n if (this.enablePaginationTableBody) {\n this.tempPaginationDisable = true;\n }\n\n dataRowsFiltering.forEach((item) => {\n const cells = item.querySelectorAll('sdds-body-cell');\n const cellValuesArray = [];\n\n // go through cells and save cell-values in array\n cells.forEach((cellItem) => {\n const cellValue = cellItem.getAttribute('cell-value').toLowerCase();\n cellValuesArray.push(cellValue);\n });\n\n // iterate over array of values and see if one matches search string\n const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));\n\n // if matches, show parent row, otherwise hide the row\n if (matchCounter) {\n item.classList.remove('sdds-table__row--hidden');\n } else {\n item.classList.add('sdds-table__row--hidden');\n }\n });\n\n this.disableAllSorting = true;\n this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n\n const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');\n\n // If same, info message will be shown\n this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;\n } else {\n if (this.enablePaginationTableBody) {\n this.tempPaginationDisable = false;\n }\n\n // Check if pagination is ON in order to prevent showing all rows\n if (this.enablePaginationTableBody) {\n // TODO: EMIT PAGINATION\n } else {\n dataRowsFiltering.forEach((item) => {\n item.classList.remove('sdds-table__row--hidden');\n });\n }\n\n this.disableAllSorting = false;\n this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n }\n }\n }\n\n // Listen to sddsFilter from tableToolbar component\n @Listen('sddsFilter', { target: 'body' })\n sddsFilterListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n this.searchFunction(event.detail[1]);\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 if (this.enableDummyData) {\n this.bodyData = this.dummyData;\n } else if (this.bodyData) {\n this.arrayDataWatcher(this.bodyData);\n }\n }\n\n componentWillRender() {\n const headerColumnsNo =\n this.host.parentElement.querySelector('sdds-table-header').children.length;\n\n // multiselect and expended features requires one extra column for controls...\n if (this.enableMultiselect || this.enableExpandableRows) {\n this.columnsNumber = headerColumnsNo + 1;\n } else {\n this.columnsNumber = headerColumnsNo;\n }\n }\n\n render() {\n return (\n <Host data-selected-rows={this.multiselectArrayJSON}>\n {this.bodyDataManipulated.map((row) => (\n <sdds-table-body-row>\n {Object.keys(row).map((cellData) => (\n <sdds-body-cell cell-key={cellData} cell-value={row[cellData]}></sdds-body-cell>\n ))}\n </sdds-table-body-row>\n ))}\n {this.showNoResultsMessage && (\n <tr>\n <td class=\"sdds-table__info-message\" colSpan={this.columnsNumber}>\n Unfortunately, no data matches your search term 😕\n </td>\n </tr>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-table-footer.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/cjs/sdds-table-header.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-table-header.entry.cjs.js","mappings":"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","names":["h","Host"],"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}

package/dist/cjs/sdds-table-toolbar.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-table-toolbar.entry.cjs.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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1DD,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,qBAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9DA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnBA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,mBACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACFA,kBAAM,KAAK,EAAC,4BAA4B,IACtCA,iBAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrEA,+BACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACDA,kBAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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}

package/dist/cjs/sdds-table.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-table.entry.cjs.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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9DD,mBACE,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,IAEDA,qBAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;","names":["h","Host"],"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}

package/dist/cjs/sdds-textarea.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-textarea.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@mixin textfield-base {\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-textarea-color);\n background-color: var(--sdds-textarea-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-textarea-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-textarea-placeholder-focus-color);\n }\n\n &:disabled {\n background-color: var(--sdds-textarea-disabled-background);\n color: var(--sdds-textarea-disabled-color);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--sdds-textarea-disabled-placeholder);\n }\n\n ~ .textfield-label-inside {\n color: var(--sdds-textarea-disabled-label);\n }\n }\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-textarea-placeholder-focus-color);\n }\n}\n\n.textarea-container {\n //@extend .sdds-textfield-container;\n border-radius: 4px 4px 0 0;\n position: relative;\n box-sizing: border-box;\n\n //@extend end\n\n height: auto;\n width: 100%;\n min-width: 208px;\n display: inline-flex;\n background-color: transparent;\n flex-flow: row wrap;\n border-bottom: 0;\n\n &.no-min-width {\n min-width: unset;\n }\n}\n\n.textarea-container {\n .textarea-wrapper {\n position: relative;\n width: unset;\n min-width: 100%;\n }\n}\n\n.textarea-container:not(.textarea-disabled) {\n .textarea-wrapper {\n &::before,\n &::after {\n content: '';\n height: 2px;\n width: 0;\n position: absolute;\n background: var(--sdds-textarea-bar);\n transition: 0.35s ease all;\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n &::after,\n &::before {\n top: calc(100% - 2px);\n }\n }\n}\n\n.textarea-input {\n @include textfield-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n display: block;\n resize: vertical;\n border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n // Display none only works in Chrome\n &::-webkit-resizer {\n display: none;\n }\n\n &:hover {\n border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n }\n}\n\n// Need to override default resizer in FF & Safari\n.textarea-resizer-icon {\n color: var(--sdds-textarea-resize-icon);\n position: absolute;\n display: block;\n bottom: 2px;\n right: 1px;\n padding-bottom: 2px;\n padding-right: 2px;\n pointer-events: none;\n background-color: var(--sdds-textarea-background);\n\n svg {\n display: block;\n }\n}\n\n.textarea-label {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n z-index: 1;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-textarea-label-color);\n}\n\n.textarea-container {\n &.textarea-label-inside {\n .textarea-label {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n transition: 0.1s ease all;\n\n //@include end\n\n color: var(--sdds-textarea-label-inside-color);\n position: absolute;\n top: var(--sdds-spacing-element-20);\n left: var(--sdds-spacing-element-16);\n }\n\n .textarea-input {\n @include placeholder-label;\n }\n }\n\n &.textarea-focus {\n &.textarea-label-inside {\n .textarea-label {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n top: var(--sdds-spacing-element-8);\n }\n }\n\n .textarea-wrapper {\n &::before,\n &::after {\n width: 50%;\n }\n }\n }\n\n &.textarea-data {\n &.textarea-label-inside {\n .textarea-label {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n top: var(--sdds-spacing-element-8);\n }\n }\n }\n}\n\n.textarea-textcounter {\n //@extend .sdds-textfield-textcounter;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-textarea-textcounter);\n float: right;\n\n & .textfield-textcounter-divider {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-textarea-textcounter-divider);\n }\n\n //@extend end\n\n flex-basis: 100%;\n text-align: right;\n padding-top: var(--sdds-spacing-element-4);\n}\n\n.textarea-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: flex;\n gap: 8px;\n align-items: center;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-textarea-helper);\n flex-grow: 2;\n flex-basis: auto;\n\n ~ .textarea-textcounter {\n flex-basis: auto;\n }\n}\n\n// Different state\n\n.textarea-success {\n .textarea-input {\n border-bottom-color: var(--sdds-textarea-border-bottom-success);\n }\n}\n\n.textarea-error {\n .textarea-input {\n border-bottom-color: var(--sdds-textarea-border-bottom-error);\n }\n\n .textarea-wrapper {\n &::after,\n &::before {\n background: var(--sdds-textarea-bar-error);\n }\n }\n\n .textarea-helper {\n color: var(--sdds-textarea-helper-error);\n }\n}\n\n//Disabled state\n.textarea-disabled {\n .textarea-input {\n border-bottom-color: transparent;\n }\n\n .textarea-label {\n color: var(--sdds-textarea-disabled-label);\n }\n}\n\n//Read only state\n\n.textarea-icon__readonly {\n display: none;\n position: absolute;\n right: 18px;\n top: 18px;\n color: var(--sdds-textarea-icon-read-only-color);\n\n &-label {\n display: none;\n position: absolute;\n right: 18px;\n top: 48px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n padding: 8px;\n color: var(--sdds-textarea-icon-read-only-label-color);\n background-color: var(--sdds-textarea-icon-read-only-label-background);\n white-space: nowrap;\n border-radius: 4px 0 4px 4px;\n }\n}\n\n.textarea-readonly {\n pointer-events: none;\n\n .textarea-icon__readonly {\n display: block;\n\n &:hover {\n ~ .textarea-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n\n .textfield-container {\n background-color: transparent;\n }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-textarea',\n styleUrl: 'textarea.scss',\n shadow: false,\n scoped: true,\n})\nexport class Textarea {\n /** Textinput for focus state */\n textEl?: HTMLTextAreaElement;\n\n /** Label text */\n @Prop() label: string = '';\n\n /** Name attribute */\n @Prop() name: string = '';\n\n /** Helper text */\n @Prop() helper: string;\n\n /** Textarea cols attribute */\n @Prop() cols: number;\n\n /** Textarea rows attribute */\n @Prop() rows: number;\n\n /** Position of the label for the textfield. */\n @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n /** Placeholder text */\n @Prop() placeholder: string = '';\n\n /** Value of the input text */\n @Prop() value: string = '';\n\n /** Set input in disabled state */\n @Prop() disabled: boolean = false;\n\n /** Set input in readonly state */\n @Prop() readOnly: boolean = false;\n\n /** Error state of input */\n @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n /** Max length of input */\n @Prop() maxLength: number;\n\n /** Mode variant of the textarea */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** Control of autofocus */\n @Prop() autoFocus: boolean = false;\n\n /** Unset minimum width of 208px. */\n @Prop() noMinWidth: boolean = false;\n\n /** Listen to the focus state of the input */\n @State() focusInput;\n\n /** Change event for the textarea */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsChange: EventEmitter;\n\n handleChange(event): void {\n this.sddsChange.emit(event);\n }\n\n /** Blur event for the textarea */\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n handleBlur(event): void {\n this.sddsBlur.emit(event);\n this.focusInput = false;\n }\n\n /** Input event for the textarea */\n @Event({\n eventName: 'sddsInput',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsInput: EventEmitter<InputEvent>;\n\n // Data input event in value prop\n handleInput(event): void {\n this.sddsInput.emit(event);\n this.value = event.target.value;\n }\n\n /** Focus event for the textarea */\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleFocus(event): void {\n this.textEl.focus();\n this.focusInput = true;\n this.sddsFocus.emit(event);\n }\n\n render() {\n return (\n <div\n class={`\n textarea-container\n ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}\n ${this.focusInput ? 'textarea-focus' : ''}\n ${this.disabled ? 'textarea-disabled' : ''}\n ${this.readOnly ? 'textarea-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.value ? 'textarea-data' : ''}\n ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}\n ${this.noMinWidth ? 'no-min-width' : ''}\n `}\n >\n {this.labelPosition !== 'no-label' && <span class={'textarea-label'}>{this.label}</span>}\n <div class=\"textarea-wrapper\">\n <textarea\n class={'textarea-input'}\n ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n disabled={this.disabled}\n readonly={this.readOnly}\n placeholder={this.placeholder}\n value={this.value}\n name={this.name}\n autofocus={this.autoFocus}\n maxlength={this.maxLength}\n cols={this.cols}\n rows={this.rows}\n onFocus={(event) => {\n if (!this.readOnly) {\n this.handleFocus(event);\n }\n }}\n onBlur={(event) => {\n if (!this.readOnly) {\n this.handleBlur(event);\n }\n }}\n onInput={(event) => this.handleInput(event)}\n onChange={(event) => this.handleChange(event)}\n ></textarea>\n <span class=\"textarea-resizer-icon\">\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n <span class=\"textarea-icon__readonly\">\n <sdds-icon name=\"edit_inactive\"></sdds-icon>\n </span>\n <span class=\"textarea-icon__readonly-label\">This field is non-editable</span>\n </div>\n <span class={'textarea-helper'}>\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </span>\n\n {this.maxLength > 0 && (\n <div class={'textarea-textcounter'}>\n {this.value === null ? 0 : this.value?.length}\n <span class=\"textfield-textcounter-divider\"> / </span> {this.maxLength}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-textfield.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-textfield.entry.cjs.js","mappings":"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","names":["h"],"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/cjs/sdds-toast.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-toast.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,upEAAupE;;MCQ/pE,SAAS;;;;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,QACEA,QAACC,UAAI,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,IAEzCD,iBACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV,IAEHA,uBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC7DA,iBAAK,KAAK,EAAE,eAAe,IACzBA,iBACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR,EACNA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,IAC5DA,kBAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACNA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACNA,oBACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,KAAK,EAAE,aAAa,IAEpBA,uBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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}

package/dist/cjs/sdds-toggle.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnH,UAAU;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACDA,uCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACFA,mBAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxEA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n .toggle-headline {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-toggle-headline);\n margin-bottom: 12px;\n\n &.disabled {\n color: var(--sdds-toggle-headline-disabled);\n }\n }\n\n input[type='checkbox'] {\n margin: 0;\n width: 44px;\n height: 24px;\n position: relative;\n display: inline-block;\n vertical-align: middle;\n\n &::after,\n &::before {\n content: '';\n position: absolute;\n box-sizing: border-box;\n transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n }\n\n &::before {\n /* Slider */\n width: 44px;\n height: 24px;\n border-radius: 16px;\n background-color: var(--sdds-toggle-off-slider);\n left: 0;\n }\n\n /* Switch */\n &::after {\n width: 16px;\n height: 16px;\n background-color: var(--sdds-toggle-switch);\n border-radius: 50%;\n left: 4px;\n top: 4px;\n }\n\n &:focus {\n outline: none;\n\n &::before {\n background-color: var(--sdds-toggle-off-slider-focus);\n border: 1px solid var(--sdds-toggle-off-border-focus);\n }\n }\n\n &:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider);\n border: 1px solid var(--sdds-toggle-on-border-focus);\n }\n\n &::after {\n left: calc(44px - 20px);\n }\n }\n\n &:disabled {\n &::before {\n background-color: var(--sdds-toggle-slider-disabled);\n border: 1px solid var(--sdds-toggle-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n\n &:disabled:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider-disabled);\n border: 1px solid var(--sdds-toggle-on-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n\n &.sm {\n width: 28px;\n height: 16px;\n\n &::before {\n width: 28px;\n height: 16px;\n }\n\n &::after {\n width: 8px;\n height: 8px;\n }\n\n &:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider);\n }\n\n &::after {\n left: calc(44px - 28px); // slider width - switch width - padding\n }\n }\n\n &:disabled {\n &::before {\n background-color: var(--sdds-toggle-slider-disabled);\n border: 1px solid var(--sdds-toggle-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n }\n }\n\n label {\n display: inline-block;\n vertical-align: middle;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n color: var(--sdds-toggle-label-color);\n padding-left: 8px;\n\n &.disabled {\n color: var(--sdds-toggle-label-color-disabled);\n }\n }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toggle',\n styleUrl: 'sdds-toggle.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsToggle {\n /** Sets the toggle as checked */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** Make the toggle required */\n @Prop() required: boolean = false;\n\n /** Size of the toggle */\n @Prop() size: 'sm' | 'lg' = 'lg';\n\n /** Name of the toggles input element */\n @Prop() name: string;\n\n /** Headline for the toggle */\n @Prop() headline: string;\n\n /** Sets the toggle in a disabled state */\n @Prop() disabled: boolean = false;\n\n /** ID of the toggles input element, if not specifed it's randomly generated */\n @Prop() toggleId: string = crypto.randomUUID();\n\n @Element() host: HostElement;\n\n /** Toggles the toggle. */\n @Method()\n async toggle() {\n this.checked = !this.checked;\n return {\n toggleId: this.toggleId,\n checked: this.checked,\n };\n }\n\n /** Sends unique toggle identifier and status when it is toggled. */\n @Event({\n eventName: 'sddsToggle',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsToggle: EventEmitter<{\n toggleId: string;\n checked: boolean;\n }>;\n\n handleToggle = () => {\n this.checked = !this.checked;\n this.sddsToggle.emit({\n toggleId: this.toggleId,\n checked: this.checked,\n });\n };\n\n render() {\n return (\n <div class=\"sdds-toggle-webcomponent\">\n {this.headline && (\n <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n )}\n <input\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n aria-checked={this.checked}\n aria-required={this.required}\n onChange={() => this.handleToggle()}\n class={`${this.size}`}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n id={this.toggleId}\n role=\"switch\"\n />\n <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n <slot name=\"label\"></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-tooltip.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-tooltip.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,24BAA24B;;MCSj5B,OAAO;;;IAyBlB,mBAAc,GAAW,CAAC,CAAC;IAE3B,mBAAc,GAAW,CAAC,CAAC;gBAzBJ,EAAE;oBAGE,EAAE;;4BAMO,KAAK;gBAGA,KAAK;qBAGf,QAAQ;;;;EAcvC,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,cAAc,GAAGA,mBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;MAC5D,SAAS,EAAE,SAAS,CAAC,SAAS;MAC9B,SAAS,EAAE;QACT;UACE,IAAI,EAAE,cAAc;UACpB,OAAO,EAAE,IAAI;UACb,KAAK,EAAE,MAAM;UACb,EAAE,CAAC,EAAE,KAAK,EAAE;YACV,IAAI,KAAK,CAAC,SAAS,KAAK,cAAc,IAAI,KAAK,CAAC,SAAS,KAAK,aAAa,EAAE;cAC3E,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;aAC/B;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,YAAY,IAAI,KAAK,CAAC,SAAS,KAAK,YAAY,EAAE;cAC/E,SAAS,CAAC,MAAM,GAAG,WAAW,CAAC;aAChC;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;cAC1E,SAAS,CAAC,MAAM,GAAG,cAAc,CAAC;aACnC;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW,EAAE;cAC7E,SAAS,CAAC,MAAM,GAAG,aAAa,CAAC;aAClC;iBAAM,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE;cACpE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC;aAC9B;WACF;SACF;QACD;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG;MAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB,CAAC;IAEF,MAAM,WAAW,GAAG;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB,CAAC;;IAGF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE;MACtC,WAAW,EAAE,CAAC;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE;MACvC,WAAW,EAAE,CAAC;KACf,CAAC,CAAC;;IAGH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE;MACzC,WAAW,EAAE,CAAC;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE;MACzC,WAAW,EAAE,CAAC;KACf,CAAC,CAAC;;IAGH,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE;MAClC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE;QAC1C,WAAW,EAAE,CAAC;OACf,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE;QAC1C,WAAW,EAAE,CAAC;OACf,CAAC,CAAC;KACJ;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;;EAGD,MAAM;IACJ,QACEC,kBACE,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,OAAO,GAAG,EAAsB,CAAC;OACvC,EACD,KAAK,EAAE,6BAA6B,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,mBAAmB,GAAG,EAAE,EAAE,IAExF,IAAI,CAAC,IAAI,EACVA,qBAAQ,CACH,EACP;GACH;;;;;;","names":["createPopper","h"],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-tooltip-color);\n background-color: var(--sdds-tooltip-background);\n border-radius: 4px;\n padding: 8px;\n word-wrap: break-word;\n max-width: 192px;\n z-index: z(tooltip);\n opacity: 0;\n visibility: hidden;\n transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n &.sdds-tooltip-top-left {\n border-radius: 0 4px 4px;\n }\n\n &.sdds-tooltip-top-right {\n border-radius: 4px 0 4px 4px;\n }\n\n &.sdds-tooltip-bottom-right {\n border-radius: 4px 4px 0;\n }\n\n &.sdds-tooltip-bottom-left {\n border-radius: 4px 4px 4px 0;\n }\n}\n\n.sdds-tooltip-show {\n opacity: 1;\n visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n @Prop() text: string = '';\n\n /** The CSS-selector for an element that will trigger the tooltip */\n @Prop() selector: string = '';\n\n /** Element that will trigger the tooltip (takes priority over selector) */\n @Prop() referenceEl: HTMLElement;\n\n /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n @Prop() mouseOverTooltip: boolean = false;\n\n /** Prop in control of showing and hiding prop */\n @Prop({ mutable: true }) show: boolean = false;\n\n /** Placement of tooltip. */\n @Prop() placement: Placement = 'bottom';\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n border: string;\n\n offsetSkidding: number = 0;\n\n offsetDistance: number = 8;\n\n tooltip!: HTMLInputElement;\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n const thisValue = this;\n this.popperInstance = createPopper(this.target, this.tooltip, {\n placement: thisValue.placement,\n modifiers: [\n {\n name: 'positionCalc',\n enabled: true,\n phase: 'main',\n fn({ state }) {\n if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n thisValue.border = 'top-left';\n } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n thisValue.border = 'top-right';\n } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n thisValue.border = 'bottom-right';\n } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n thisValue.border = 'bottom-left';\n } else if (state.placement === 'bottom' || state.placement === 'top') {\n thisValue.border = 'default';\n }\n },\n },\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showTooltip = () => {\n this.show = true;\n };\n\n const hideTooltip = () => {\n this.show = false;\n };\n\n // For tabbing over element\n this.target.addEventListener('focusin', () => {\n showTooltip();\n });\n\n this.target.addEventListener('focusout', () => {\n hideTooltip();\n });\n\n // For hovering over element with selector\n this.target.addEventListener('mouseenter', () => {\n showTooltip();\n });\n\n this.target.addEventListener('mouseleave', () => {\n hideTooltip();\n });\n\n // For hovering over tooltip itself:\n if (this.mouseOverTooltip === true) {\n this.tooltip.addEventListener('mouseenter', () => {\n showTooltip();\n });\n\n this.tooltip.addEventListener('mouseleave', () => {\n hideTooltip();\n });\n }\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n /* Slot on line 118 is added to support adding HTML elements to component */\n render() {\n return (\n <span\n ref={(el) => {\n this.tooltip = el as HTMLInputElement;\n }}\n class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n >\n {this.text}\n <slot />\n </span>\n );\n }\n}\n"],"version":3}

package/dist/cjs/tegel.cjs.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/collection/components/accordion/accordion-item/accordion-item.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-item/accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,aAAa;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACtC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC;QAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;UAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO;UACrD,WAAK,KAAK,EAAC,qBAAqB;YAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC;QACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;aAChE;UAED,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion-item',\n styleUrl: 'accordion-item.scss',\n shadow: true,\n})\nexport class AccordionItem {\n /** The header gives users the context about the additional information available inside the panel */\n @Prop() header: string = '';\n\n /** Changes where the expand icon is placed. */\n @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n /** Disabled option in `boolean`. */\n @Prop() disabled: boolean = false;\n\n /** Set to true to expand panel open */\n @Prop() expanded: boolean = false;\n\n /** When true 16px on right padding instead of 64px */\n @Prop() paddingReset: boolean = false;\n\n /** Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n @Event({\n eventName: 'sddsToggle',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggle: EventEmitter<boolean>;\n\n openAccordion() {\n this.expanded = !this.expanded;\n this.sddsToggle.emit(this.expanded);\n }\n\n render() {\n return (\n <Host>\n <div\n class={`sdds-accordion-item\n ${this.disabled ? 'disabled' : ''}\n ${this.expanded ? 'expanded' : ''}\n `}\n >\n <button\n type=\"button\"\n aria-expanded={this.expanded}\n class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n onClick={() => this.openAccordion()}\n disabled={this.disabled}\n >\n <div class=\"sdds-accordion-title\">{this.header}</div>\n <div class=\"sdds-accordion-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </div>\n </button>\n <div\n class={`sdds-accordion-panel\n ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n `}\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/accordion/accordion.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;uBAE2B,IAAI;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAElG,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n /** Set the variant of the the accordion. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n render() {\n return (\n <Host\n class={`sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/accordion/accordion.stories.js DELETED Viewed

@@ -1,100 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-import readmeItem from './accordion-item/readme.md';
-export default {
-  title: 'Components/Accordion',
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    iconPosition: {
-      name: 'Expand icon position',
-      description: 'Sets the horizontal position of the expand icon.',
-      control: {
-        type: 'radio',
-      },
-      options: { End: 'end', Start: 'start' },
-      table: {
-        defaultValue: { summary: 'end' },
-      },
-    },
-    paddingReset: {
-      name: 'Less padding right',
-      description: 'Sets less padding on the right inside accordion items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disable all items',
-      description: 'Disables all accordion items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  parameters: {
-    notes: { 'Accordion': readme, 'Accordion item': readmeItem },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    iconPosition: 'end',
-    paddingReset: false,
-    disabled: false,
-  },
-};
-const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
-  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
-  const disabledAttr = disabled ? 'disabled' : '';
-  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
-  return formatHtmlPreview(`
-    <sdds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <sdds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum doler sit amet.
-      </sdds-accordion-item>
-      <sdds-accordion-item header="Second item" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
-        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
-      </sdds-accordion-item>
-    </sdds-accordion>
-    <!-- Script tag for demo purposes -->
-  <script>
-    accordionItems = document.querySelectorAll('sdds-accordion-item');
-    for (let i = 0; i < accordionItems.length; i++) {
-      accordionItems[i].addEventListener('sddsToggle',() => {
-        console.log(i + 1 + ". item of accordion is toggled")
-      })
-    }
-  </script>`);
-};
-export const Default = Template.bind({});
-Default.args = {};
-//# sourceMappingURL=accordion.stories.js.map

package/dist/collection/components/accordion/accordion.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;MACvC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,oBAAoB;MAC1B,WAAW,EAAE,wDAAwD;MACrE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,2GAA2G;OACjH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,2GAA2G;OACjH;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;EACzE,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;EACjF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAChD,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EAE7D,OAAO,iBAAiB,CAAC;sBAErB,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;iDAC6C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;kDAI5C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;;;;;;;;;;;YAcnF,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './accordion-item/readme.md';\n\nexport default {\n title: 'Components/Accordion',\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n iconPosition: {\n name: 'Expand icon position',\n description: 'Sets the horizontal position of the expand icon.',\n control: {\n type: 'radio',\n },\n options: { End: 'end', Start: 'start' },\n table: {\n defaultValue: { summary: 'end' },\n },\n },\n paddingReset: {\n name: 'Less padding right',\n description: 'Sets less padding on the right inside accordion items.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n disabled: {\n name: 'Disable all items',\n description: 'Disables all accordion items.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n },\n parameters: {\n notes: { 'Accordion': readme, 'Accordion item': readmeItem },\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n },\n ],\n },\n args: {\n modeVariant: 'Inherit from parent',\n iconPosition: 'end',\n paddingReset: false,\n disabled: false,\n },\n};\n\nconst Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {\n const affixAttr = iconPosition === 'start' ? 'expand-icon-position=\"start\"' : '';\n const disabledAttr = disabled ? 'disabled' : '';\n const paddingResetAttr = paddingReset ? 'padding-reset' : '';\n\n return formatHtmlPreview(`\n <sdds-accordion ${\n modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n }>\n <sdds-accordion-item header=\"First item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>\n This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n Lorem ipsum doler sit amet.\n </sdds-accordion-item>\n <sdds-accordion-item header=\"Second item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>\n This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.\n </sdds-accordion-item>\n </sdds-accordion>\n\n \n <script>\n accordionItems = document.querySelectorAll('sdds-accordion-item');\n for (let i = 0; i < accordionItems.length; i++) {\n accordionItems[i].addEventListener('sddsToggle',() => {\n console.log(i + 1 + \". item of accordion is toggled\")\n })\n }\n </script>`);\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}