npm - @ukic/canary-web-components - Versions diffs - 2.0.0-canary.37 → 2.0.0-canary.39 - Mend

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

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

package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js ADDED Viewed

@@ -0,0 +1,456 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import readme from "./readme.md";
+import treeItemReadme from "../ic-tree-item/readme.md";
+import { html } from "lit-html";
+export default {
+    title: "Web Components/Tree view",
+    component: "ic-tree-view",
+    parameters: {
+        componentAPI: {
+            data: readme + treeItemReadme,
+        },
+    },
+};
+/**
+ * Use the tree view component to display hierarchical data in a tree structure. The tree view component is useful for displaying nested data, such as a file system or a category hierarchy.
+ *
+ * Click the 'Component API' tab to view all the available attributes, events and slots for tree view.
+ *
+ * To use the tree view component, import `@ukic/canary-web-components` into your application.
+ */
+export const Basic = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee"></ic-tree-item>
+        <ic-tree-item label="Tea"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Basic",
+};
+export const Nested = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee">
+          <ic-tree-item label="Americano">
+            <ic-tree-item label="With milk"></ic-tree-item>
+          </ic-tree-item>
+          <ic-tree-item label="Latte"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Nested",
+};
+export const WithIcons = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "With icons",
+};
+/**
+ * Small and large styling will be passed down from tree view to tree items and nested tree items.
+ */
+export const Small = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu" size="small">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Small",
+};
+export const Large = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu" size="large">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Large",
+};
+/**
+ * Set `appearance` to `light` when the tree-view is displayed on dark background, to provide sufficient colour contrast.
+ */
+export const Light = {
+    render: () => html `
+    <div style="width:250px;">
+      <ic-tree-view heading="Menu" appearance="light">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Light",
+    parameters: {
+        backgrounds: {
+            default: "dark",
+        },
+    },
+};
+/**
+ * Individual tree-items can be disabled using the `disabled` prop.
+ */
+export const DisabledTreeItems = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte" disabled="true">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai" disabled="true"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate" disabled="true"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Disabled tree items",
+};
+/**
+ * Custom links and router-items can be passed in using the `router-item` slot.
+ */
+export const RouterItem = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item>
+          <a slot="router-item" href="/">Slotted coffee</a>
+        </ic-tree-item>
+        <ic-tree-item label="Tea"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Router item",
+};
+/**
+ * Custom content can be passed to both the tree view (using the `heading` slot) and the tree-item (using the `label` slot).
+ */
+export const SlottedContent = {
+    render: () => html `
+      <div style="width:250px">
+        <ic-tree-view>
+          <ic-typography variant="subtitle-large" slot="heading">Menu</ic-typography>
+          <ic-tree-item>
+            <ic-typography slot="label">Coffee<ic-typography>
+          </ic-tree-item>
+          <ic-tree-item label="Tea"></ic-tree-item>
+          <ic-tree-item label="Hot chocolate"></ic-tree-item>
+        </ic-tree-view>
+      </div>
+    `,
+    name: "Slotted content",
+};
+/**
+ * When the heading/label exceeds the width of the container, the text will wrap unless `truncate-tree-item` is set to `true`.
+ */
+export const MaxContent = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu with nested options">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte with extra milk and sugar"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate with marshmallows"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Max content",
+};
+/**
+ * When `truncate-tree-items` or `truncate-heading` are set to `true`, and the heading/label exceeds the width of the container, they will be truncated with an ellipsis.
+ */
+export const TruncationBehaviour = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view
+        heading="Menu with nested options"
+        truncate-tree-items="true"
+        truncate-heading="true"
+      >
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte with extra milk and sugar"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item
+            label="Earl Grey with truncation false"
+            truncate-tree-item="false"
+          ></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate with marshmallows"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Truncation behaviour",
+};
+/**
+ * Utilising the `selected` attribute on `ic-tree-item` will turn it into a controlled component, displaying the selected state when set to `true`.
+ */
+export const SelectedTreeItem = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee"></ic-tree-item>
+        <ic-tree-item label="Tea"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate" selected="true"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Selected tree item",
+};
+/**
+ * When setting the `href` attribute, the tree-item will function as a link.
+ */
+export const Link = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee" href="#"></ic-tree-item>
+        <ic-tree-item label="Tea" selected="true" href="#"></ic-tree-item>
+        <ic-tree-item
+          label="Hot chocolate"
+          disabled="true"
+          href="#"
+        ></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Link",
+};
+/**
+ * An example with the `expanded` prop set to `true` on a parent tree item.
+ */
+export const Expanded = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee" expanded="true">
+          <ic-tree-item label="Americano" expanded="true">
+            <ic-tree-item label="With milk"></ic-tree-item>
+          </ic-tree-item>
+          <ic-tree-item label="Latte"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Expanded",
+};
+//# sourceMappingURL=ic-tree-view.stories.js.map

package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ic-tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.stories.js"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,cAAc;IAEzB,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM,GAAG,cAAc;SAC9B;KACF;CACF,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;GAQjB;IAED,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;GAiBjB;IAED,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IAED,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IAED,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IAED,IAAI,EAAE,OAAO;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IAED,IAAI,EAAE,OAAO;IAEb,UAAU,EAAE;QACV,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IAED,IAAI,EAAE,qBAAqB;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;GAUjB;IAED,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;KAWf;IAEH,IAAI,EAAE,iBAAiB;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BjB;IAED,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCjB;IAED,IAAI,EAAE,sBAAsB;CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;GAQjB;IAED,IAAI,EAAE,oBAAoB;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;GAYjB;IAED,IAAI,EAAE,MAAM;CACb,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;GAiBjB;IAED,IAAI,EAAE,UAAU;CACjB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport treeItemReadme from \"../ic-tree-item/readme.md\";\nimport { html } from \"lit-html\";\n\nexport default {\n title: \"Web Components/Tree view\",\n component: \"ic-tree-view\",\n\n parameters: {\n componentAPI: {\n data: readme + treeItemReadme,\n },\n },\n};\n\n/**\n * Use the tree view component to display hierarchical data in a tree structure. The tree view component is useful for displaying nested data, such as a file system or a category hierarchy.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for tree view.\n *\n * To use the tree view component, import `@ukic/canary-web-components` into your application.\n */\nexport const Basic = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Basic\",\n};\n\nexport const Nested = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Nested\",\n};\n\nexport const WithIcons = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"With icons\",\n};\n\n/**\n * Small and large styling will be passed down from tree view to tree items and nested tree items.\n */\nexport const Small = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" size=\"small\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Small\",\n};\n\nexport const Large = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" size=\"large\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Large\",\n};\n\n/**\n * Set `appearance` to `light` when the tree-view is displayed on dark background, to provide sufficient colour contrast.\n */\nexport const Light = {\n render: () => html`\n <div style=\"width:250px;\">\n <ic-tree-view heading=\"Menu\" appearance=\"light\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Light\",\n\n parameters: {\n backgrounds: {\n default: \"dark\",\n },\n },\n};\n\n/**\n * Individual tree-items can be disabled using the `disabled` prop.\n */\nexport const DisabledTreeItems = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\" disabled=\"true\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\" disabled=\"true\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Disabled tree items\",\n};\n\n/**\n * Custom links and router-items can be passed in using the `router-item` slot.\n */\nexport const RouterItem = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/\">Slotted coffee</a>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Router item\",\n};\n\n/**\n * Custom content can be passed to both the tree view (using the `heading` slot) and the tree-item (using the `label` slot).\n */\nexport const SlottedContent = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view>\n <ic-typography variant=\"subtitle-large\" slot=\"heading\">Menu</ic-typography>\n <ic-tree-item>\n <ic-typography slot=\"label\">Coffee<ic-typography>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Slotted content\",\n};\n\n/**\n * When the heading/label exceeds the width of the container, the text will wrap unless `truncate-tree-item` is set to `true`.\n */\nexport const MaxContent = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu with nested options\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Max content\",\n};\n\n/**\n * When `truncate-tree-items` or `truncate-heading` are set to `true`, and the heading/label exceeds the width of the container, they will be truncated with an ellipsis.\n */\nexport const TruncationBehaviour = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n heading=\"Menu with nested options\"\n truncate-tree-items=\"true\"\n truncate-heading=\"true\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item\n label=\"Earl Grey with truncation false\"\n truncate-tree-item=\"false\"\n ></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Truncation behaviour\",\n};\n\n/**\n * Utilising the `selected` attribute on `ic-tree-item` will turn it into a controlled component, displaying the selected state when set to `true`.\n */\nexport const SelectedTreeItem = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" selected=\"true\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Selected tree item\",\n};\n\n/**\n * When setting the `href` attribute, the tree-item will function as a link.\n */\nexport const Link = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" href=\"#\"></ic-tree-item>\n <ic-tree-item label=\"Tea\" selected=\"true\" href=\"#\"></ic-tree-item>\n <ic-tree-item\n label=\"Hot chocolate\"\n disabled=\"true\"\n href=\"#\"\n ></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Link\",\n};\n\n/**\n * An example with the `expanded` prop set to `true` on a parent tree item.\n */\nexport const Expanded = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" expanded=\"true\">\n <ic-tree-item label=\"Americano\" expanded=\"true\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n\n name: \"Expanded\",\n};\n"]}

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

@@ -431,6 +431,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             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.
@@ -439,7 +440,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
              */
             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));
@@ -458,7 +462,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                         ["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)];