npm - @scania/tegel - Versions diffs - 0.0.32 → 0.0.34 - Mend

@scania/tegel 0.0.32 → 0.0.34

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

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

	@@ -1 +1 @@
1	- {"file":"sdds-table-footer.js","mappings":";;AAAA,MAAM,cAAc,GAAG,01FAA01F;;ACaj3F,MAAM,kBAAkB,GAAsC;EAC5D,eAAe;EACf,YAAY;EACZ,kBAAkB;CACnB,CAAC;AAEF,SAAS,oBAAoB,CAAC,CAA2C;EACvE,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,wCAAwC,CAAC,CAAC;AACtE,CAAC;MAOY,WAAW;;;;;;;IAiGtB,mBAAc,GAAG,CAAC,KAAK;MACrB,KAAK,CAAC,cAAc,EAAE,CAAC;;MAEvB,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,EAAE;QAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;OACtB;KACF,CAAC;IAEF,mBAAc,GAAG,CAAC,KAAK;MACrB,KAAK,CAAC,cAAc,EAAE,CAAC;;MAEvB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,EAAE;QAC9C,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;OACtB;KACF,CAAC;IAqBF,kBAAa,GAAG;MACd,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE;;QAEnC,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU;WAC5C,aAAa,CAAC,iBAAiB,CAAC;WAChC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAExC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;;UAEjC,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;UAEpB,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;WAC1B;eAAM;YACL,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC;YAC3D,MAAM,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;YAElD,IAAI,KAAK,GAAG,WAAW,IAAI,KAAK,IAAI,UAAU,EAAE;cAC9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC;aAClD;iBAAM;cACL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;aAC/C;WACF;SACF,CAAC,CAAC;OACJ;KACF,CAAC;IAiBF,yBAAoB,GAAG,CAAC,KAAK;MAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;;MAEvB,IAAI,IAAI,CAAC,qBAAqB,IAAI,CAAC,EAAE;QACnC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;OACtD;KACF,CAAC;IAEF,yBAAoB,GAAG,CAAC,KAAK;MAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;;MAEvB,IAAI,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,cAAc,EAAE;QACrD,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;OACtD;KACF,CAAC;4BA9LmD,KAAK;uBAGX,CAAC;kCAGW,KAAK;iCAGP,CAAC;0BAGR,CAAC;kCAGV,IAAI;qCAGA,KAAK;yBAGjB,CAAC;yBAGD,CAAC;2BAGC,CAAC;iCAGM,KAAK;4BAEV,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAgB7B,8BAA8B,CAAC,KAA0C;IACvE,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;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC;IAEhG,MAAM,eAAe,GACnB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,CAAC;IAE/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,EAAE;MACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC;KAClD;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,eAAe,CAAC;KACtC;IAED,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GAC/C;EAoBD,qBAAqB,CAAC,KAAK;IACzB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IAEzC,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,aAAa,GAAG,CAAC,EAAE;MAC3D,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,wCAAwC,CAAC,CAAC;MACrE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;KACzC;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KAC3C;IACD,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAGD,0BAA0B,CAAC,KAAuB;IAChD,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;GACF;EAwCD,mBAAmB,CAAC,KAAK;IACvB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;GACxD;EAoBD,2BAA2B,CAAC,KAAK;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IAEzC,IAAI,aAAa,GAAG,IAAI,CAAC,cAAc,IAAI,aAAa,GAAG,CAAC,EAAE;MAC5D,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,wCAAwC,CAAC,CAAC;MACrE,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;KAC/C;SAAM;MACL,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjD;IACD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACtD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1D,UAAI,KAAK,EAAC,wBAAwB,IAChC,UAAI,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC5D,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,sBAAsB,KACpD,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,KAAK,EAAC,0BAA0B,GAAO,EAC5C,WAAK,KAAK,EAAC,2BAA2B,IACpC,aACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAC,KAAK,EACT,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EACtD,UAAU,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EACxD,cAAc,EAAE,oBAAoB,EACpC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,GACpC,EACF,SAAG,KAAK,EAAC,yBAAyB,WAC7B,gBAAO,IAAI,CAAC,qBAAqB,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAQ,WACnE,EACJ,cACE,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,IAAI,CAAC,qBAAqB,EACjE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAE9C,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,IAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,oKAAoK,GACtK,CACE,CACC,EACT,cACE,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EACN,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAE1E,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAE9C,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,IAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,mKAAmK,GACrK,CACE,CACC,CACL,CACF,CACP,EACA,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,gBAAgB,KACpD,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,KAAK,EAAC,0BAA0B,GAAO,EAC5C,WAAK,KAAK,EAAC,2BAA2B,IACpC,aACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,KAAK,EAAE,IAAI,CAAC,qBAAqB,EACjC,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAC,KAAK,EACT,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,EAC5D,UAAU,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,EAC9D,cAAc,EAAE,oBAAoB,GACpC,EACF,SAAG,KAAK,EAAC,yBAAyB,WAC7B,gBAAO,IAAI,CAAC,cAAc,CAAQ,WACnC,EACJ,cACE,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAE,IAAI,CAAC,qBAAqB,IAAI,CAAC,EACzC,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,IAEpD,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,IAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,oKAAoK,GACtK,CACE,CACC,EACT,cACE,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAE,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,cAAc,EAC3D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,IAEpD,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,IAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,mKAAmK,GACrK,CACE,CACC,CACL,CACF,CACP,CACE,CACF,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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 { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['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 /* Event that footer sends out in order to receive other necessary information from other subcomponents /\n @Event({\n eventName: 'enablePaginationEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n enablePaginationEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n 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.enablePaginationEvent.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('runPaginationEvent', { target: 'body' })\n runPaginationEventListener(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 */\n @Event({\n eventName: 'currentPageValueEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n currentPageValueEvent: EventEmitter<any>;\n\n sendPaginationValue(value) {\n this.currentPageValueEvent.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}
1	+ {"file":"sdds-table-footer.js","mappings":"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","names":[],"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 { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['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 /* Event that footer sends out in order to receive other necessary information from other subcomponents /\n @Event({\n eventName: 'enablePaginationEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n enablePaginationEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n 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.enablePaginationEvent.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('runPaginationEvent', { target: 'body' })\n runPaginationEventListener(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 */\n @Event({\n eventName: 'currentPageValueEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n currentPageValueEvent: EventEmitter<any>;\n\n sendPaginationValue(value) {\n this.currentPageValueEvent.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/components/sdds-table-header.js CHANGED Viewed

@@ -117,7 +117,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsTableHeader = TableHeaderRow;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"sdds-table-header.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason /\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-header-group;\n\n .sdds-table__header-cell--checkbox {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-divider);\n height: 48px;\n box-sizing: border-box;\n\n // To fix issues with border-radius propagating up from button\n overflow: hidden;\n transition: background-color 200ms ease;\n min-width: unset;\n width: 48px;\n padding: 0;\n border-top-left-radius: 4px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n cursor: pointer;\n\n .sdds-table__expand-input {\n display: none;\n }\n\n .sdds-expandable-row-icon {\n height: 20px;\n width: 20px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n\n .sdds-expandable-row-icon--opened {\n transform: rotate(180deg);\n }\n }\n\n ::slotted(sdds-header-cell:hover) {\n background-color: var(--sdds-data-table-header-background-hover);\n }\n}\n\n:host(.sdds-table--compact) {\n .sdds-table__header-cell--checkbox {\n height: 32px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__header-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n\n:host(.sdds-table--toolbar-available) {\n .sdds-table__header-cell--checkbox {\n border-top-left-radius: 0;\n }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'mainCheckboxSelectedEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n mainCheckboxSelectedEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('updateMainCheckboxEvent', { target: 'body' })\n updateMainCheckboxEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('singleRowExpandedEvent', { target: 'body' })\n singleRowExpandedEventListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-table-header.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason /\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-header-group;\n\n .sdds-table__header-cell--checkbox {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-divider);\n height: 48px;\n box-sizing: border-box;\n\n // To fix issues with border-radius propagating up from button\n overflow: hidden;\n transition: background-color 200ms ease;\n min-width: unset;\n width: 48px;\n padding: 0;\n border-top-left-radius: 4px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n cursor: pointer;\n\n .sdds-table__expand-input {\n display: none;\n }\n\n .sdds-expandable-row-icon {\n height: 20px;\n width: 20px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n\n .sdds-expandable-row-icon--opened {\n transform: rotate(180deg);\n }\n }\n\n ::slotted(sdds-header-cell:hover) {\n background-color: var(--sdds-data-table-header-background-hover);\n }\n}\n\n:host(.sdds-table--compact) {\n .sdds-table__header-cell--checkbox {\n height: 32px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__header-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n\n:host(.sdds-table--toolbar-available) {\n .sdds-table__header-cell--checkbox {\n border-top-left-radius: 0;\n }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'mainCheckboxSelectedEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n mainCheckboxSelectedEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('updateMainCheckboxEvent', { target: 'body' })\n updateMainCheckboxEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('singleRowExpandedEvent', { target: 'body' })\n singleRowExpandedEventListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -80,7 +80,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsTableToolbar = TableToolbar;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"sdds-table-toolbar.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4nEAA4nE;;ACappE,MAAM,kBAAkB,GAAsC;EAC5D,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,KAA0C;IACvE,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,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACzB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;KACnE;SAAM;MACL,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;KACtE;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1D,WAAK,KAAK,EAAC,4BAA4B,IACrC,eAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9D,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,uBAAuB,IAChC,aACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACF,YAAM,KAAK,EAAC,4BAA4B,IACtC,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrE,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACD,YAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-caption;\n position: relative;\n background-color: var(--sdds-data-table-toolbar-background);\n color: var(--sdds-data-table-color);\n padding: 0 var(--sdds-spacing-element-16);\n height: 64px;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n\n .sdds-table__upper-bar-flex {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n .sdds-table__title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding-top: var(--sdds-spacing-element-16);\n text-align: left;\n }\n\n .sdds-table__actionbar {\n display: flex;\n align-self: center;\n gap: 8px;\n }\n\n .sdds-table__searchbar {\n display: flex;\n align-self: center;\n position: relative;\n height: 40px;\n width: 40px;\n border-radius: 4px 4px 0 0;\n transition: background-color 250ms ease, width 250ms ease;\n overflow: hidden;\n background-color: transparent;\n\n &::after {\n content: '';\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: 0;\n background-color: var(--sdds-blue-400);\n transform: scaleX(0);\n transition: transform 150ms ease;\n }\n\n &:focus-within {\n &::after {\n transform: scaleX(100%);\n }\n }\n\n &:focus-within,\n &.sdds-table__searchbar--active {\n width: 208px;\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n .sdds-table__searchbar-input {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-data-table-color);\n z-index: 1;\n width: 100%;\n height: 100%;\n border: none;\n padding: 0 36px 0 16px;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n\n :focus {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n }\n\n .sdds-table__searchbar-icon {\n z-index: 0;\n position: absolute;\n right: 9px;\n top: 9px;\n width: 20px;\n height: 20px;\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 56px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['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 */\n @Event({\n eventName: 'tableFilteringTerm',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n tableFilteringTerm: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n 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.tableFilteringTerm.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-table-toolbar.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4nEAA4nE;;ACappE,MAAM,kBAAkB,GAAsC;EAC5D,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,KAA0C;IACvE,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,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACzB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;KACnE;SAAM;MACL,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;KACtE;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1D,WAAK,KAAK,EAAC,4BAA4B,IACrC,eAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9D,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,uBAAuB,IAChC,aACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACF,YAAM,KAAK,EAAC,4BAA4B,IACtC,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrE,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACD,YAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-caption;\n position: relative;\n background-color: var(--sdds-data-table-toolbar-background);\n color: var(--sdds-data-table-color);\n padding: 0 var(--sdds-spacing-element-16);\n height: 64px;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n\n .sdds-table__upper-bar-flex {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n .sdds-table__title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding-top: var(--sdds-spacing-element-16);\n text-align: left;\n }\n\n .sdds-table__actionbar {\n display: flex;\n align-self: center;\n gap: 8px;\n }\n\n .sdds-table__searchbar {\n display: flex;\n align-self: center;\n position: relative;\n height: 40px;\n width: 40px;\n border-radius: 4px 4px 0 0;\n transition: background-color 250ms ease, width 250ms ease;\n overflow: hidden;\n background-color: transparent;\n\n &::after {\n content: '';\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: 0;\n background-color: var(--sdds-blue-400);\n transform: scaleX(0);\n transition: transform 150ms ease;\n }\n\n &:focus-within {\n &::after {\n transform: scaleX(100%);\n }\n }\n\n &:focus-within,\n &.sdds-table__searchbar--active {\n width: 208px;\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n .sdds-table__searchbar-input {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-data-table-color);\n z-index: 1;\n width: 100%;\n height: 100%;\n border: none;\n padding: 0 36px 0 16px;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n\n :focus {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n }\n\n .sdds-table__searchbar-icon {\n z-index: 0;\n position: absolute;\n right: 9px;\n top: 9px;\n width: 20px;\n height: 20px;\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 56px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['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 */\n @Event({\n eventName: 'tableFilteringTerm',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n tableFilteringTerm: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n 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.tableFilteringTerm.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -84,7 +84,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsTable = Table;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"sdds-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MCyBnM,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,sBAAsB,CAAC,IAAI,CAAC;MAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,GAAG,YAAY;KACjC,CAAC,CAAC;GACJ;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;GAChE;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;GACnE;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GAC5D;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;GACzD;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9D,aACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;OAChD,IAED,eAAQ,CACF,CACH,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n border-collapse: collapse;\n display: table;\n @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n verticalDividers: boolean;\n compactDesign: boolean;\n noMinWidth: boolean;\n enableMultiselect: boolean;\n enableExpandableRows: boolean;\n enableResponsive: boolean;\n modeVariant: 'primary' \| 'secondary' \| null;\n};\n\nexport type TablePropsChangedEvent = {\n tableId: string;\n changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n tag: 'sdds-table',\n styleUrl: 'table.scss',\n shadow: true,\n})\nexport class Table {\n /** Enables style with vertical dividers between columns /\n @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n /* Enables style where data-table toolbar, rows and footer are less high /\n @Prop({ reflect: true }) compactDesign: boolean = false;\n\n /* Enables to customise width on data-table columns /\n @Prop({ reflect: true }) noMinWidth: boolean;\n // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n /* Enables multiselect feature of data-table /\n @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n /* Enables extended row feature of data-table /\n @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n /* Enables table to take 100% available width with equal spacing of columns /\n @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n /* Variant of the component, based on current mode. /\n @Prop({ reflect: true }) modeVariant: 'primary' \| 'secondary' = null;\n\n /* ID used for internal table functionality and events, must be unique.\n \n NOTE: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n /\n @Prop() tableId: string = crypto.randomUUID();\n\n @Element() host: HTMLElement;\n\n /* Broadcasts changes to the tables props */\n @Event({\n eventName: 'tablePropsChangedEvent',\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n this.tablePropsChangedEvent.emit({\n tableId: this.tableId,\n changed: [changedValueName],\n [changedValueName]: changedValue,\n });\n }\n\n @Watch('enableMultiselect')\n enableMultiselectChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n }\n\n @Watch('enableExpandableRows')\n enableExpandableRowsChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n }\n\n @Watch('compactDesign')\n compactDesignChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('compactDesign', newValue);\n }\n\n @Watch('verticalDividers')\n verticalDividersChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('verticalDividers', newValue);\n }\n\n @Watch('noMinWidth')\n noMinWidthChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('noMinWidth', newValue);\n }\n\n @Watch('modeVariant')\n modeVariantChanged(newValue: 'primary' \| 'secondary' \| null) {\n this.emitTablePropsChangedEvent('modeVariant', newValue);\n }\n\n render() {\n return (\n <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n <table\n class={{\n 'sdds-table': true,\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--responsive': this.enableResponsive,\n }}\n >\n <slot />\n </table>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+LAA+L;;MCyBnM,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,sBAAsB,CAAC,IAAI,CAAC;MAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,GAAG,YAAY;KACjC,CAAC,CAAC;GACJ;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;GAChE;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;GACnE;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GAC5D;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;GACzD;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAC9D,aACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;OAChD,IAED,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n border-collapse: collapse;\n display: table;\n @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n verticalDividers: boolean;\n compactDesign: boolean;\n noMinWidth: boolean;\n enableMultiselect: boolean;\n enableExpandableRows: boolean;\n enableResponsive: boolean;\n modeVariant: 'primary' \| 'secondary' \| null;\n};\n\nexport type TablePropsChangedEvent = {\n tableId: string;\n changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n tag: 'sdds-table',\n styleUrl: 'table.scss',\n shadow: true,\n})\nexport class Table {\n /** Enables style with vertical dividers between columns /\n @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n /* Enables style where data-table toolbar, rows and footer are less high /\n @Prop({ reflect: true }) compactDesign: boolean = false;\n\n /* Enables to customise width on data-table columns /\n @Prop({ reflect: true }) noMinWidth: boolean;\n // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n /* Enables multiselect feature of data-table /\n @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n /* Enables extended row feature of data-table /\n @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n /* Enables table to take 100% available width with equal spacing of columns /\n @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n /* Variant of the component, based on current mode. /\n @Prop({ reflect: true }) modeVariant: 'primary' \| 'secondary' = null;\n\n /* ID used for internal table functionality and events, must be unique.\n \n NOTE: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n /\n @Prop() tableId: string = crypto.randomUUID();\n\n @Element() host: HTMLElement;\n\n /* Broadcasts changes to the tables props */\n @Event({\n eventName: 'tablePropsChangedEvent',\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n this.tablePropsChangedEvent.emit({\n tableId: this.tableId,\n changed: [changedValueName],\n [changedValueName]: changedValue,\n });\n }\n\n @Watch('enableMultiselect')\n enableMultiselectChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n }\n\n @Watch('enableExpandableRows')\n enableExpandableRowsChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n }\n\n @Watch('compactDesign')\n compactDesignChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('compactDesign', newValue);\n }\n\n @Watch('verticalDividers')\n verticalDividersChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('verticalDividers', newValue);\n }\n\n @Watch('noMinWidth')\n noMinWidthChanged(newValue: boolean) {\n this.emitTablePropsChangedEvent('noMinWidth', newValue);\n }\n\n @Watch('modeVariant')\n modeVariantChanged(newValue: 'primary' \| 'secondary' \| null) {\n this.emitTablePropsChangedEvent('modeVariant', newValue);\n }\n\n render() {\n return (\n <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n <table\n class={{\n 'sdds-table': true,\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--responsive': this.enableResponsive,\n }}\n >\n <slot />\n </table>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -102,7 +102,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsTextarea = Textarea;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"sdds-textarea.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ulSAAulS;;MCO9lS,QAAQ;;;;;;;;iBAKK,EAAE;gBAGH,EAAE;;;;yBAYkC,UAAU;uBAGvC,EAAE;iBAGR,EAAE;oBAGE,KAAK;oBAGL,KAAK;iBAGgB,SAAS;;uBAMX,IAAI;qBAGtB,KAAK;;;EAclC,YAAY,CAAC,KAAK;IAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC7B;EAWD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;GACzB;;EAYD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;GACjC;;EAYD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;EAED,MAAM;;IACJ,QACE,WACE,KAAK,EAAE;;UAEL,IAAI,CAAC,aAAa,KAAK,QAAQ,GAAG,4BAA4B,GAAG,EAAE;UACnE,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE;UAC5C,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,EAAE;UAC7C,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,EAAE;UAC7C,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;UACxE,IAAI,CAAC,KAAK,GAAG,oBAAoB,GAAG,EAAE;UACtC,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,iBAAiB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;SACxF,IAEA,IAAI,CAAC,aAAa,KAAK,UAAU,KAChC,YAAM,KAAK,EAAE,qBAAqB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACxD,EACD,WAAK,KAAK,EAAC,uBAAuB,IAChC,gBACE,KAAK,EAAE,qBAAqB,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAA8B,CAAC,EAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAClB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACzB;OACF,EACD,MAAM,EAAE,CAAC,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAClB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;SACxB;OACF,EACD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GACnC,EACZ,YAAM,KAAK,EAAC,4BAA4B,IACtC,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElC,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,4uBAA4uB,EAC9uB,IAAI,EAAC,cAAc,GACnB,CACE,CACD,EACP,YAAM,KAAK,EAAC,8BAA8B,IACxC,iBAAW,IAAI,EAAC,eAAe,GAAa,CACvC,EACP,YAAM,KAAK,EAAC,oCAAoC,iCAAkC,CAC9E,EACN,YAAM,KAAK,EAAE,sBAAsB,IAChC,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,EAC1E,IAAI,CAAC,MAAM,CACP,EAEN,IAAI,CAAC,SAAS,GAAG,CAAC,KACjB,WAAK,KAAK,EAAE,2BAA2B,IACpC,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,CAAC,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAC7C,YAAM,KAAK,EAAC,oCAAoC,UAAW,OAAE,IAAI,CAAC,SAAS,CACvE,CACP,CACG,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea","./src/components/textarea/textarea.tsx"],"sourcesContent":["@import './textarea-theme-vars.scss';\n\n@mixin textfield-base {\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-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 ~ .sdds-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.sdds-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\n.sdds-textarea-container {\n .sdds-textarea-wrapper {\n position: relative;\n width: unset;\n min-width: 100%;\n }\n}\n\n.sdds-textarea-container:not(.sdds-textarea-disabled) {\n .sdds-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.sdds-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.sdds-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.sdds-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.sdds-textarea-container {\n &.sdds-textarea-label-inside {\n .sdds-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 .sdds-textarea-input {\n @include placeholder-label;\n }\n }\n\n &.sdds-textarea-focus {\n &.sdds-textarea-label-inside {\n .sdds-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 .sdds-textarea-wrapper {\n &::before,\n &::after {\n width: 50%;\n }\n }\n }\n\n &.sdds-textarea-data {\n &.sdds-textarea-label-inside {\n .sdds-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.sdds-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 & .sdds-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.sdds-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 ~ .sdds-textarea-textcounter {\n flex-basis: auto;\n }\n}\n\n// Different state\n\n.sdds-textarea-success {\n .sdds-textarea-input {\n border-bottom-color: var(--sdds-textarea-border-bottom-success);\n }\n}\n\n.sdds-textarea-error {\n .sdds-textarea-input {\n border-bottom-color: var(--sdds-textarea-border-bottom-error);\n }\n\n .sdds-textarea-wrapper {\n &::after,\n &::before {\n background: var(--sdds-textarea-bar-error);\n }\n }\n\n .sdds-textarea-helper {\n color: var(--sdds-textarea-helper-error);\n }\n}\n\n//Disabled state\n.sdds-textarea-disabled {\n .sdds-textarea-input {\n border-bottom-color: transparent;\n }\n\n .sdds-textarea-label {\n color: var(--sdds-textarea-disabled-label);\n }\n}\n\n//Read only state\n\n.sdds-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.sdds-textarea-readonly {\n pointer-events: none;\n\n .sdds-textarea-icon__readonly {\n display: block;\n\n &:hover {\n ~ .sdds-textarea-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .sdds-textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n\n .sdds-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})\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 /* 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 sdds-textarea-container\n ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}\n ${this.focusInput ? 'sdds-textarea-focus' : ''}\n ${this.disabled ? 'sdds-textarea-disabled' : ''}\n ${this.readOnly ? 'sdds-textarea-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.value ? 'sdds-textarea-data' : ''}\n ${this.state === 'error' \|\| this.state === 'success' ? `sdds-textarea-${this.state}` : ''}\n `}\n >\n {this.labelPosition !== 'no-label' && (\n <span class={'sdds-textarea-label'}>{this.label}</span>\n )}\n <div class=\"sdds-textarea-wrapper\">\n <textarea\n class={'sdds-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=\"sdds-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=\"sdds-textarea-icon__readonly\">\n <sdds-icon name=\"edit_inactive\"></sdds-icon>\n </span>\n <span class=\"sdds-textarea-icon__readonly-label\">This field is non-editable</span>\n </div>\n <span class={'sdds-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={'sdds-textarea-textcounter'}>\n {this.value === null ? 0 : this.value?.length}\n <span class=\"sdds-textfield-textcounter-divider\"> / </span> {this.maxLength}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-textarea.js","mappings":"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","names":[],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea","./src/components/textarea/textarea.tsx"],"sourcesContent":["@import './textarea-theme-vars.scss';\n\n@mixin textfield-base {\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-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 ~ .sdds-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.sdds-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\n.sdds-textarea-container {\n .sdds-textarea-wrapper {\n position: relative;\n width: unset;\n min-width: 100%;\n }\n}\n\n.sdds-textarea-container:not(.sdds-textarea-disabled) {\n .sdds-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.sdds-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.sdds-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.sdds-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.sdds-textarea-container {\n &.sdds-textarea-label-inside {\n .sdds-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 .sdds-textarea-input {\n @include placeholder-label;\n }\n }\n\n &.sdds-textarea-focus {\n &.sdds-textarea-label-inside {\n .sdds-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 .sdds-textarea-wrapper {\n &::before,\n &::after {\n width: 50%;\n }\n }\n }\n\n &.sdds-textarea-data {\n &.sdds-textarea-label-inside {\n .sdds-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.sdds-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 & .sdds-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.sdds-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 ~ .sdds-textarea-textcounter {\n flex-basis: auto;\n }\n}\n\n// Different state\n\n.sdds-textarea-success {\n .sdds-textarea-input {\n border-bottom-color: var(--sdds-textarea-border-bottom-success);\n }\n}\n\n.sdds-textarea-error {\n .sdds-textarea-input {\n border-bottom-color: var(--sdds-textarea-border-bottom-error);\n }\n\n .sdds-textarea-wrapper {\n &::after,\n &::before {\n background: var(--sdds-textarea-bar-error);\n }\n }\n\n .sdds-textarea-helper {\n color: var(--sdds-textarea-helper-error);\n }\n}\n\n//Disabled state\n.sdds-textarea-disabled {\n .sdds-textarea-input {\n border-bottom-color: transparent;\n }\n\n .sdds-textarea-label {\n color: var(--sdds-textarea-disabled-label);\n }\n}\n\n//Read only state\n\n.sdds-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.sdds-textarea-readonly {\n pointer-events: none;\n\n .sdds-textarea-icon__readonly {\n display: block;\n\n &:hover {\n ~ .sdds-textarea-icon__readonly-label {\n display: block;\n }\n }\n }\n\n .sdds-textfield-input {\n padding-right: 54px;\n background-color: transparent;\n }\n\n .sdds-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})\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 /* 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 sdds-textarea-container\n ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}\n ${this.focusInput ? 'sdds-textarea-focus' : ''}\n ${this.disabled ? 'sdds-textarea-disabled' : ''}\n ${this.readOnly ? 'sdds-textarea-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.value ? 'sdds-textarea-data' : ''}\n ${this.state === 'error' \|\| this.state === 'success' ? `sdds-textarea-${this.state}` : ''}\n `}\n >\n {this.labelPosition !== 'no-label' && (\n <span class={'sdds-textarea-label'}>{this.label}</span>\n )}\n <div class=\"sdds-textarea-wrapper\">\n <textarea\n class={'sdds-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=\"sdds-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=\"sdds-textarea-icon__readonly\">\n <sdds-icon name=\"edit_inactive\"></sdds-icon>\n </span>\n <span class=\"sdds-textarea-icon__readonly-label\">This field is non-editable</span>\n </div>\n <span class={'sdds-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={'sdds-textarea-textcounter'}>\n {this.value === null ? 0 : this.value?.length}\n <span class=\"sdds-textfield-textcounter-divider\"> / </span> {this.maxLength}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -120,7 +120,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsTextfield = Textfield;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -110,7 +110,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsToast = SddsToast$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -62,7 +62,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsToggle = SddsToggle$1;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"sdds-toggle.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCQlnHA,YAAU;;;;;mBAEuB,KAAK;oBAGrB,KAAK;;;gBASL,IAAI;;;;oBAYJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAI9C,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;EAcD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACD,gCACmB,IAAI,CAAC,cAAc,sBAClB,IAAI,CAAC,eAAe,EACtC,QAAQ,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;UAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;OACJ,EACD,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,EACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxE,eAAa,CACP,CACJ,EACN;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsToggle"],"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, EventEmitter, Method } from '@stencil/core';\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 /* Aria-labelledby for the toggles input element. /\n @Prop() ariaLabelledby: string;\n\n /* Aria-describedby for the toggles input element. /\n @Prop() ariaDescribedby: string;\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 /* Label for the toggle /\n @Prop() label: 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 /* 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: 'sddsToggleChangeEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggleChangeEvent: EventEmitter<{\n toggleId: string;\n checked: boolean;\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-labelledby={this.ariaLabelledby}\n aria-describedby={this.ariaDescribedby}\n onChange={() => {\n this.checked = !this.checked;\n this.sddsToggleChangeEvent.emit({\n toggleId: this.toggleId,\n checked: this.checked,\n });\n }}\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></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-toggle.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCQlnHA,YAAU;;;;;mBAEuB,KAAK;oBAGrB,KAAK;;;gBASL,IAAI;;;;oBAYJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAI9C,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;EAcD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACD,gCACmB,IAAI,CAAC,cAAc,sBAClB,IAAI,CAAC,eAAe,EACtC,QAAQ,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;UAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;OACJ,EACD,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,EACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxE,eAAa,CACP,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsToggle"],"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, EventEmitter, Method } from '@stencil/core';\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 /* Aria-labelledby for the toggles input element. /\n @Prop() ariaLabelledby: string;\n\n /* Aria-describedby for the toggles input element. /\n @Prop() ariaDescribedby: string;\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 /* Label for the toggle /\n @Prop() label: 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 /* 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: 'sddsToggleChangeEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggleChangeEvent: EventEmitter<{\n toggleId: string;\n checked: boolean;\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-labelledby={this.ariaLabelledby}\n aria-describedby={this.ariaDescribedby}\n onChange={() => {\n this.checked = !this.checked;\n this.sddsToggleChangeEvent.emit({\n toggleId: this.toggleId,\n checked: this.checked,\n });\n }}\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></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -120,7 +120,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsTooltip = Tooltip;
 const defineCustomElement = defineCustomElement$1;