@ukic/canary-web-components 2.0.0-canary.37 → 2.0.0-canary.39

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

@@ -0,0 +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\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 * 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\n  name: \"Message\",\n};\n\n/**\n * Add an icon to the horizontal card.\n */\nexport const Icon = {\n  render: () =>\n    html`<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>\n    </ic-card-horizontal>`,\n\n  name: \"Icon\",\n};\n\n/**\n * Direct users to another page by making the horizontal card clickable.\n */\nexport const Clickable = {\n  render: () =>\n    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\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: () =>\n    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\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: () =>\n    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\n  name: \"Wrapped by link\",\n};\n\n/**\n * Add an image to the horizontal card.\n */\nexport const Image = {\n  render: () =>\n    html`<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>\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\n  name: \"Image\",\n};\n\n/**\n * The horizontal card can be displayed in different sizes.\n */\nexport const Sizes = {\n  render: () =>\n    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=\"default\"\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\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: () =>\n    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=\"default\"\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\n  name: \"Truncation\",\n};\n\n/**\n * Disable the horizontal card to prevent users from interacting with it.\n */\nexport const Disabled = {\n  render: () =>\n    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\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\n  name: \"Disabled\",\n};\n\nexport const SlottedHeadingAndMessage = {\n  render: () =>\n    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\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: () =>\n    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\"\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\n  name: \"Custom width\",\n};\n"]}

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

@@ -407,6 +407,7 @@ export class DataTable {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
                 : this.data.slice();
+            const paginationOffset = this.showPagination ? this.fromRow : 0;
             /**
              * 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.
@@ -415,7 +416,10 @@ export class DataTable {
              */
             const organisedData = data.map((row, rowIndex) => {
                 const slottedColumns = this.columns
-                    .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex}`) && { key, index })
+                    .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
+                    key,
+                    index,
+                })
                     .filter((col) => !!col &&
                     // skip the column if its already in the row
                     !Object.prototype.hasOwnProperty.call(row, col.key));
@@ -434,7 +438,7 @@ export class DataTable {
                         ["table-row"]: true,
                         ["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
                     }
-                }, this.createCells(row, index)));
+                }, this.createCells(row, index + paginationOffset)));
             });
         };
         this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];