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

@scania/tegel 0.0.33 → 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 (259) hide show

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

	@@ -1 +1 @@
1	- {"file":"sdds-tooltip.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-tooltip-color);\n background-color: var(--sdds-tooltip-background);\n border-radius: 4px;\n padding: 8px;\n word-wrap: break-word;\n max-width: 192px;\n z-index: z(tooltip);\n opacity: 0;\n visibility: hidden;\n transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n &.sdds-tooltip-top-left {\n border-radius: 0 4px 4px;\n }\n\n &.sdds-tooltip-top-right {\n border-radius: 4px 0 4px 4px;\n }\n\n &.sdds-tooltip-bottom-right {\n border-radius: 4px 4px 0;\n }\n\n &.sdds-tooltip-bottom-left {\n border-radius: 4px 4px 4px 0;\n }\n}\n\n.sdds-tooltip-show {\n opacity: 1;\n visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n /** In case tooltip contains only text, no HTML, text can be passed by this prop /\n @Prop() text: string = '';\n\n /* The CSS-selector for an element that will trigger the tooltip /\n @Prop() selector: string = '';\n\n /* Element that will trigger the tooltip (takes priority over selector) /\n @Prop() referenceEl: HTMLElement;\n\n /* Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. /\n @Prop() mouseOverTooltip: boolean = false;\n\n /* Prop in control of showing and hiding prop /\n @Prop({ mutable: true }) show: boolean = false;\n\n /* Placement of tooltip. /\n @Prop() placement: Placement = 'bottom';\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n border: string;\n\n offsetSkidding: number = 0;\n\n offsetDistance: number = 8;\n\n tooltip!: HTMLInputElement;\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n const thisValue = this;\n this.popperInstance = createPopper(this.target, this.tooltip, {\n placement: thisValue.placement,\n modifiers: [\n {\n name: 'positionCalc',\n enabled: true,\n phase: 'main',\n fn({ state }) {\n if (state.placement === 'bottom-start' \|\| state.placement === 'right-start') {\n thisValue.border = 'top-left';\n } else if (state.placement === 'bottom-end' \|\| state.placement === 'left-start') {\n thisValue.border = 'top-right';\n } else if (state.placement === 'top-end' \|\| state.placement === 'left-end') {\n thisValue.border = 'bottom-right';\n } else if (state.placement === 'top-start' \|\| state.placement === 'right-end') {\n thisValue.border = 'bottom-left';\n } else if (state.placement === 'bottom' \|\| state.placement === 'top') {\n thisValue.border = 'default';\n }\n },\n },\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showTooltip = () => {\n this.show = true;\n };\n\n const hideTooltip = () => {\n this.show = false;\n };\n\n // For tabbing over element\n this.target.addEventListener('focusin', () => {\n showTooltip();\n });\n\n this.target.addEventListener('focusout', () => {\n hideTooltip();\n });\n\n // For hovering over element with selector\n this.target.addEventListener('mouseenter', () => {\n showTooltip();\n });\n\n this.target.addEventListener('mouseleave', () => {\n hideTooltip();\n });\n\n // For hovering over tooltip itself:\n if (this.mouseOverTooltip === true) {\n this.tooltip.addEventListener('mouseenter', () => {\n showTooltip();\n });\n\n this.tooltip.addEventListener('mouseleave', () => {\n hideTooltip();\n });\n }\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n / Slot on line 118 is added to support adding HTML elements to component */\n render() {\n return (\n <span\n ref={(el) => {\n this.tooltip = el as HTMLInputElement;\n }}\n class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n >\n {this.text}\n <slot />\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-tooltip.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-tooltip-color);\n background-color: var(--sdds-tooltip-background);\n border-radius: 4px;\n padding: 8px;\n word-wrap: break-word;\n max-width: 192px;\n z-index: z(tooltip);\n opacity: 0;\n visibility: hidden;\n transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n &.sdds-tooltip-top-left {\n border-radius: 0 4px 4px;\n }\n\n &.sdds-tooltip-top-right {\n border-radius: 4px 0 4px 4px;\n }\n\n &.sdds-tooltip-bottom-right {\n border-radius: 4px 4px 0;\n }\n\n &.sdds-tooltip-bottom-left {\n border-radius: 4px 4px 4px 0;\n }\n}\n\n.sdds-tooltip-show {\n opacity: 1;\n visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n /** In case tooltip contains only text, no HTML, text can be passed by this prop /\n @Prop() text: string = '';\n\n /* The CSS-selector for an element that will trigger the tooltip /\n @Prop() selector: string = '';\n\n /* Element that will trigger the tooltip (takes priority over selector) /\n @Prop() referenceEl: HTMLElement;\n\n /* Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. /\n @Prop() mouseOverTooltip: boolean = false;\n\n /* Prop in control of showing and hiding prop /\n @Prop({ mutable: true }) show: boolean = false;\n\n /* Placement of tooltip. /\n @Prop() placement: Placement = 'bottom';\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n border: string;\n\n offsetSkidding: number = 0;\n\n offsetDistance: number = 8;\n\n tooltip!: HTMLInputElement;\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n const thisValue = this;\n this.popperInstance = createPopper(this.target, this.tooltip, {\n placement: thisValue.placement,\n modifiers: [\n {\n name: 'positionCalc',\n enabled: true,\n phase: 'main',\n fn({ state }) {\n if (state.placement === 'bottom-start' \|\| state.placement === 'right-start') {\n thisValue.border = 'top-left';\n } else if (state.placement === 'bottom-end' \|\| state.placement === 'left-start') {\n thisValue.border = 'top-right';\n } else if (state.placement === 'top-end' \|\| state.placement === 'left-end') {\n thisValue.border = 'bottom-right';\n } else if (state.placement === 'top-start' \|\| state.placement === 'right-end') {\n thisValue.border = 'bottom-left';\n } else if (state.placement === 'bottom' \|\| state.placement === 'top') {\n thisValue.border = 'default';\n }\n },\n },\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showTooltip = () => {\n this.show = true;\n };\n\n const hideTooltip = () => {\n this.show = false;\n };\n\n // For tabbing over element\n this.target.addEventListener('focusin', () => {\n showTooltip();\n });\n\n this.target.addEventListener('focusout', () => {\n hideTooltip();\n });\n\n // For hovering over element with selector\n this.target.addEventListener('mouseenter', () => {\n showTooltip();\n });\n\n this.target.addEventListener('mouseleave', () => {\n hideTooltip();\n });\n\n // For hovering over tooltip itself:\n if (this.mouseOverTooltip === true) {\n this.tooltip.addEventListener('mouseenter', () => {\n showTooltip();\n });\n\n this.tooltip.addEventListener('mouseleave', () => {\n hideTooltip();\n });\n }\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n / Slot on line 118 is added to support adding HTML elements to component */\n render() {\n return (\n <span\n ref={(el) => {\n this.tooltip = el as HTMLInputElement;\n }}\n class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n >\n {this.text}\n <slot />\n </span>\n );\n }\n}\n"],"version":3}

package/dist/components/table-body-cell.js CHANGED Viewed

@@ -97,7 +97,6 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 export { TableBodyCell as T, defineCustomElement as d };

package/dist/components/table-body-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"table-body-cell.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,o0BAAo0B;;ACG71B,MAAM,kBAAkB,GAAsC;EAC5D,kBAAkB;EAClB,eAAe;EACf,YAAY;CACb,CAAC;MAMW,aAAa;;;;;;;0BAQ2B,KAAK;;yBAItB,KAAK;4BAEF,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAO7B,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;;EAID,0BAA0B,CAAC,KAAuB;IAChD,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAEpD,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC;KACxD;GACF;;EAID,sBAAsB,CAAC,KAAuB;IAC5C,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAElE,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;QAChC,IAAI,CAAC,cAAc,GAAG,iBAAiB,CAAC;OACzC;KACF;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,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,8BAA8B,EAAE,IAAI,CAAC,aAAa;QAClD,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,mCAAmC,EAAE,IAAI,CAAC,cAAc;OACzD,EACD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,IAExC,IAAI,CAAC,SAAS,EACf,eAAQ,CACH,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: table-cell;\n box-sizing: border-box;\n color: var(--sdds-data-table-color);\n padding: var(--sdds-spacing-element-16);\n min-width: 192px;\n vertical-align: top;\n background-color: transparent;\n transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n@Component({\n tag: 'sdds-body-cell',\n styleUrl: 'table-body-cell.scss',\n shadow: true,\n})\nexport class TableBodyCell {\n /** Value that will be presented as text inside a cell /\n @Prop({ reflect: true }) cellValue: string \| number;\n\n /* Passing same cell key for all body cells which is used in head cell enables features of text align and hovering /\n @Prop({ reflect: true }) cellKey: any;\n\n /* Disables internal padding. Useful when passing other components to cell. */\n @Prop({ reflect: true }) disablePadding: boolean = false;\n\n @State() textAlignState: string;\n\n @State() activeSorting: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n // Listen to headKey from data-table-header-element\n @Listen('headCellHoverEvent', { target: 'body' })\n headCellHoverEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedKeyValue] = event.detail;\n\n if (this.tableId === receivedID) {\n this.activeSorting = this.cellKey === receivedKeyValue;\n }\n }\n\n // Listen to textAlignEvent from data-table-header-element\n @Listen('textAlignEvent', { target: 'body' })\n textAlignEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n if (this.tableId === receivedID) {\n if (this.cellKey === receivedKey) {\n this.textAlignState = receivedTextAlign;\n }\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__body-cell': true,\n 'sdds-table__body-cell--hover': this.activeSorting,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table__body-cell--no-padding': this.disablePadding,\n }}\n style={{ textAlign: this.textAlignState }}\n >\n {this.cellValue}\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"table-body-cell.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,o0BAAo0B;;ACG71B,MAAM,kBAAkB,GAAsC;EAC5D,kBAAkB;EAClB,eAAe;EACf,YAAY;CACb,CAAC;MAMW,aAAa;;;;;;;0BAQ2B,KAAK;;yBAItB,KAAK;4BAEF,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAO7B,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;;EAID,0BAA0B,CAAC,KAAuB;IAChD,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAEpD,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC;KACxD;GACF;;EAID,sBAAsB,CAAC,KAAuB;IAC5C,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAElE,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;QAChC,IAAI,CAAC,cAAc,GAAG,iBAAiB,CAAC;OACzC;KACF;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,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,8BAA8B,EAAE,IAAI,CAAC,aAAa;QAClD,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;QAC3C,mCAAmC,EAAE,IAAI,CAAC,cAAc;OACzD,EACD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,IAExC,IAAI,CAAC,SAAS,EACf,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: table-cell;\n box-sizing: border-box;\n color: var(--sdds-data-table-color);\n padding: var(--sdds-spacing-element-16);\n min-width: 192px;\n vertical-align: top;\n background-color: transparent;\n transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n@Component({\n tag: 'sdds-body-cell',\n styleUrl: 'table-body-cell.scss',\n shadow: true,\n})\nexport class TableBodyCell {\n /** Value that will be presented as text inside a cell /\n @Prop({ reflect: true }) cellValue: string \| number;\n\n /* Passing same cell key for all body cells which is used in head cell enables features of text align and hovering /\n @Prop({ reflect: true }) cellKey: any;\n\n /* Disables internal padding. Useful when passing other components to cell. */\n @Prop({ reflect: true }) disablePadding: boolean = false;\n\n @State() textAlignState: string;\n\n @State() activeSorting: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n // Listen to headKey from data-table-header-element\n @Listen('headCellHoverEvent', { target: 'body' })\n headCellHoverEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedKeyValue] = event.detail;\n\n if (this.tableId === receivedID) {\n this.activeSorting = this.cellKey === receivedKeyValue;\n }\n }\n\n // Listen to textAlignEvent from data-table-header-element\n @Listen('textAlignEvent', { target: 'body' })\n textAlignEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n if (this.tableId === receivedID) {\n if (this.cellKey === receivedKey) {\n this.textAlignState = receivedTextAlign;\n }\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__body-cell': true,\n 'sdds-table__body-cell--hover': this.activeSorting,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table__body-cell--no-padding': this.disablePadding,\n }}\n style={{ textAlign: this.textAlignState }}\n >\n {this.cellValue}\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/table-body-row.js CHANGED Viewed

@@ -116,7 +116,6 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 export { TableBodyRow as T, defineCustomElement as d };

package/dist/components/table-body-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"table-body-row.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason /\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n @include sdds-box-sizing;\n\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n\n .sdds-table__body-cell--checkbox {\n min-width: 48px;\n width: 48px;\n padding: 0;\n }\n}\n\n:host(.sdds-table__row:hover) {\n background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n display: none;\n}\n\n:host(.sdds-table__row--expended) {\n width: 100%;\n background-color: pink;\n}\n\n:host {\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n}\n\n:host(.sdds-table__compact) {\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__body-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'verticalDividers',\n 'compactDesign',\n 'modeVariant',\n];\n\n@Component({\n tag: 'sdds-table-body-row',\n styleUrl: 'table-body-row.scss',\n shadow: true,\n})\nexport class TableBodyRow {\n @State() enableMultiselect: boolean = false;\n\n @State() bodyCheckBoxStatus: boolean = false;\n\n @State() mainCheckBoxStatus: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' \| 'secondary' = null;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n bodyCheckBoxClicked(event) {\n const row = this.host;\n this.bodyCheckBoxStatus = event.currentTarget.checked;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n }\n\n bodyCheckBoxStatusUpdater(status) {\n this.mainCheckBoxStatus = status;\n this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n const row = this.host;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n }\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n /* Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control /\n @Event({\n eventName: 'bodyRowToTable',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n bodyRowToTable: EventEmitter<boolean>;\n\n /* Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: 'runPaginationEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n runPaginationEvent: EventEmitter<string>;\n\n @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n headCheckboxListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n this.bodyCheckBoxStatusUpdater(event.detail[1]);\n }\n }\n\n @Listen('updateBodyCheckboxesEvent', { target: 'body' })\n updateBodyCheckboxesEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentDidLoad() {\n this.runPaginationEvent.emit(this.tableId);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n {this.enableMultiselect && (\n <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(event) => this.bodyCheckBoxClicked(event)}\n checked={this.bodyCheckBoxStatus}\n />\n </label>\n </div>\n </td>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"table-body-row.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason /\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n @include sdds-box-sizing;\n\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n\n .sdds-table__body-cell--checkbox {\n min-width: 48px;\n width: 48px;\n padding: 0;\n }\n}\n\n:host(.sdds-table__row:hover) {\n background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n display: none;\n}\n\n:host(.sdds-table__row--expended) {\n width: 100%;\n background-color: pink;\n}\n\n:host {\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n}\n\n:host(.sdds-table__compact) {\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__body-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'verticalDividers',\n 'compactDesign',\n 'modeVariant',\n];\n\n@Component({\n tag: 'sdds-table-body-row',\n styleUrl: 'table-body-row.scss',\n shadow: true,\n})\nexport class TableBodyRow {\n @State() enableMultiselect: boolean = false;\n\n @State() bodyCheckBoxStatus: boolean = false;\n\n @State() mainCheckBoxStatus: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' \| 'secondary' = null;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n bodyCheckBoxClicked(event) {\n const row = this.host;\n this.bodyCheckBoxStatus = event.currentTarget.checked;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n }\n\n bodyCheckBoxStatusUpdater(status) {\n this.mainCheckBoxStatus = status;\n this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n const row = this.host;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n }\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n /* Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control /\n @Event({\n eventName: 'bodyRowToTable',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n bodyRowToTable: EventEmitter<boolean>;\n\n /* Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: 'runPaginationEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n runPaginationEvent: EventEmitter<string>;\n\n @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n headCheckboxListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n this.bodyCheckBoxStatusUpdater(event.detail[1]);\n }\n }\n\n @Listen('updateBodyCheckboxesEvent', { target: 'body' })\n updateBodyCheckboxesEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentDidLoad() {\n this.runPaginationEvent.emit(this.tableId);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n {this.enableMultiselect && (\n <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(event) => this.bodyCheckBoxClicked(event)}\n checked={this.bodyCheckBoxStatus}\n />\n </label>\n </div>\n </td>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/{index-96563708.js → index-b21fe3b7.js} RENAMED Viewed

@@ -1724,6 +1724,86 @@ const disconnectedCallback = (elm) => {
         }
     }
 };
+const patchSlotAppendChild = (HostElementPrototype) => {
+    HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+    HostElementPrototype.appendChild = function (newChild) {
+        const slotName = (newChild['s-sn'] = getSlotName(newChild));
+        const slotNode = getHostSlotNode(this.childNodes, slotName);
+        if (slotNode) {
+            const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+            const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+            return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+        }
+        return this.__appendChild(newChild);
+    };
+};
+const patchChildSlotNodes = (elm, cmpMeta) => {
+    class FakeNodeList extends Array {
+        item(n) {
+            return this[n];
+        }
+    }
+    // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
+    if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
+        const childNodesFn = elm.__lookupGetter__('childNodes');
+        Object.defineProperty(elm, 'children', {
+            get() {
+                return this.childNodes.map((n) => n.nodeType === 1);
+            },
+        });
+        Object.defineProperty(elm, 'childElementCount', {
+            get() {
+                return elm.children.length;
+            },
+        });
+        Object.defineProperty(elm, 'childNodes', {
+            get() {
+                const childNodes = childNodesFn.call(this);
+                if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 &&
+                    getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) {
+                    const result = new FakeNodeList();
+                    for (let i = 0; i < childNodes.length; i++) {
+                        const slot = childNodes[i]['s-nr'];
+                        if (slot) {
+                            result.push(slot);
+                        }
+                    }
+                    return result;
+                }
+                return FakeNodeList.from(childNodes);
+            },
+        });
+    }
+};
+const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
+/**
+ * Recursively searches a series of child nodes for a slot with the provided name.
+ * @param childNodes the nodes to search for a slot with a specific name.
+ * @param slotName the name of the slot to match on.
+ * @returns a reference to the slot node that matches the provided name, `null` otherwise
+ */
+const getHostSlotNode = (childNodes, slotName) => {
+    let i = 0;
+    let childNode;
+    for (; i < childNodes.length; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
+            return childNode;
+        }
+        childNode = getHostSlotNode(childNode.childNodes, slotName);
+        if (childNode) {
+            return childNode;
+        }
+    }
+    return null;
+};
+const getHostSlotChildNodes = (n, slotName) => {
+    const childNodes = [n];
+    while ((n = n.nextSibling) && n['s-sn'] === slotName) {
+        childNodes.push(n);
+    }
+    return childNodes;
+};
 const bootstrapLazy = (lazyBundles, options = {}) => {
     var _a;
     const endBootstrap = createTime();
@@ -1777,6 +1857,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                             }
                         }
                     }
+                    {
+                        patchChildSlotNodes(self, cmpMeta);
+                    }
                 }
                 connectedCallback() {
                     if (appLoadFallback) {
@@ -1798,6 +1881,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     return getHostRef(this).$onReadyPromise$;
                 }
             };
+            {
+                patchSlotAppendChild(HostElement.prototype);
+            }
             cmpMeta.$lazyBundleId$ = lazyBundle[0];
             if (!exclude.includes(tagName) && !customElements.get(tagName)) {
                 cmpTags.push(tagName);
@@ -2150,4 +2236,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-96563708.js.map
+//# sourceMappingURL=index-b21fe3b7.js.map