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

@scania/tegel 0.0.5 → 0.0.6

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

Files changed (1107) hide show

package/dist/collection/components/data-table/table-component-sorting.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-component-sorting.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-sorting.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n title: 'Components/Data Table/Web Component',\n parameters: {\n notes: {\n 'sdds-table': sddsTable,\n 'sdds-table-toolbar': sddsTableToolbar,\n 'sdds-header': sddsHeader,\n 'sdds-header-cell': sddsHeaderCell,\n 'sdds-table-body': sddsTableBody,\n 'sdds-body-row': sddsBodyRow,\n 'sdds-body-row-expandable': sddsBodyRowExpandable,\n 'sdds-body-cell': sddsBodyCell,\n 'sdds-table-footer': sddsTableFooter,\n },\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n compactDesign: {\n name: 'Compact Design',\n description: 'Enables compact design of the table, rows with less height.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n responsiveDesign: {\n name: 'Responsive design',\n description: 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column1sortable: {\n name: 'Column 1 is sortable',\n description: 'Enables column 1 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column2sortable: {\n name: 'Column 2 is sortable',\n description: 'Enables column 2 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column3sortable: {\n name: 'Column 3 is sortable',\n description: 'Enables column 3 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column4sortable: {\n name: 'Column 4 is sortable',\n description: 'Enables column 4 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n verticalDivider: {\n name: 'Vertical dividers',\n description: 'Enables vertical dividers between table columns.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n noMinWidth: {\n name: 'No minimum width',\n description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n control: {\n type: 'boolean',\n },\n },\n column1Width: {\n name: 'Column 1 width',\n description:'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n column2Width: {\n name: 'Column 2 width',\n description: 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n column3Width: {\n name: 'Column 3 width',\n description: 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n column4Width: {\n name: 'Column 4 width',\n description: 'Value of width for column 4. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n compactDesign: false,\n responsiveDesign: false,\n column1sortable: true,\n column2sortable: true,\n column3sortable: true,\n column4sortable: true,\n verticalDivider: false,\n noMinWidth: false,\n column1Width: '',\n column2Width: '',\n column3Width: '',\n column4Width: '',\n },\n};\n\nconst SortingTemplate = ({\n modeVariant,\n compactDesign,\n responsiveDesign,\n column1sortable,\n column2sortable,\n column3sortable,\n column4sortable,\n verticalDivider,\n noMinWidth,\n column1Width,\n column2Width,\n column3Width,\n column4Width,\n}) =>\n formatHtmlPreview(`\n <sdds-table\n vertical-dividers=\"${verticalDivider}\"\n compact-design=\"${compactDesign}\"\n enable-responsive=\"${responsiveDesign}\"\n ${noMinWidth ? 'no-min-width' : ''}\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n >\n <sdds-table-toolbar table-title=\"Sorting\"></sdds-table-toolbar>\n <sdds-table-header>\n <sdds-header-cell column-key='truck' column-title='Truck type' sortable=\"${column1sortable}\" ${\n column1Width ? `custom-width=\"${column1Width}\"` : ''\n }></sdds-header-cell>\n <sdds-header-cell column-key='driver' column-title='Driver name' sortable=\"${column2sortable}\" ${\n column2Width ? `custom-width=\"${column2Width}\"` : ''\n }></sdds-header-cell>\n <sdds-header-cell column-key='country' column-title='Country' sortable=\"${column3sortable}\" ${\n column3Width ? `custom-width=\"${column3Width}\"` : ''\n }></sdds-header-cell>\n <sdds-header-cell column-key='mileage' column-title='Mileage' sortable=\"${column4sortable}\" text-align='right' ${\n column4Width ? `custom-width=\"${column4Width}\"` : ''\n }></sdds-header-cell>\n </sdds-table-header>\n <sdds-table-body enable-dummy-data>\n </sdds-table-body>\n </sdds-table>`);\n\nexport const Sorting = SortingTemplate.bind({});"]}
1	+ {"version":3,"file":"table-component-sorting.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-sorting.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AACzD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAEvD,eAAe;EACb,KAAK,EAAE,qCAAqC;EAC5C,UAAU,EAAE;IACV,KAAK,EAAE;MACL,YAAY,EAAE,SAAS;MACvB,oBAAoB,EAAE,gBAAgB;MACtC,aAAa,EAAE,UAAU;MACzB,kBAAkB,EAAE,cAAc;MAClC,iBAAiB,EAAE,aAAa;MAChC,eAAe,EAAE,WAAW;MAC5B,0BAA0B,EAAE,qBAAqB;MACjD,gBAAgB,EAAE,YAAY;MAC9B,mBAAmB,EAAE,eAAe;KACrC;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,0GAA0G;MAC5G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,aAAa,EAAE;MACb,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,6DAA6D;MAC1E,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,gBAAgB,EAAE;MAChB,IAAI,EAAE,mBAAmB;MACzB,WAAW,EACT,6HAA6H;MAC/H,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,UAAU,EAAE;MACV,IAAI,EAAE,kBAAkB;MACxB,WAAW,EACT,+JAA+J;MACjK,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,oKAAoK;MACtK,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE;KACpC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,oKAAoK;MACtK,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE;KACpC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,oKAAoK;MACtK,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE;KACpC;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,oKAAoK;MACtK,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE;KACpC;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,aAAa,EAAE,KAAK;IACpB,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,IAAI;IACrB,eAAe,EAAE,IAAI;IACrB,eAAe,EAAE,IAAI;IACrB,eAAe,EAAE,IAAI;IACrB,eAAe,EAAE,KAAK;IACtB,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;GACjB;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,EAAE,EAAE,CACH,iBAAiB,CAAC;;2BAEO,eAAe;wBAClB,aAAa;2BACV,gBAAgB;QACnC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAChC,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;yFAIT,eAAe,KACpG,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,GAAG,CAAC,CAAC,CAAC,EACpD;2FACyF,eAAe,KACtG,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,GAAG,CAAC,CAAC,CAAC,EACpD;wFACsF,eAAe,KACnG,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,GAAG,CAAC,CAAC,CAAC,EACpD;wFACsF,eAAe,wBACnG,YAAY,CAAC,CAAC,CAAC,iBAAiB,YAAY,GAAG,CAAC,CAAC,CAAC,EACpD;;;;gBAIc,CAAC,CAAC;AAElB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n title: 'Components/Data Table/Web Component',\n parameters: {\n notes: {\n 'sdds-table': sddsTable,\n 'sdds-table-toolbar': sddsTableToolbar,\n 'sdds-header': sddsHeader,\n 'sdds-header-cell': sddsHeaderCell,\n 'sdds-table-body': sddsTableBody,\n 'sdds-body-row': sddsBodyRow,\n 'sdds-body-row-expandable': sddsBodyRowExpandable,\n 'sdds-body-cell': sddsBodyCell,\n 'sdds-table-footer': sddsTableFooter,\n },\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description:\n 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n compactDesign: {\n name: 'Compact Design',\n description: 'Enables compact design of the table, rows with less height.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n responsiveDesign: {\n name: 'Responsive design',\n description:\n 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column1sortable: {\n name: 'Column 1 is sortable',\n description: 'Enables column 1 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column2sortable: {\n name: 'Column 2 is sortable',\n description: 'Enables column 2 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column3sortable: {\n name: 'Column 3 is sortable',\n description: 'Enables column 3 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n column4sortable: {\n name: 'Column 4 is sortable',\n description: 'Enables column 4 to be sorted alphabetically.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n verticalDivider: {\n name: 'Vertical dividers',\n description: 'Enables vertical dividers between table columns.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n noMinWidth: {\n name: 'No minimum width',\n description:\n 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n control: {\n type: 'boolean',\n },\n },\n column1Width: {\n name: 'Column 1 width',\n description:\n 'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n column2Width: {\n name: 'Column 2 width',\n description:\n 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n column3Width: {\n name: 'Column 3 width',\n description:\n 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n column4Width: {\n name: 'Column 4 width',\n description:\n 'Value of width for column 4. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n control: {\n type: 'text',\n },\n if: { arg: 'noMinWidth', eq: true },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n compactDesign: false,\n responsiveDesign: false,\n column1sortable: true,\n column2sortable: true,\n column3sortable: true,\n column4sortable: true,\n verticalDivider: false,\n noMinWidth: false,\n column1Width: '',\n column2Width: '',\n column3Width: '',\n column4Width: '',\n },\n};\n\nconst SortingTemplate = ({\n modeVariant,\n compactDesign,\n responsiveDesign,\n column1sortable,\n column2sortable,\n column3sortable,\n column4sortable,\n verticalDivider,\n noMinWidth,\n column1Width,\n column2Width,\n column3Width,\n column4Width,\n}) =>\n formatHtmlPreview(`\n <sdds-table\n vertical-dividers=\"${verticalDivider}\"\n compact-design=\"${compactDesign}\"\n enable-responsive=\"${responsiveDesign}\"\n ${noMinWidth ? 'no-min-width' : ''}\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n >\n <sdds-table-toolbar table-title=\"Sorting\"></sdds-table-toolbar>\n <sdds-table-header>\n <sdds-header-cell column-key='truck' column-title='Truck type' sortable=\"${column1sortable}\" ${\n column1Width ? `custom-width=\"${column1Width}\"` : ''\n }></sdds-header-cell>\n <sdds-header-cell column-key='driver' column-title='Driver name' sortable=\"${column2sortable}\" ${\n column2Width ? `custom-width=\"${column2Width}\"` : ''\n }></sdds-header-cell>\n <sdds-header-cell column-key='country' column-title='Country' sortable=\"${column3sortable}\" ${\n column3Width ? `custom-width=\"${column3Width}\"` : ''\n }></sdds-header-cell>\n <sdds-header-cell column-key='mileage' column-title='Mileage' sortable=\"${column4sortable}\" text-align='right' ${\n column4Width ? `custom-width=\"${column4Width}\"` : ''\n }></sdds-header-cell>\n </sdds-table-header>\n <sdds-table-body enable-dummy-data>\n </sdds-table-body>\n </sdds-table>`);\n\nexport const Sorting = SortingTemplate.bind({});\n"]}

package/dist/collection/components/data-table/table-footer/table-footer.js CHANGED Viewed

@@ -307,7 +307,7 @@ export class TableFooter {
         "method": "internalSddsEnablePagination",
         "name": "internalSddsEnablePagination",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -325,7 +325,7 @@ export class TableFooter {
         "method": "sddsPageChange",
         "name": "sddsPageChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],

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

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

package/dist/collection/components/data-table/table-header/table-header.css CHANGED Viewed

@@ -6,6 +6,8 @@
   --sdds-checkbox-interaction-02: var(--sdds-white);
   --sdds-checkbox-background-hover: var(--sdds-blue-800);
   --sdds-checkbox-background-focus: var(--sdds-blue-800);
+  --sdds-checkbox-background-opacity-hover: 0.12;
+  --sdds-checkbox-background-opacity-focus: 0.24;
   --sdds-checkbox-disabled: var(--sdds-grey-400);
   --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -17,8 +19,10 @@
   --sdds-checkbox-color: var(--sdds-white);
   --sdds-checkbox-interaction-01: var(--sdds-white);
   --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-background-hover: white;
-  --sdds-checkbox-background-focus: white;
+  --sdds-checkbox-background-hover: var(--sdds-grey-600);
+  --sdds-checkbox-background-focus: var(--sdds-grey-600);
+  --sdds-checkbox-background-opacity-hover: 0.48;
+  --sdds-checkbox-background-opacity-focus: 0.72;
   --sdds-checkbox-disabled: white;
   --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -60,13 +64,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
+  border-radius: 4px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
   border: 1px solid var(--sdds-checkbox-interaction-01);
@@ -75,14 +79,15 @@
   height: 16px;
   left: 4px;
   top: 4px;
+  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
   background-color: var(--sdds-checkbox-background-focus);
-  opacity: 0.24;
+  opacity: var(--sdds-checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {

package/dist/collection/components/data-table/table-header/table-header.js CHANGED Viewed

@@ -114,7 +114,7 @@ export class TableHeaderRow {
         "method": "internalSddsMainCheckboxSelect",
         "name": "internalSddsMainCheckboxSelect",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-header/table-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** @internal Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'internalSddsMainCheckboxSelect',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n internalSddsMainCheckboxSelect: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('internalSddsMainCheckboxChange', { target: 'body' })\n internalSddsMainCheckboxChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('internalSddsRowExpanded', { target: 'body' })\n internalSddsRowExpandedListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.internalSddsMainCheckboxSelect.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-header/table-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** @internal Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'internalSddsMainCheckboxSelect',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsMainCheckboxSelect: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('internalSddsMainCheckboxChange', { target: 'body' })\n internalSddsMainCheckboxChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('internalSddsRowExpanded', { target: 'body' })\n internalSddsRowExpandedListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.internalSddsMainCheckboxSelect.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/data-table/table-header-cell/table-header-cell.js CHANGED Viewed

@@ -239,7 +239,7 @@ export class TableHeaderCell {
         "method": "sddsSortChange",
         "name": "sddsSortChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -254,7 +254,7 @@ export class TableHeaderCell {
         "method": "internalSddsTextAlign",
         "name": "internalSddsTextAlign",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -272,7 +272,7 @@ export class TableHeaderCell {
         "method": "internalSddsHover",
         "name": "internalSddsHover",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{

package/dist/collection/components/data-table/table-header-cell/table-header-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-header-cell/table-header-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n Event,\n EventEmitter,\n State,\n Listen,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-header-cell',\n styleUrl: 'table-header-cell.scss',\n shadow: true,\n})\nexport class TableHeaderCell {\n /** Value of column key, usually comes from JSON, needed for sorting /\n @Prop({ reflect: true }) columnKey: string;\n\n /* Text that displays in column cell /\n @Prop({ reflect: true }) columnTitle: string;\n\n /* In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" /\n @Prop({ reflect: true }) customWidth: string;\n\n /* If passed as prop, enables sorting on that column /\n @Prop() sortable: boolean = false;\n\n /* Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values /\n @Prop({ reflect: true }) textAlign: string;\n\n @State() textAlignState: string;\n\n @State() sortingDirection: string = '';\n\n @State() sortedByMyKey: boolean = false;\n\n @State() disableSortingBtn: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() enableMultiselect: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @State() enableExpandableRows: boolean = false;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic. /\n @Event({\n eventName: 'sddsSortChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsSortChange: EventEmitter<any>;\n\n /* @internal Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell /\n @Event({\n eventName: 'internalSddsTextAlign',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsTextAlign: EventEmitter<any>;\n\n /* @internal Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell /\n @Event({\n eventName: 'internalSddsHover',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsHover: EventEmitter<any>;\n\n @Listen('internalSddsPropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n // Listen to parent data-table if sorting is allowed\n @Listen('internalSddsSortingChange', { target: 'body' })\n internalSddsSortingChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedSortingStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.disableSortingBtn = receivedSortingStatus;\n }\n }\n\n // target is set to body so other instances of same component \"listen\" and react to the change\n @Listen('sddsSortChange', { target: 'body' })\n updateOptionsContent(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // grab only value at position 1 as it is the \"key\"\n if (this.columnKey !== event.detail[1]) {\n this.sortedByMyKey = false;\n // To sync with CSS transition timing\n setTimeout(() => {\n this.sortingDirection = '';\n }, 200);\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 componentWillRender() {\n // enable only right or left text align\n if (this.textAlign === 'right' \|\| this.textAlign === 'end') {\n this.textAlignState = 'right';\n } else {\n this.textAlignState = 'left';\n }\n // To enable body cells text align per rules set in head cell\n this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n sortButtonClick = (key) => {\n // Toggling direction of sorting as we only use one button for sorting\n if (this.sortingDirection !== 'asc') {\n this.sortingDirection = 'asc';\n } else {\n this.sortingDirection = 'desc';\n }\n // Setting to true we can set enable CSS class for \"active\" state of column\n this.sortedByMyKey = true;\n // Use array to send both key and sorting direction\n this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);\n };\n\n headerCellContent = () => {\n if (this.sortable && !this.disableSortingBtn) {\n return (\n <button\n class=\"sdds-table__header-button\"\n onClick={() => this.sortButtonClick(this.columnKey)}\n >\n <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </span>\n\n {this.sortingDirection === '' && (\n <svg\n class=\"sdds-table__header-button-icon\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 15\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n />\n </svg>\n )}\n {/ First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n {this.sortingDirection !== '' && (\n <svg\n class={`sdds-table__header-button-icon ${\n this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n }`}\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=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n />\n </svg>\n )}\n </button>\n );\n }\n return (\n <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </p>\n );\n };\n\n onHeadCellHover = (key) => {\n this.internalSddsHover.emit([this.tableId, key]);\n };\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__header-cell': true,\n 'sdds-table__header-cell--sortable': this.sortable,\n 'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n 'sdds-table__header-cell--custom-width': this.customWidth !== '',\n 'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--extra-column': this.enableMultiselect \|\| this.enableExpandableRows,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n style={{ width: this.customWidth }}\n // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n onMouseLeave={() => this.onHeadCellHover('')}\n >\n {this.headerCellContent()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-header-cell/table-header-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n Event,\n EventEmitter,\n State,\n Listen,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-header-cell',\n styleUrl: 'table-header-cell.scss',\n shadow: true,\n})\nexport class TableHeaderCell {\n /** Value of column key, usually comes from JSON, needed for sorting /\n @Prop({ reflect: true }) columnKey: string;\n\n /* Text that displays in column cell /\n @Prop({ reflect: true }) columnTitle: string;\n\n /* In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" /\n @Prop({ reflect: true }) customWidth: string;\n\n /* If passed as prop, enables sorting on that column /\n @Prop() sortable: boolean = false;\n\n /* Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values /\n @Prop({ reflect: true }) textAlign: string;\n\n @State() textAlignState: string;\n\n @State() sortingDirection: string = '';\n\n @State() sortedByMyKey: boolean = false;\n\n @State() disableSortingBtn: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() enableMultiselect: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @State() enableExpandableRows: boolean = false;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic. /\n @Event({\n eventName: 'sddsSortChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsSortChange: EventEmitter<any>;\n\n /* @internal Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell /\n @Event({\n eventName: 'internalSddsTextAlign',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsTextAlign: EventEmitter<any>;\n\n /* @internal Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell /\n @Event({\n eventName: 'internalSddsHover',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsHover: EventEmitter<any>;\n\n @Listen('internalSddsPropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n // Listen to parent data-table if sorting is allowed\n @Listen('internalSddsSortingChange', { target: 'body' })\n internalSddsSortingChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedSortingStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.disableSortingBtn = receivedSortingStatus;\n }\n }\n\n // target is set to body so other instances of same component \"listen\" and react to the change\n @Listen('sddsSortChange', { target: 'body' })\n updateOptionsContent(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // grab only value at position 1 as it is the \"key\"\n if (this.columnKey !== event.detail[1]) {\n this.sortedByMyKey = false;\n // To sync with CSS transition timing\n setTimeout(() => {\n this.sortingDirection = '';\n }, 200);\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 componentWillRender() {\n // enable only right or left text align\n if (this.textAlign === 'right' \|\| this.textAlign === 'end') {\n this.textAlignState = 'right';\n } else {\n this.textAlignState = 'left';\n }\n // To enable body cells text align per rules set in head cell\n this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n sortButtonClick = (key) => {\n // Toggling direction of sorting as we only use one button for sorting\n if (this.sortingDirection !== 'asc') {\n this.sortingDirection = 'asc';\n } else {\n this.sortingDirection = 'desc';\n }\n // Setting to true we can set enable CSS class for \"active\" state of column\n this.sortedByMyKey = true;\n // Use array to send both key and sorting direction\n this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);\n };\n\n headerCellContent = () => {\n if (this.sortable && !this.disableSortingBtn) {\n return (\n <button\n class=\"sdds-table__header-button\"\n onClick={() => this.sortButtonClick(this.columnKey)}\n >\n <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </span>\n\n {this.sortingDirection === '' && (\n <svg\n class=\"sdds-table__header-button-icon\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 15\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n />\n </svg>\n )}\n {/ First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n {this.sortingDirection !== '' && (\n <svg\n class={`sdds-table__header-button-icon ${\n this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n }`}\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=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n />\n </svg>\n )}\n </button>\n );\n }\n return (\n <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </p>\n );\n };\n\n onHeadCellHover = (key) => {\n this.internalSddsHover.emit([this.tableId, key]);\n };\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__header-cell': true,\n 'sdds-table__header-cell--sortable': this.sortable,\n 'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n 'sdds-table__header-cell--custom-width': this.customWidth !== '',\n 'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--extra-column': this.enableMultiselect \|\| this.enableExpandableRows,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n style={{ width: this.customWidth }}\n // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n onMouseLeave={() => this.onHeadCellHover('')}\n >\n {this.headerCellContent()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/data-table/table-toolbar/table-toolbar.js CHANGED Viewed

@@ -115,7 +115,7 @@ export class TableToolbar {
         "method": "sddsFilter",
         "name": "sddsFilter",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"table-toolbar.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-toolbar/table-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-table-toolbar',\n styleUrl: 'table-toolbar.scss',\n shadow: true,\n})\nexport class TableToolbar {\n /** Adds title to the data-table /\n @Prop({ reflect: true }) tableTitle: string = '';\n\n /* Enables preview of searchbar /\n @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */\n @Event({\n eventName: 'sddsFilter',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n sddsFilter: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n searchFunction(event) {\n const searchTerm = event.currentTarget.value.toLowerCase();\n const sddsTableSearchBar = event.currentTarget.parentElement;\n\n this.sddsFilter.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"table-toolbar.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-toolbar/table-toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-table-toolbar',\n styleUrl: 'table-toolbar.scss',\n shadow: true,\n})\nexport class TableToolbar {\n /** Adds title to the data-table /\n @Prop({ reflect: true }) tableTitle: string = '';\n\n /* Enables preview of searchbar /\n @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */\n @Event({\n eventName: 'sddsFilter',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsFilter: EventEmitter<any>;\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n searchFunction(event) {\n const searchTerm = event.currentTarget.value.toLowerCase();\n const sddsTableSearchBar = event.currentTarget.parentElement;\n\n this.sddsFilter.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/datetime/datetime.css CHANGED Viewed

@@ -182,6 +182,7 @@
 .sdds-form-datetime {
   display: block;
   min-width: 208px;
+  background: unset;
 }
 .sdds-form-datetime-nomin {
   min-width: auto;
@@ -320,8 +321,8 @@
 .sdds-form-datetime-disabled .sdds-datetime-container {
   border-bottom-color: transparent;
 }
-.sdds-form-datetime-disabled .datetime-icon svg path {
-  fill: var(--sdds-datetime-icon-disabled);
+.sdds-form-datetime-disabled .datetime-icon sdds-icon {
+  color: var(--sdds-datetime-icon-disabled);
 }
 .sdds-form-datetime-disabled .sdds-datetime-label {
   color: var(--sdds-datetime-label-disabled);
@@ -345,8 +346,8 @@
 .sdds-form-datetime-error .sdds-datetime-bar::before, .sdds-form-datetime-error .sdds-datetime-bar::after {
   background: var(--sdds-datetime-bar-error);
 }
-.sdds-form-datetime-error .datetime-icon path {
-  fill: var(--sdds-datetime-icon-error);
+.sdds-form-datetime-error .datetime-icon sdds-icon {
+  color: var(--sdds-datetime-icon-error);
 }
 .sdds-datetime-textcounter {

package/dist/collection/components/datetime/datetime.js CHANGED Viewed

@@ -85,10 +85,10 @@ export class Datetime {
         ? `sdds-form-datetime-${this.state}`
         : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("sdds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("sdds-icon", { size: "20px", name: "clock" }))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
   static get is() { return "sdds-datetime"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["datetime.scss"]
@@ -328,7 +328,7 @@ export class Datetime {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],

package/dist/collection/components/datetime/datetime.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datetime.js","sourceRoot":"","sources":["../../../src/components/datetime/datetime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: true,\n})\nexport class Datetime {\n /** Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'datetime-local' \| 'date' \| 'time' = 'datetime-local';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value = '';\n\n /* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM /\n @Prop() defaultValue: string \| 'none' = 'none';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Resets min width rule /\n @Prop() noMinWidth: boolean = false;\n\n /* Set the variant of the datetime component. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: string;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Label text for the component /\n @Prop() label: string = '';\n\n /* Helper text for the component /\n @Prop() helper: string = '';\n\n /* Listen to the focus state of the input /\n @State() focusInput: boolean;\n\n /* Change event for the datetime /\n @Event({\n composed: true,\n bubbles: true,\n cancelable: true,\n })\n sddsChange: EventEmitter;\n\n /* Blur event for the datetime /\n @Event({\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Focus event for the datetime /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n this.sddsChange.emit(e);\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.sddsChange.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix /\n handleFocusClick(e): void {\n this.textInput.focus();\n this.sddsFocus.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleBlur(e): void {\n this.textInput.blur();\n this.sddsBlur.emit(e);\n }\n\n render() {\n let className = ' sdds-datetime-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-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' \|\| this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}\n >\n {this.label && (\n <label htmlFor={this.name} class=\"sdds-datetime-label\">\n {this.label}\n </label>\n )}\n <div\n onClick={(e) => this.handleFocusClick(e)}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onBlur={(e) => this.handleBlur(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\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=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n fill=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"datetime.js","sourceRoot":"","sources":["../../../src/components/datetime/datetime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: false,\n scoped: true,\n})\nexport class Datetime {\n /** Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'datetime-local' \| 'date' \| 'time' = 'datetime-local';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value = '';\n\n /* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM /\n @Prop() defaultValue: string \| 'none' = 'none';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Resets min width rule /\n @Prop() noMinWidth: boolean = false;\n\n /* Set the variant of the datetime component. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: string;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Label text for the component /\n @Prop() label: string = '';\n\n /* Helper text for the component /\n @Prop() helper: string = '';\n\n /* Listen to the focus state of the input /\n @State() focusInput: boolean;\n\n /* Change event for the datetime /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsChange: EventEmitter;\n\n /* Blur event for the datetime /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Focus event for the datetime /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n this.sddsChange.emit(e);\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.sddsChange.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix /\n handleFocusClick(e): void {\n this.textInput.focus();\n this.sddsFocus.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleBlur(e): void {\n this.textInput.blur();\n this.sddsBlur.emit(e);\n }\n\n render() {\n let className = ' sdds-datetime-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-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' \|\| this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}\n >\n {this.label && (\n <label htmlFor={this.name} class=\"sdds-datetime-label\">\n {this.label}\n </label>\n )}\n <div\n onClick={(e) => this.handleFocusClick(e)}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onBlur={(e) => this.handleBlur(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\n <sdds-icon size=\"20px\" name=\"calendar\"></sdds-icon>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <sdds-icon size=\"20px\" name=\"clock\"></sdds-icon>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}