npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.28 → 3.0.0-canary.29 - Mend

@ukic/canary-web-components 3.0.0-canary.28 → 3.0.0-canary.29

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

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-card-horizontal.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/ic-card-horizontal.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n title: \"Web Components/Horizontal Card\",\n component: \"Horizontal Card\",\n parameters: {\n componentAPI: {\n data: readme,\n },\n },\n};\n\n/\n Use a horizontal card to display a message or content in a horizontal layout.\n \n There is one required prop for a horizontal card:\n * - heading: `string`\n \n Click the 'Component API' tab to view all the available props and events for horizontal card.\n \n To use the horizontal card component, import `@ukic/canary-web-components` into your application.\n /\nexport const Default = {\n render: () =>\n html`<ic-card-horizontal heading=\"Card heading\"></ic-card-horizontal>`,\n name: \"Default\",\n};\n\n/\n Add more information to the horizontal card by including a message.\n /\nexport const Message = {\n render: () =>\n html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n ></ic-card-horizontal>`,\n name: \"Message\",\n};\n\n/\n Add an icon to the horizontal card.\n /\nexport const Icon = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Icon\",\n};\n\n/\n Enable interaction by making the horizontal card clickable.\n /\nexport const Clickable = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n clickable=\"true\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Clickable\",\n};\n\n/\n Direct users to another page by making the horizontal card clickable with an href.\n /\nexport const ClickableHref = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n clickable=\"true\"\n href=\"https://www.google.com\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Clickable - href\",\n};\n\n/\n Another method of making horizontal card clickable is wrapping it in a link.\n /\nexport const WrappedByLink = {\n render: () => html`<a href=\"/\">\n <ic-card-horizontal heading=\"Card heading\" message=\"Card message\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg> </ic-card-horizontal\n ></a>`,\n name: \"Wrapped by link\",\n};\n\n/\n Add an image to the horizontal card.\n /\nexport const Image = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"With image\",\n};\n\n/\n The horizontal card can be displayed in different sizes:\n * - `small`\n * - `medium`\n * - `large`\n * - `extra-large`\n /\nexport const Sizes = {\n render: () => html`<div>\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for small bits of text.\"\n size=\"small\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for small to medium bits of text. It's slightly bigger.\"\n size=\"medium\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for medium to large bits of text. This will take up more space on the page.\"\n size=\"large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for large bits of text. It's the biggest card size option so will take up the most space on the application's page.\"\n size=\"extra-large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n </div>`,\n name: \"Sizes\",\n};\n\n/\n When there is too much text content for the horizontal card, the heading and message with truncate.\n /\nexport const Truncation = {\n render: () => html`<div>\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation\"\n message=\"This card is used for small bits of text. More text has been added to show truncation.\"\n size=\"small\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation\"\n message=\"This card is used for small to medium bits of text. It's slightly bigger. More text has been added to show truncation.\"\n size=\"medium\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation in the large size variant\"\n message=\"This card is used for medium to large bits of text. This will take up more space on the page. More text has been added to show truncation. The large card can hold 3 lines of text before it gets cut off, displaying an ellipsis instead of all the text.\"\n size=\"large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation in the extra large size variant of horizontal cards\"\n message=\"This card is used for large bits of text. It's the biggest card size option so will take up the most space on the application's page. More text has been added to show truncation. The extra large card can hold 5 lines of text before it gets cut off, displaying an ellipsis instead of all the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncusut. Vestibulum molestie enim at sollicitudin pellentesque. Proin sit amet augue sit amet dui suscipit lobortis. Nullam at consectetur ante. Suspendisse mollis ultricies porttitor. Nunc laoreet leo tortor, ut tristique odio finibus a.\"\n size=\"extra-large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n </div>`,\n name: \"Truncation\",\n};\n\n/\n Disable the horizontal card to prevent users from interacting with it.\n /\nexport const Disabled = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n clickable=\"true\"\n disabled=\"true\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"Disabled\",\n};\n\n/\n Slot custom content into a horizontal card using the `heading` and `message` slots.\n /\nexport const SlottedContent = {\n render: () => html`<ic-card-horizontal>\n <h4 slot=\"heading\">Card heading</h4>\n <p slot=\"message\">Card message</p>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Slotted heading and message\",\n};\n\n/\n Set the width of the horizontal card by using the `--card-horizontal-width` CSS custom property. The horizontal card will grow, but not exceed its maximum supported width.\n */\nexport const CustomWidth = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n style=\"--card-horizontal-width: 400px\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"Custom width\",\n};\n"]}
1	+ {"version":3,"file":"ic-card-horizontal.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/ic-card-horizontal.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n title: \"Web Components/Horizontal Card\",\n component: \"Horizontal Card\",\n parameters: {\n componentAPI: {\n data: readme,\n },\n },\n};\n\n/\n Use a horizontal card to display a message or content in a horizontal layout.\n \n There is one required prop for a horizontal card:\n * - heading: `string`\n \n Click the 'Component API' tab to view all the available props and events for horizontal card.\n \n To use the horizontal card component, import `@ukic/canary-web-components` into your application.\n /\nexport const Default = {\n render: () =>\n html`<ic-card-horizontal heading=\"Card heading\"></ic-card-horizontal>`,\n name: \"Default\",\n};\n\n/\n Add more information to the horizontal card by including a message.\n /\nexport const Message = {\n render: () =>\n html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n ></ic-card-horizontal>`,\n name: \"Message\",\n};\n\n/\n Add an icon to the horizontal card.\n /\nexport const Icon = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Icon\",\n};\n\n/\n Add an interaction button to horizontal card.\n /\nexport const InteractionButton = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n </ic-card-horizontal>`,\n name: \"Interaction button\",\n};\n\n/\n Add a subheading to horizontal card either via prop or slot.\n /\nexport const Subheading = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n subheading=\"Card subheading\"\n density=\"spacious\"\n ></ic-card-horizontal>`,\n name: \"Subheading\",\n};\n\nexport const SubheadingSlot = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n density=\"spacious\"\n >\n <ic-typography variant=\"subtitle-small\" slot=\"subheading\"\n >Card subheading</ic-typography\n >\n </ic-card-horizontal>`,\n name: \"Subheading - slotted\",\n};\n\n/\n Add an adornment to horizontal card.\n /\nexport const Adornment = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n density=\"spacious\"\n >\n <ic-status-tag\n slot=\"adornment\"\n label=\"Neutral\"\n size=\"small\"\n ></ic-status-tag>\n </ic-card-horizontal>`,\n name: \"Adornment\",\n};\n\n/\n Add a badge to horizontal card.\n /\nexport const Badge = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n </ic-card-horizontal>`,\n name: \"Badge\",\n};\n\n/\n Enable interaction by making the horizontal card clickable.\n /\nexport const Clickable = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n clickable=\"true\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Clickable\",\n};\n\n/\n Direct users to another page by making the horizontal card clickable with an href.\n /\nexport const ClickableHref = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n clickable=\"true\"\n href=\"https://www.google.com\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Clickable - href\",\n};\n\n/\n Another method of making horizontal card clickable is wrapping it in a link.\n /\nexport const WrappedByLink = {\n render: () => html`<a href=\"/\">\n <ic-card-horizontal heading=\"Card heading\" message=\"Card message\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg> </ic-card-horizontal\n ></a>`,\n name: \"Wrapped by link\",\n};\n\n/\n Add an image to the horizontal card.\n /\nexport const ImageLeft = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"With image - left\",\n};\n\nexport const ImageRight = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-right\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"With image - right\",\n};\n\n/\n The horizontal card can be displayed in different sizes:\n * - `small`\n * - `medium`\n * - `large`\n /\nexport const Sizes = {\n render: () => html`<div>\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for small bits of text.\"\n size=\"small\"\n >\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for small to medium bits of text. It's slightly bigger.\"\n size=\"medium\"\n >\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n message=\"This card is used for medium to large bits of text. This will take up more space on the page.\"\n size=\"large\"\n >\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n </div>`,\n name: \"Sizes\",\n};\n\n/\n The horizontal card also has different density options:\n * - `default`\n * - `spacious`\n \n The spacious density option allows for a subheading and an adornment to be added to the horizontal card.\n /\nexport const Density = {\n render: () => html`<div>\n <ic-card-horizontal\n heading=\"Card heading\"\n subheading=\"Card subheading\"\n message=\"This card has a spacious layout. There should be more padding around the image.\"\n density=\"spacious\"\n size=\"small\"\n >\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <ic-status-tag\n slot=\"adornment\"\n label=\"Neutral\"\n size=\"small\"\n ></ic-status-tag>\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n subheading=\"Card subheading\"\n message=\"This card has a spacious layout. There should be more padding around the image.\"\n density=\"spacious\"\n >\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <ic-status-tag\n slot=\"adornment\"\n label=\"Neutral\"\n size=\"small\"\n ></ic-status-tag>\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Card heading\"\n subheading=\"Card subheading\"\n message=\"This card has a spacious layout. There should be more padding around the image.\"\n density=\"spacious\"\n size=\"large\"\n >\n <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <ic-status-tag\n slot=\"adornment\"\n label=\"Neutral\"\n size=\"small\"\n ></ic-status-tag>\n <ic-button\n variant=\"icon-tertiary\"\n title=\"More information\"\n slot=\"interaction-button\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"\n />\n </svg>\n </ic-button>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n </div>`,\n name: \"Density - spacious\",\n};\n\n/\n When there is too much text content for the horizontal card, the heading and message with truncate.\n /\nexport const Truncation = {\n render: () => html`<div>\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation\"\n message=\"This card is used for small bits of text. More text has been added to show truncation.\"\n size=\"small\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation\"\n message=\"This card is used for small to medium bits of text. It's slightly bigger. More text has been added to show truncation.\"\n size=\"medium\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n <br />\n <ic-card-horizontal\n heading=\"Really long card heading to show truncation in the large size variant\"\n message=\"This card is used for medium to large bits of text. This will take up more space on the page. More text has been added to show truncation. The large card can hold 3 lines of text before it gets cut off, displaying an ellipsis instead of all the text.\"\n size=\"large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>\n </div>`,\n name: \"Truncation\",\n};\n\n/\n Disable the horizontal card to prevent users from interacting with it.\n /\nexport const Disabled = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n subheading=\"Card subheading\"\n clickable=\"true\"\n disabled=\"true\"\n density=\"spacious\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"Disabled\",\n};\n\n/\n Slot custom content into a horizontal card using the `heading` and `message` slots.\n /\nexport const SlottedContent = {\n render: () => html`<ic-card-horizontal>\n <h4 slot=\"heading\">Card heading</h4>\n <p slot=\"message\">Card message</p>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n </ic-card-horizontal>`,\n name: \"Slotted heading and message\",\n};\n\n/\n Set the width of the horizontal card by using the `--card-horizontal-width` CSS custom property. The horizontal card will grow, but not exceed its maximum supported width.\n */\nexport const CustomWidth = {\n render: () => html`<ic-card-horizontal\n heading=\"Card heading\"\n message=\"Card message\"\n style=\"--card-horizontal-width: 400px\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n />\n </svg>\n <svg\n slot=\"image-left\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n </svg>\n </ic-card-horizontal>`,\n name: \"Custom width\",\n};\n"]}

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

@@ -54,7 +54,7 @@ ic-loading-indicator {
   overflow-anchor: none;
 }
-:host([show-pagination="true"]) .table-row-container {
+:host(.ic-data-table-show-pagination) .table-row-container {
   height: calc(100% - 3.5625rem);
 }
@@ -73,12 +73,12 @@ table {
   z-index: 1;
 }
-:host([embedded="true"]) .table-row-container {
-  border: var(--ic-space-1px) solid var(--ic-data-table-border);
+:host(.ic-data-table-embedded) .table-row-container {
+  border: var(--ic-table-embedded-border);
 }
 .column-header-inner-container {
-  padding: var(--ic-space-xs);
+  padding: var(--ic-table-cell-padding);
   box-sizing: border-box;
 }
@@ -160,20 +160,20 @@ table {
 .table-density-dense .column-header-inner-container,
 td.table-density-dense {
-  padding: var(--ic-space-xxs) var(--ic-space-xs) !important;
+  padding: var(--ic-table-cell-padding-dense) !important;
 }
 .text-dense {
-  font-size: var(--ic-font-size-label);
+  font-size: var(--ic-table-font-size-dense);
 }
 .table-density-spacious .column-header-inner-container,
 td.table-density-spacious {
-  padding: 0.625rem var(--ic-space-xs) !important;
+  padding: var(--ic-table-cell-padding-spacious) !important;
 }
 .text-spacious {
-  font-size: 1.125rem;
+  font-size: var(--ic-table-font-size-spacious);
 }
 .column-header-text {
@@ -191,10 +191,10 @@ td.table-density-spacious {
 .row-header,
 .column-header {
   text-align: left;
-  padding: var(--ic-space-xs);
+  padding: var(--ic-table-cell-padding);
   background-color: var(--ic-data-table-header-background);
-  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
-  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  border-right: var(--ic-table-heading-border);
+  border-bottom: var(--ic-table-heading-border);
   color: var(--ic-data-table-header-text);
 }
@@ -210,11 +210,11 @@ td.table-density-spacious {
 }
 .scrollable .column-header:last-child {
-  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important;
+  border-right: var(--ic-table-heading-border) !important;
 }
-:host([embedded="true"]) tr:last-child .table-cell,
-:host([embedded="true"]) tr:last-child .row-header {
+:host(.ic-data-table-embedded) tr:last-child .table-cell,
+:host(.ic-data-table-embedded) tr:last-child .row-header {
   border-bottom: none;
 }
@@ -256,8 +256,8 @@ td.table-density-spacious {
 }
 .table-cell {
-  padding: var(--ic-space-xs);
-  border-bottom: solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);
+  padding: var(--ic-table-cell-padding);
+  border-bottom: var(--ic-table-cell-border);
   overflow: hidden;
   box-sizing: border-box;
   max-width: var(--column-max-width);
@@ -330,7 +330,7 @@ td.table-density-spacious {
 .updating-state {
   padding: 0;
-  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  border-bottom: var(--ic-table-heading-border);
 }
 .updating-state-headers {

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

@@ -59,10 +59,15 @@ export class DataTable {
         this.CELL_CONTAINER_WITH_DESCRIPTION_STRING = "cell-container-with-description";
         this.CELL_TEXT_WRAPPER_STRING = ".cell-text-wrapper";
         this.IC_TYPOGRAPHY_STRING = "ic-typography";
+        this.rowIdCounter = 0;
+        this.createRowId = () => {
+            return `row-${this.rowIdCounter++}`;
+        };
         this.fromRow = 0;
         this.scrollable = false;
         this.scrollOffset = 0;
         this.selectedRows = [];
+        this.selectedIcRowIds = [];
         this.debounceDelay = 0;
         /**
          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
@@ -675,29 +680,40 @@ export class DataTable {
                 [`text-${this.density}`]: this.notDefaultDensity(),
             } }, title)))));
         this.onRowClick = (row) => {
-            const notCurrentlySelected = !this.selectedRows.includes(row);
+            const notCurrentlySelected = !this.selectedIcRowIds.includes(row.icRowId);
+            this.selectedIcRowIds = notCurrentlySelected
+                ? [...this.selectedIcRowIds, row.icRowId]
+                : this.selectedIcRowIds.filter((selectedRowId) => selectedRowId !== row.icRowId);
             this.selectedRows = notCurrentlySelected
                 ? [...this.selectedRows, row]
-                : this.selectedRows.filter((selectedRow) => selectedRow !== row);
+                : this.selectedRows.filter((selectedRow) => selectedRow.icRowId !== row.icRowId);
             this.icSelectedRowChange.emit({
                 row: notCurrentlySelected ? row : null,
                 selectedRows: this.selectedRows,
+                icRowId: notCurrentlySelected ? row.icRowId : null,
+                selectedIcRowIds: this.selectedIcRowIds,
             });
         };
         this.selectAllRows = () => {
             this.selectedRows =
                 this.organisedData &&
-                    this.selectedRows.length !== this.organisedData.length
+                    this.selectedIcRowIds.length !== this.organisedData.length
                     ? [...this.organisedData]
                     : [];
+            this.selectedIcRowIds = this.selectedRows.map((row) => row.icRowId);
             this.icSelectAllRows.emit(this.selectedRows);
         };
         this.createRows = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const data = this.showPagination
                 ? (_a = this.data) === null || _a === void 0 ? void 0 : _a.slice(this.fromRow, this.toRow)
                 : (_b = this.data) === null || _b === void 0 ? void 0 : _b.slice();
             const paginationOffset = this.showPagination ? this.fromRow : 0;
+            (_c = this.data) === null || _c === void 0 ? void 0 : _c.forEach((row) => {
+                if (!("icRowId" in row)) {
+                    row.icRowId = this.createRowId();
+                }
+            });
             /**
              * Ensures that createCells has a value in data to map over to actually render the slot.
              * Removes the need for the user to add it multiple times.
@@ -717,13 +733,13 @@ export class DataTable {
                     ? addDataToPosition(row, slottedColumns, "")
                     : row;
             });
-            return (_c = this.organisedData) === null || _c === void 0 ? void 0 : _c.sort(this.sortable &&
+            return (_d = this.organisedData) === null || _d === void 0 ? void 0 : _d.sort(this.sortable &&
                 !this.disableAutoSort &&
                 this.sortedColumn &&
-                !((_d = this.columns.find((col) => col.key === this.sortedColumn)) === null || _d === void 0 ? void 0 : _d.disableAutoSort)
+                !((_e = this.columns.find((col) => col.key === this.sortedColumn)) === null || _e === void 0 ? void 0 : _e.disableAutoSort)
                 ? this.getSortFunction()
                 : undefined).map((row, index) => {
-                const isRowSelected = this.rowSelection && this.selectedRows.includes(row);
+                const isRowSelected = this.rowSelection && this.selectedIcRowIds.includes(row.icRowId);
                 const cellIndex = index + paginationOffset;
                 return (h("tr", { class: {
                         "table-row": true,
@@ -1326,7 +1342,7 @@ export class DataTable {
     }
     render() {
         var _a, _b;
-        const { caption, columns, createColumnHeaders, createUpdatingIndicator, data, density, hideColumnHeaders, rowSelection, loading, loadingOptions, paginationBarOptions, rowsPerPage, scrollable, scrollOffset, selectAllRows, selectedRows, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, tableLayout, theme, } = this;
+        const { caption, columns, createColumnHeaders, createUpdatingIndicator, data, density, embedded, hideColumnHeaders, rowSelection, loading, loadingOptions, paginationBarOptions, rowsPerPage, scrollable, scrollOffset, selectAllRows, selectedRows, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, tableLayout, theme, } = this;
         const rowsSelected = selectedRows.length > 0;
         const allRowsSelected = selectedRows.length === (showPagination ? rowsPerPage : data === null || data === void 0 ? void 0 : data.length);
         const headerCheckboxLabelState = rowsSelected
@@ -1334,22 +1350,26 @@ export class DataTable {
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: 'c5b57495acaac9787d44d93b1da833e209e627fa', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '8feecd07aefd2fba2700ea0a2abc728a489d4354', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '22d7dddca26638d24b2ee608582a59ae3d72d9be', name: "title-bar" }), h("div", { key: 'e2be083520e1cdc27746fd01eabf82904d22590b', class: {
+        return (h(Host, { key: '2cb5ec3e006563c9f004c34c20ec8a07c2869b72', style: Object.assign({}, this.setTableDimensions()), class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-data-table-show-pagination`]: !!showPagination,
+                [`ic-data-table-embedded`]: !!embedded,
+            } }, h("div", { key: '5318a1c4d87fd8794de4fcdb5562e3f928a2de29', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '4d0db56085a87c58698b7a5562ba5c801376c1cb', name: "title-bar" }), h("div", { key: '1dfefc725dd335261b2f9ec6c91d41dda59224a9', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: 'eff477957c0785a651c480b4e9ddd88534563a81', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: 'dcbe3ba57d29d0f152305f8c0f72cd405be2f4af', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: 'e41a3f6133cb02f96e2fd537cdcb24c3467e92a6', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'b36805140e81e3e3a9fd065792c0ac514d64ae16', class: {
+            } }, h("caption", { key: '0beabaa339bff693f17adac6db3192d25ff4a33c', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'b170ffc30468121b456a85afc855f6327d1e135f', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: '7b377adb333d251f84400dd6aa499dfa1fa3df6d' }, rowSelection && data && (h("th", { key: 'ab9831b9c3f4e4b96c5223961753506ce0629cc1', class: {
+            } }, h("tr", { key: 'ca05651983eb87c6258a1ec6040d9f6ce9881128' }, rowSelection && data && (h("th", { key: 'ba010d39dd2f080cde99a92b3f66b8d600681b6b', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: '785236605fa8c29a12fecb6eb4f936c2f65b29b5', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '64975b6e2e4af589ad2b535c68ecc16e2f2abea9', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, h("div", { key: '7dccd2d21c76265186cff95bbd53a4aab380e946', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'b26fa8b7b59152226b6f58bb0fb46d071ddf484c', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '8d04e4eb5e786f981868b313ea1a0edad7b989b2', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'abda6bfbad63dd765dbc8ec4e16609cb4526de2a', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: '11a1b7220450c29b08e352071b76a9389614751a', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: 'af7e79173d942f15a9c2fe4d644ab33e28bbe17e', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'ba71922427b73925df1750591b12b50d708bc417', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: 'e3c536b4e5e74caf6e0fae1c180729da79639781', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
@@ -1987,6 +2007,7 @@ export class DataTable {
             "scrollable": {},
             "scrollOffset": {},
             "selectedRows": {},
+            "selectedIcRowIds": {},
             "sortedColumn": {},
             "sortedColumnOrder": {},
             "toRow": {},
@@ -2042,8 +2063,8 @@ export class DataTable {
                     "text": "Emitted when the selected row changes in the data table."
                 },
                 "complexType": {
-                    "original": "{\n    row: IcDataTableDataType | null;\n    selectedRows: IcDataTableDataType[];\n  }",
-                    "resolved": "{ row: IcDataTableDataType | null; selectedRows: IcDataTableDataType[]; }",
+                    "original": "{\n    row: IcDataTableDataType | null;\n    selectedRows: IcDataTableDataType[];\n    icRowId: string | null;\n    selectedIcRowIds: string[];\n  }",
+                    "resolved": "{ row: IcDataTableDataType | null; selectedRows: IcDataTableDataType[]; icRowId: string | null; selectedIcRowIds: string[]; }",
                     "references": {
                         "IcDataTableDataType": {
                             "location": "import",