npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.13 → 3.0.0-canary.15 - Mend

@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.15

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.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\";\nimport treeItemReadme from \"../ic-tree-item/readme.md\";\n\nexport default {\n title: \"Web Components/Tree view\",\n component: \"ic-tree-view\",\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 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 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 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 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 name: \"Large\",\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 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\" truncate-tree-items=\"true\">\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/\"\n >Hot chocolate with marshmallows and whipped cream</a\n >\n </ic-tree-item>\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/tea\">Tea</a>\n </ic-tree-item>\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n </ic-tree-view>\n </div>\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 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 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\" expanded=\"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 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\" expanded=\"true\">\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 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 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 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 name: \"Expanded\",\n};\n\n/\n An example with the tree item `focus-inset` prop set to `true`. This sets the focus indicator to appear inside the tree item, around the label.\n */\nexport const FocusInset = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" focus-inset=\"true\">\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 name: \"Focus inset\",\n};\n"]}
1	+ {"version":3,"file":"ic-tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.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\";\nimport treeItemReadme from \"../ic-tree-item/readme.md\";\n\nexport default {\n title: \"Web Components/Tree view\",\n component: \"ic-tree-view\",\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 id=\"basic-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#basic-tree-view\").treeItemData = [\n { label: \"Coffee\" },\n { label: \"Tea\" },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Basic\",\n};\n\nexport const BasicSlotted = {\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 name: \"Basic - slotted\",\n};\n\nexport const Nested = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"nested-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#nested-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n children: [\n { label: \"Americano\", children: [{ label: \"With milk\" }] },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Nested\",\n};\n\nexport const NestedSlotted = {\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 name: \"Nested - slotted\",\n};\n\nexport const WithIcons = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"icon-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-view>\n </div>\n <script>\n document.querySelector(\"#icon-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg 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>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg 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>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"With icons\",\n};\n\nexport const WithIconsSlotted = {\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 name: \"With icons - slotted\",\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 id=\"small-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-view>\n </div>\n <script>\n document.querySelector(\"#small-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg 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>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg 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>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Small\",\n};\n\nexport const SmallSlotted = {\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 name: \"Small - slotted\",\n};\n\nexport const Large = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"large-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-view>\n </div>\n <script>\n document.querySelector(\"#large-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg 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>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg 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>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Large\",\n};\n\nexport const LargeSlotted = {\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 name: \"Large - slotted\",\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 id=\"disabled-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-view>\n </div>\n <script>\n document.querySelector(\"#disabled-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg 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>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n disabled: true,\n icon: '<svg 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>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\", disabled: true }],\n },\n { label: \"Hot chocolate\", disabled: true },\n ];\n </script>\n `,\n name: \"Disabled tree items\",\n};\n\nexport const DisabledTreeItemsSlotted = {\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 name: \"Disabled tree items - slotted\",\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\" truncate-tree-items=\"true\">\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/\"\n >Hot chocolate with marshmallows and whipped cream</a\n >\n </ic-tree-item>\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/tea\">Tea</a>\n </ic-tree-item>\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n </ic-tree-view>\n </div>\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 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\n id=\"max-content-tree-view\"\n heading=\"Menu with nested options\"\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-view>\n </div>\n <script>\n document.querySelector(\"#max-content-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg 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>',\n children: [\n { label: \"Americano\" },\n { label: \"Latte with extra milk and sugar\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate with marshmallows\" },\n ];\n </script>\n `,\n name: \"Max content\",\n};\n\nexport const MaxContentSlotted = {\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 name: \"Max content - slotted\",\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 id=\"truncated-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-view>\n </div>\n <script>\n document.querySelector(\"#truncated-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg 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>',\n children: [\n { label: \"Americano\" },\n { label: \"Latte with extra milk and sugar\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [\n { label: \"Earl grey\" },\n {\n label: \"Earl Grey with truncation false\",\n truncateTreeItem: false,\n },\n { label: \"Chai\" },\n ],\n },\n { label: \"Hot chocolate with marshmallows\" },\n ];\n </script>\n `,\n name: \"Truncation behaviour\",\n};\n\nexport const TruncationBehaviourSlotted = {\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\" expanded=\"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 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\" expanded=\"true\">\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 name: \"Truncation behaviour - slotted\",\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 id=\"selected-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#selected-tree-view\").treeItemData = [\n { label: \"Coffee\" },\n { label: \"Tea\" },\n { label: \"Hot chocolate\", selected: true },\n ];\n </script>\n `,\n name: \"Selected tree item\",\n};\n\nexport const SelectedTreeItemSlotted = {\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 name: \"Selected tree item - slotted\",\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 id=\"link-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#link-tree-view\").treeItemData = [\n { label: \"Coffee\", href: \"#\" },\n { label: \"Tea\", href: \"#\", selected: true },\n { label: \"Hot chocolate\", disabled: true, href: \"#\" },\n ];\n </script>\n `,\n name: \"Link\",\n};\n\nexport const LinkSlotted = {\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 name: \"Link - slotted\",\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 id=\"expanded-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#expanded-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n expanded: true,\n children: [\n {\n label: \"Americano\",\n expanded: true,\n children: [{ label: \"With milk\" }],\n },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Expanded\",\n};\n\nexport const ExpandedSlotted = {\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 name: \"Expanded - slotted\",\n};\n\n/\n An example with the tree item `focus-inset` prop set to `true`. This sets the focus indicator to appear inside the tree item, around the label.\n */\nexport const FocusInset = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"focus-inset-tree-view\"\n heading=\"Menu\"\n focus-inset=\"true\"\n >\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#focus-inset-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n children: [\n { label: \"Americano\", children: [{ label: \"With milk\" }] },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Focus inset\",\n};\n\nexport const FocusInsetSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" focus-inset=\"true\">\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 name: \"Focus inset - slotted\",\n};\n\nexport const WithNestedSkipLink = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-skip-link target=\"next-content\" inline=\"true\"></ic-skip-link>\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 name: \"Nested skip link\",\n};\n"]}

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

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=ic-tree-view.types.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ic-tree-view.types.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.types.tsx"],"names":[],"mappings":"","sourcesContent":["import { IcThemeMode } from \"../../components\";\n\nexport type IcTreeItemOptions = {\n label: string;\n icon?: string;\n children?: IcTreeItemOptions[];\n disabled?: boolean;\n expanded?: boolean;\n href?: string;\n selected?: boolean;\n theme?: IcThemeMode;\n truncateTreeItem?: boolean;\n};\n"]}

package/dist/collection/utils/date-helpers.js CHANGED Viewed

@@ -7,7 +7,7 @@ export const isDayFirstFormat = (dateString) => {
     return dayFirstFormat.test(dateString);
 };
 export const createDate = (date, dateFormat) => {
-    let newDate;
+    let newDate = new Date();
     if (isDateOrEpoch(date)) {
         newDate = typeof date === "string" ? new Date(date) : date;
     }
@@ -20,57 +20,30 @@ export const createDate = (date, dateFormat) => {
     }
     return newDate;
 };
-export const isDateOrEpoch = (date) => {
-    return date instanceof Date || !isNaN(+new Date(+date));
-};
+export const isDateOrEpoch = (date) => date instanceof Date || !isNaN(+new Date(+date));
 export const extractDateFromZuluDateTime = (zuluDateTime) => zuluDateTime.slice(0, zuluDateTime.indexOf("T"));
 export const splitStringDate = (date, dateFormat) => {
     // returns an array where item 1 is year, item 2 is month, item 3 is day
-    if (date.includes("T") && date.includes("Z")) {
-        const nextDate = extractDateFromZuluDateTime(date);
-        return nextDate.split("-");
-    }
+    if (date.includes("T") && date.includes("Z"))
+        return extractDateFromZuluDateTime(date).split("-");
     let newDate = [];
-    const dateWithSlashes = date.replace(/-/g, "/");
-    if (dateWithSlashes.split("/").length > 1) {
-        const dateParts = dateWithSlashes.split("/");
-        // pad any values to 2 characters
-        dateParts.forEach((d, i) => {
-            if (d.length === 1) {
-                dateParts[i] = convertToDoubleDigits(d);
-            }
-        });
+    const splitDateWithSlashes = date.replace(/-/g, "/").split("/");
+    if (splitDateWithSlashes.length > 1) {
+        const dateParts = splitDateWithSlashes.map((part) => part.length === 1 ? convertToDoubleDigits(part) : part); // pad any values to 2 characters
         if (dateParts[0].length === 4) {
             newDate = [dateParts[0], dateParts[1], dateParts[2]];
         }
         else {
-            const newDateStr = dateParts.join("/");
-            const validDayFirst = isDayFirstFormat(newDateStr);
-            const validMonthFirst = isMonthFirstFormat(newDateStr);
-            if (validDayFirst && validMonthFirst) {
-                if (dateFormat.charAt(0) === "M") {
-                    newDate = [dateParts[2], dateParts[0], dateParts[1]];
-                }
-                else {
-                    newDate = [dateParts[2], dateParts[1], dateParts[0]];
-                }
-            }
-            else if (validMonthFirst) {
+            newDate = [dateParts[2], dateParts[1], dateParts[0]];
+            if (isMonthFirstFormat(dateParts.join("/")) &&
+                dateFormat.charAt(0) === "M") {
                 newDate = [dateParts[2], dateParts[0], dateParts[1]];
             }
-            else {
-                newDate = [dateParts[2], dateParts[1], dateParts[0]];
-            }
         }
     }
     return newDate;
 };
-export const convertToDoubleDigits = (value) => {
-    if (+value < 10) {
-        return `0${value}`;
-    }
-    return value.toString();
-};
+export const convertToDoubleDigits = (value) => +value < 10 ? `0${value}` : value.toString();
 export const getWeekStart = (date, startDay) => {
     const tmpDate = new Date(date);
     const day = tmpDate.getDay();
@@ -94,14 +67,11 @@ export const getMonthEnd = (date) => {
 /**
  * Compare if two dates are equal exactly equal
  */
-export const dateMatches = (a, b) => {
-    if (a === null || b === null) {
-        return false;
-    }
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
-};
+export const dateMatches = (a, b) => a !== null &&
+    b !== null &&
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
 export const clampDate = (date, min, max) => {
     const time = date.getTime();
     if (min !== null && time < min.getTime()) {
@@ -115,19 +85,7 @@ export const clampDate = (date, min, max) => {
 /**
  * Compare if date is within specified range
  */
-export const dateInRange = (date, min, max) => {
-    return clampDate(date, min, max) === date;
-};
-export const yearInRange = (year, min, max) => {
-    let allowed = true;
-    if (year !== null) {
-        if (min !== null && year < min.getFullYear()) {
-            allowed = false;
-        }
-        if (allowed && max !== null && year > max.getFullYear()) {
-            allowed = false;
-        }
-    }
-    return allowed;
-};
+export const dateInRange = (date, min, max) => clampDate(date, min, max) === date;
+export const yearInRange = (year, min, max) => !year ||
+    (!(min && year < min.getFullYear()) && !(max && year > max.getFullYear()));
 //# sourceMappingURL=date-helpers.js.map

package/dist/collection/utils/date-helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-helpers.js","sourceRoot":"","sources":["../../src/utils/date-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { IcDateFormat, IcWeekDays } from \"../utils/types\";\n\nexport const isMonthFirstFormat = (dateString: string) => {\n const monthFirstFormat =\n /^(0[1-9]\|1[0-2])(\\/\|-)(0[1-9]\|[12][0-9]\|3[01])(\\/\|-)\\d{4}$/;\n return monthFirstFormat.test(dateString);\n};\n\nexport const isDayFirstFormat = (dateString: string) => {\n const dayFirstFormat =\n /^(0[1-9]\|[12][0-9]\|3[01])(\\/\|-)(0[1-9]\|1[0-2])(\\/\|-)\\d{4}$/;\n return dayFirstFormat.test(dateString);\n};\n\nexport const createDate = (date: string \| Date, dateFormat: IcDateFormat) => {\n let newDate;\n if (isDateOrEpoch(date)) {\n newDate = typeof date === \"string\" ? new Date(date) : date;\n } else if (typeof date === \"string\") {\n const dateArray = splitStringDate(date, dateFormat);\n const year = Number(dateArray[0]);\n const month = Number(dateArray[1]) - 1;\n const day = Number(dateArray[2]);\n newDate = new Date(year, month, day);\n }\n return newDate;\n};\n\nexport const isDateOrEpoch = (date: Date \| string) => {\n return date instanceof Date \|\| !isNaN(+new Date(+date));\n};\n\nexport const extractDateFromZuluDateTime = (zuluDateTime: string) =>\n zuluDateTime.slice(0, zuluDateTime.indexOf(\"T\"));\n\nexport const splitStringDate = (\n date: string,\n dateFormat: IcDateFormat\n): string[] => {\n // returns an array where item 1 is year, item 2 is month, item 3 is day\n if (date.includes(\"T\") && date.includes(\"Z\")) {\n const nextDate = extractDateFromZuluDateTime(date);\n return nextDate.split(\"-\");\n }\n\n let newDate: string[] = [];\n\n const dateWithSlashes = date.replace(/-/g, \"/\");\n if (dateWithSlashes.split(\"/\").length > 1) {\n const dateParts = dateWithSlashes.split(\"/\");\n\n // pad any values to 2 characters\n dateParts.forEach((d, i) => {\n if (d.length === 1) {\n dateParts[i] = convertToDoubleDigits(d);\n }\n });\n if (dateParts[0].length === 4) {\n newDate = [dateParts[0], dateParts[1], dateParts[2]];\n } else {\n const newDateStr = dateParts.join(\"/\");\n const validDayFirst = isDayFirstFormat(newDateStr);\n const validMonthFirst = isMonthFirstFormat(newDateStr);\n if (validDayFirst && validMonthFirst) {\n if (dateFormat.charAt(0) === \"M\") {\n newDate = [dateParts[2], dateParts[0], dateParts[1]];\n } else {\n newDate = [dateParts[2], dateParts[1], dateParts[0]];\n }\n } else if (validMonthFirst) {\n newDate = [dateParts[2], dateParts[0], dateParts[1]];\n } else {\n newDate = [dateParts[2], dateParts[1], dateParts[0]];\n }\n }\n }\n\n return newDate;\n};\n\nexport const convertToDoubleDigits = (value: string \| number): string => {\n if (+value < 10) {\n return `0${value}`;\n }\n return value.toString();\n};\n\nexport const getWeekStart = (date: Date, startDay: IcWeekDays): Date => {\n const tmpDate = new Date(date);\n const day = tmpDate.getDay();\n const diff = (day < startDay ? 7 : 0) + day - startDay;\n\n tmpDate.setDate(tmpDate.getDate() - diff);\n return tmpDate;\n};\n\nexport const getWeekEnd = (date: Date, startDay: IcWeekDays): Date => {\n const d = new Date(date);\n const day = d.getDay();\n const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);\n\n d.setDate(d.getDate() + diff);\n return d;\n};\n\nexport const getMonthStart = (date: Date): Date => {\n return new Date(date.getFullYear(), date.getMonth(), 1);\n};\n\nexport const getMonthEnd = (date: Date): Date => {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n};\n\n/*\n Compare if two dates are equal exactly equal\n /\nexport const dateMatches = (a: Date, b: Date): boolean => {\n if (a === null \|\| b === null) {\n return false;\n }\n\n return (\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n};\n\nexport const clampDate = (date: Date, min: Date, max: Date): Date => {\n const time = date.getTime();\n if (min !== null && time < min.getTime()) {\n return min;\n }\n if (max !== null && time > max.getTime()) {\n return max;\n }\n return date;\n};\n\n/\n Compare if date is within specified range\n */\nexport const dateInRange = (date: Date, min: Date, max: Date): boolean => {\n return clampDate(date, min, max) === date;\n};\n\nexport const yearInRange = (year: number, min: Date, max: Date): boolean => {\n let allowed = true;\n if (year !== null) {\n if (min !== null && year < min.getFullYear()) {\n allowed = false;\n }\n if (allowed && max !== null && year > max.getFullYear()) {\n allowed = false;\n }\n }\n return allowed;\n};\n"]}
1	+ {"version":3,"file":"date-helpers.js","sourceRoot":"","sources":["../../src/utils/date-helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,UAAkB,EAAW,EAAE;IAChE,MAAM,gBAAgB,GACpB,4DAA4D,CAAC;IAC/D,OAAO,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,UAAkB,EAAW,EAAE;IAC9D,MAAM,cAAc,GAClB,4DAA4D,CAAC;IAC/D,OAAO,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,IAAmB,EACnB,UAAwB,EAClB,EAAE;IACR,IAAI,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;QACxB,OAAO,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7D,CAAC;SAAM,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACpC,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QACpD,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACvC,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAmB,EAAW,EAAE,CAC5D,IAAI,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,YAAoB,EAAU,EAAE,CAC1E,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAY,EACZ,UAAwB,EACd,EAAE;IACZ,wEAAwE;IACxE,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;QAC1C,OAAO,2BAA2B,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtD,IAAI,OAAO,GAAa,EAAE,CAAC;IAE3B,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAChE,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpC,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAClD,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CACvD,CAAC,CAAC,iCAAiC;QAEpC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YAErD,IACE,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAC5B,CAAC;gBACD,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YACvD,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAsB,EAAU,EAAE,CACtE,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAU,EAAE,QAAoB,EAAQ,EAAE;IACrE,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAC7B,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC;IAEvD,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,QAAoB,EAAQ,EAAE;IACnE,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACvB,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC;IAE9D,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;IAC9B,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAU,EAAQ,EAAE;IAChD,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAU,EAAQ,EAAE;IAC9C,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAc,EAAE,CAAc,EAAW,EAAE,CACrE,CAAC,KAAK,IAAI;IACV,CAAC,KAAK,IAAI;IACV,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE;IACnC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,EAAE;IAC7B,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC;AAE9B,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAU,EACV,GAAgB,EAChB,GAAgB,EACV,EAAE;IACR,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,GAAG,KAAK,IAAI,IAAI,IAAI,GAAG,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;QACzC,OAAO,GAAG,CAAC;IACb,CAAC;IACD,IAAI,GAAG,KAAK,IAAI,IAAI,IAAI,GAAG,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;QACzC,OAAO,GAAG,CAAC;IACb,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,IAAU,EACV,GAAgB,EAChB,GAAgB,EACP,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,IAAmB,EACnB,GAAgB,EAChB,GAAgB,EACP,EAAE,CACX,CAAC,IAAI;IACL,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,IAAI,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC","sourcesContent":["import { IcDateFormat, IcWeekDays } from \"../utils/types\";\n\nexport const isMonthFirstFormat = (dateString: string): boolean => {\n const monthFirstFormat =\n /^(0[1-9]\|1[0-2])(\\/\|-)(0[1-9]\|[12][0-9]\|3[01])(\\/\|-)\\d{4}$/;\n return monthFirstFormat.test(dateString);\n};\n\nexport const isDayFirstFormat = (dateString: string): boolean => {\n const dayFirstFormat =\n /^(0[1-9]\|[12][0-9]\|3[01])(\\/\|-)(0[1-9]\|1[0-2])(\\/\|-)\\d{4}$/;\n return dayFirstFormat.test(dateString);\n};\n\nexport const createDate = (\n date: string \| Date,\n dateFormat: IcDateFormat\n): Date => {\n let newDate = new Date();\n if (isDateOrEpoch(date)) {\n newDate = typeof date === \"string\" ? new Date(date) : date;\n } else if (typeof date === \"string\") {\n const dateArray = splitStringDate(date, dateFormat);\n const year = Number(dateArray[0]);\n const month = Number(dateArray[1]) - 1;\n const day = Number(dateArray[2]);\n newDate = new Date(year, month, day);\n }\n return newDate;\n};\n\nexport const isDateOrEpoch = (date: Date \| string): boolean =>\n date instanceof Date \|\| !isNaN(+new Date(+date));\n\nexport const extractDateFromZuluDateTime = (zuluDateTime: string): string =>\n zuluDateTime.slice(0, zuluDateTime.indexOf(\"T\"));\n\nexport const splitStringDate = (\n date: string,\n dateFormat: IcDateFormat\n): string[] => {\n // returns an array where item 1 is year, item 2 is month, item 3 is day\n if (date.includes(\"T\") && date.includes(\"Z\"))\n return extractDateFromZuluDateTime(date).split(\"-\");\n\n let newDate: string[] = [];\n\n const splitDateWithSlashes = date.replace(/-/g, \"/\").split(\"/\");\n if (splitDateWithSlashes.length > 1) {\n const dateParts = splitDateWithSlashes.map((part) =>\n part.length === 1 ? convertToDoubleDigits(part) : part\n ); // pad any values to 2 characters\n\n if (dateParts[0].length === 4) {\n newDate = [dateParts[0], dateParts[1], dateParts[2]];\n } else {\n newDate = [dateParts[2], dateParts[1], dateParts[0]];\n\n if (\n isMonthFirstFormat(dateParts.join(\"/\")) &&\n dateFormat.charAt(0) === \"M\"\n ) {\n newDate = [dateParts[2], dateParts[0], dateParts[1]];\n }\n }\n }\n\n return newDate;\n};\n\nexport const convertToDoubleDigits = (value: string \| number): string =>\n +value < 10 ? `0${value}` : value.toString();\n\nexport const getWeekStart = (date: Date, startDay: IcWeekDays): Date => {\n const tmpDate = new Date(date);\n const day = tmpDate.getDay();\n const diff = (day < startDay ? 7 : 0) + day - startDay;\n\n tmpDate.setDate(tmpDate.getDate() - diff);\n return tmpDate;\n};\n\nexport const getWeekEnd = (date: Date, startDay: IcWeekDays): Date => {\n const d = new Date(date);\n const day = d.getDay();\n const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);\n\n d.setDate(d.getDate() + diff);\n return d;\n};\n\nexport const getMonthStart = (date: Date): Date => {\n return new Date(date.getFullYear(), date.getMonth(), 1);\n};\n\nexport const getMonthEnd = (date: Date): Date => {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n};\n\n/*\n Compare if two dates are equal exactly equal\n /\nexport const dateMatches = (a: Date \| null, b: Date \| null): boolean =>\n a !== null &&\n b !== null &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\nexport const clampDate = (\n date: Date,\n min: Date \| null,\n max: Date \| null\n): Date => {\n const time = date.getTime();\n if (min !== null && time < min.getTime()) {\n return min;\n }\n if (max !== null && time > max.getTime()) {\n return max;\n }\n return date;\n};\n\n/\n Compare if date is within specified range\n */\nexport const dateInRange = (\n date: Date,\n min: Date \| null,\n max: Date \| null\n): boolean => clampDate(date, min, max) === date;\n\nexport const yearInRange = (\n year: number \| null,\n min: Date \| null,\n max: Date \| null\n): boolean =>\n !year \|\|\n (!(min && year < min.getFullYear()) && !(max && year > max.getFullYear()));\n"]}

package/dist/collection/utils/helpers.js CHANGED Viewed

@@ -1,6 +1,11 @@
-import { IC_BLOCK_COLOR_COMPONENTS, IC_BLOCK_COLOR_EXCEPTIONS, IC_FIXED_COLOR_COMPONENTS, } from "./constants"; // Using @ukic/web-components/dist/types/utils/constants does not work so duplicated constants into canary package
-import { IcBrandForegroundEnum, } from "./types"; // Using @ukic/web-components/dist/types/utils/types does not work so duplicated constants into canary package
+/**
+ * To investigate:
+ * IcColorRGBA works via @ukic/web-components but IcBrandForegroundEnum does not even though they are exported
+ * from @ukic/web-components in the same file. Why?
+ */
 import { forceUpdate } from "@stencil/core";
+import { IC_BLOCK_COLOR_COMPONENTS, IC_BLOCK_COLOR_EXCEPTIONS, IC_FIXED_COLOR_COMPONENTS, } from "./constants"; // Using @ukic/web-components/dist/types/utils/constants does not work so duplicated constants into canary package
+import { IcBrandForegroundEnum } from "./types"; // Using @ukic/web-components/dist/types/utils/types does not work so duplicated constants into canary package
 const DARK_MODE_THRESHOLD = 133.3505;
 /**
  * converts an enum of strings into an array of strings
@@ -85,7 +90,7 @@ export const renderHiddenInput = (always, container, name, value, disabled) => {
         input.disabled = disabled;
         input.name = name;
         if (value instanceof Date) {
-            input.value = value ? value.toISOString() : null;
+            input.value = value ? value.toISOString() : "";
         }
         else {
             input.value = value || "";
@@ -114,10 +119,10 @@ export const removeHiddenInput = (container) => {
 export const getBrandFromContext = (el, brandFromEvent = null) => {
     var _a;
     const parentElement = el.parentElement || el.getRootNode().host.parentElement;
-    const blockColorParent = parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
+    const blockColorParent = parentElement === null || parentElement === void 0 ? void 0 : parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
     // If within a block color component
-    if (blockColorParent !== null) {
-        const parentTag = blockColorParent.tagName.toLowerCase();
+    if (blockColorParent) {
+        const parentTag = blockColorParent === null || blockColorParent === void 0 ? void 0 : blockColorParent.tagName.toLowerCase();
         const currentTag = el.tagName.toLowerCase();
         if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
             return IcBrandForegroundEnum.Default;
@@ -142,7 +147,7 @@ export const getBrandFromContext = (el, brandFromEvent = null) => {
  */
 export const handleHiddenFormButtonClick = (form, button) => {
     const hiddenFormButton = document.createElement("button");
-    hiddenFormButton.setAttribute("type", button.type);
+    button.type && hiddenFormButton.setAttribute("type", button.type);
     hiddenFormButton.style.display = "none";
     form.appendChild(hiddenFormButton);
     hiddenFormButton.click();
@@ -216,21 +221,23 @@ export const getSlotElements = (slot) => {
         return slot === null ? null : [slot];
     }
 };
-export const getNavItemParentDetails = (el) => {
+export const getNavItemParentDetails = ({ parentElement, }) => {
     let navType = { navType: "", parent: null };
-    switch (getParentElementType(el)) {
-        case "IC-NAVIGATION-GROUP":
-            navType = getNavItemParentDetails(el.parentElement);
-            break;
-        case "IC-TOP-NAVIGATION":
-            navType = { navType: "top", parent: getParentElement(el) };
-            break;
-        case "IC-SIDE-NAVIGATION":
-            navType = { navType: "side", parent: getParentElement(el) };
-            break;
-        case "IC-PAGE-HEADER":
-            navType = { navType: "page-header", parent: null };
-            break;
+    if (parentElement) {
+        switch (parentElement.tagName) {
+            case "IC-NAVIGATION-GROUP":
+                navType = getNavItemParentDetails(parentElement);
+                break;
+            case "IC-TOP-NAVIGATION":
+                navType = { navType: "top", parent: parentElement };
+                break;
+            case "IC-SIDE-NAVIGATION":
+                navType = { navType: "side", parent: parentElement };
+                break;
+            case "IC-PAGE-HEADER":
+                navType = { navType: "page-header", parent: null };
+                break;
+        }
     }
     return navType;
 };
@@ -345,39 +352,20 @@ export const hexToRgba = (hex) => {
     }
 };
 export const rgbaStrToObj = (rgbaStr) => {
-    const fourthChar = rgbaStr.slice(3, 4);
-    let colorRGBA;
-    if (fourthChar.toLowerCase() === "a") {
-        colorRGBA = { r: null, g: null, b: null, a: null };
-        const rgba = rgbaStr
-            .substring(5, rgbaStr.length - 1)
-            .replace(/ /g, "")
-            .split(",");
-        colorRGBA.r = Number(rgba[0]);
-        colorRGBA.g = Number(rgba[1]);
-        colorRGBA.b = Number(rgba[2]);
-        colorRGBA.a = Number(rgba[3]);
-    }
-    else {
-        colorRGBA = { r: null, g: null, b: null, a: 1 };
-        const rgb = rgbaStr
-            .substring(4, rgbaStr.length - 1)
-            .replace(/ /g, "")
-            .split(",");
-        colorRGBA.r = Number(rgb[0]);
-        colorRGBA.g = Number(rgb[1]);
-        colorRGBA.b = Number(rgb[2]);
-    }
-    return colorRGBA;
+    const isRGBA = rgbaStr.slice(3, 4).toLowerCase() === "a";
+    const rgbValues = rgbaStr
+        .substring(isRGBA ? 5 : 4, rgbaStr.length - 1)
+        .replace(/ /g, "")
+        .split(",")
+        .map(Number);
+    return {
+        r: rgbValues[0],
+        g: rgbValues[1],
+        b: rgbValues[2],
+        a: isRGBA ? rgbValues[3] : 1,
+    };
 };
 export const elementOverflowsX = (element) => element.scrollWidth > element.clientWidth;
-/**
- *
- * @param child - The child element
- * @returns string
- */
-export const getParentElementType = (child) => child.parentElement.tagName;
-export const getParentElement = (child) => child.parentElement;
 export const hasClassificationBanner = () => !!document.querySelector("ic-classification-banner:not([inline='true'])");
 export const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
 export const isNumeric = (value) => {
@@ -411,18 +399,13 @@ export const checkResizeObserver = (callbackFn) => {
         callbackFn();
     }
 };
-export const getForm = (el) => el.closest("FORM");
 export const addFormResetListener = (el, callbackFn) => {
-    const form = getForm(el);
-    if (form !== null) {
-        form.addEventListener("reset", callbackFn);
-    }
+    var _a;
+    (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.addEventListener("reset", callbackFn);
 };
 export const removeFormResetListener = (el, callbackFn) => {
-    const form = getForm(el);
-    if (form !== null) {
-        form.removeEventListener("reset", callbackFn);
-    }
+    var _a;
+    (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", callbackFn);
 };
 export const removeDisabledFalse = (disabled, element) => {
     if (!disabled) {