@ukic/web-components 3.3.0 → 3.5.0

package/dist/collection/components/ic-select/ic-select_(single).stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { html } from "lit-html";
 
 const defaultArgs = {
@@ -24,7 +25,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-default"
         label="What is your favourite coffee?"
@@ -54,7 +55,7 @@ export const Default = {
 };
 
 export const AsyncDefault = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         label="What is your favourite coffee?"
         loading
@@ -83,7 +84,7 @@ export const AsyncDefault = {
 };
 
 export const DefaultValue = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-default-value"
         label="What is your favourite coffee?"
@@ -105,7 +106,7 @@ export const DefaultValue = {
 };
 
 export const WithClearButton = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-clear"
         label="What is your favourite coffee?"
@@ -127,7 +128,7 @@ export const WithClearButton = {
 };
 
 export const WithDescriptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-descriptions"
         label="What is your favourite coffee?"
@@ -160,21 +161,29 @@ export const WithDescriptions = {
 };
 
 export const HelperText = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
-        id="select-helper"
         label="What is your favourite coffee?"
         helper-text="Select one option from the list"
       ></ic-select>
+      <br />
+      <ic-select label="What is your favourite coffee?"
+        ><ic-typography variant="caption" slot="helper-text">
+          <span>
+            Slotted helper text with a <ic-link href="#">link</ic-link>
+          </span>
+        </ic-typography></ic-select
+      >
       <script>
-        var select = document.querySelector("#select-helper");
-        select.options = [
-          { label: "Cappuccino", value: "Cap" },
-          { label: "Latte", value: "Lat" },
-          { label: "Americano", value: "Ame" },
-        ];
-        select.addEventListener("icChange", function (event) {
-          console.log("icChange: " + event.detail.value);
+        document.querySelectorAll("ic-select").forEach((el) => {
+          el.options = [
+            { label: "Cappuccino", value: "Cap" },
+            { label: "Latte", value: "Lat" },
+            { label: "Americano", value: "Ame" },
+          ];
+          el.addEventListener("icChange", function (event) {
+            console.log("icChange: " + event.detail.value);
+          });
         });
       </script>`,
 
@@ -182,7 +191,7 @@ export const HelperText = {
 };
 
 export const CustomPlaceholder = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-7"
         label="What is your favourite coffee?"
@@ -204,7 +213,7 @@ export const CustomPlaceholder = {
 };
 
 export const CustomComponents = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-1"
         label="What is your favourite coffee?"
@@ -242,7 +251,7 @@ export const CustomComponents = {
 };
 
 export const Sizes = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: flex; flex-direction: column; gap: 16px;">
       <ic-select
         id="select-size-small"
@@ -309,7 +318,7 @@ export const Sizes = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-disabled"
         label="What is your favourite coffee?"
@@ -331,7 +340,7 @@ export const Disabled = {
 };
 
 export const DisabledOptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-disabled-options"
         label="What is your favourite coffee?"
@@ -352,7 +361,7 @@ export const DisabledOptions = {
 };
 
 export const FullWidth = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-full-width"
         label="What is your favourite coffee?"
@@ -374,7 +383,7 @@ export const FullWidth = {
 };
 
 export const HiddenLabel = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-hidden-label"
         label="What is your favourite coffee?"
@@ -396,7 +405,7 @@ export const HiddenLabel = {
 };
 
 export const Required = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-required"
         label="What is your favourite coffee?"
@@ -441,7 +450,7 @@ export const ReadOnly = {
 };
 
 export const Groups = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-groups"
         label="What is your favourite coffee?"
@@ -454,6 +463,10 @@ export const Groups = {
             children: [
               { label: "Cappuccino", value: "Cap" },
               { label: "Flat white", value: "Fla" },
+              {
+                label: "Macchiato",
+                value: "Mac",
+              },
             ],
           },
           {
@@ -461,6 +474,10 @@ export const Groups = {
             children: [
               { label: "Filter", value: "Fil" },
               { label: "Latte", value: "Lat" },
+              {
+                label: "Americano",
+                value: "Ame",
+              },
             ],
           },
         ];
@@ -474,7 +491,7 @@ export const Groups = {
 };
 
 export const Recommended = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-recommended"
         label="What is your favourite coffee?"
@@ -497,7 +514,7 @@ export const Recommended = {
 };
 
 export const Validation = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-success"
         label="What is your favourite coffee?"
@@ -557,7 +574,7 @@ export const Validation = {
 };
 
 export const ScrollBehaviour = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-scroll"
         label="What is your favourite coffee?"
@@ -587,7 +604,7 @@ export const ScrollBehaviour = {
 };
 
 export const LoadingWithError = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-loading"
         label="What is your favourite coffee?"
@@ -608,7 +625,7 @@ export const LoadingWithError = {
 };
 
 export const InForm = {
-  render: (args) => html`
+  render: () => html`
     <form>
       <ic-select
         id="select-form"
@@ -640,7 +657,7 @@ export const InForm = {
 };
 
 export const EmittingIcOptionSelectOnEnter = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-icoptionselect"
         label="What is your favourite coffee?"

package/dist/collection/components/ic-side-navigation/ic-side-navigation.js

@@ -23,6 +23,10 @@ export class SideNavigation {
         this.hasSecondaryNavigation = false;
         this.menuExpanded = false;
         this.menuOpen = false;
+        /**
+         * If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes.
+         */
+        this.closeOnNavItemClick = false;
         /**
          * If `true`, the icon and label will appear when side navigation is collapsed.
          */
@@ -105,9 +109,7 @@ export class SideNavigation {
         };
         this.toggleMenuExpanded = (expanded) => {
             var _a, _b, _c, _d;
-            if (this.deviceSize > DEVICE_SIZES.S) {
-                this.menuExpanded = expanded;
-            }
+            this.menuExpanded = expanded;
             if (this.menuExpanded) {
                 this.setAndRemoveNoWrapAfterMenuExpanded();
                 (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".app-title-inner-wrapper")) === null || _b === void 0 ? void 0 : _b.classList.add("app-title-show");
@@ -289,6 +291,15 @@ export class SideNavigation {
         this.setMenuExpanded = (expanded) => {
             this.menuExpanded = expanded;
         };
+        this.handleNavItemClicked = () => {
+            if (!this.menuOpen &&
+                this.deviceSize > DEVICE_SIZES.S &&
+                this.menuExpanded) {
+                setTimeout(() => {
+                    this.toggleMenuExpanded(false);
+                }, 0);
+            }
+        };
         /**
          * As the mobile top bar is fixed, a padding top is required
          * to push main content down the height of the mobile top bar
@@ -313,32 +324,32 @@ export class SideNavigation {
         this.resizeObserverCallback = (currSize) => {
             var _a, _b, _c, _d;
             this.deviceSize = currSize;
-            const isSmallAndDisableTopBar = currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;
+            const isSDeviceEnableTop = currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;
             if (!this.disableAutoParentStyling) {
                 const topBarHeight = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".top-bar")) === null || _b === void 0 ? void 0 : _b.scrollHeight;
-                this.setParentPaddingTop(isSmallAndDisableTopBar ? `${topBarHeight}px` : "0");
-                if (isSmallAndDisableTopBar)
+                this.setParentPaddingTop(isSDeviceEnableTop ? `${topBarHeight}px` : "0");
+                if (isSDeviceEnableTop)
                     this.setParentPaddingLeft("0");
-                if (isSmallAndDisableTopBar && this.inline) {
+                if (isSDeviceEnableTop && this.inline) {
                     (_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
                 }
-                else if (!isSmallAndDisableTopBar) {
+                else if (!isSDeviceEnableTop) {
                     (_d = this.el.parentElement) === null || _d === void 0 ? void 0 : _d.style.setProperty("height", "100%");
                 }
             }
+            const notSmallDisableTop = currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour;
             if (!this.disableAutoParentStyling) {
                 const paddingLeft = `calc(var(--ic-space-xxl) ${this.collapsedIconLabels ? "* 2" : "+ var(--ic-space-xs)"})`;
                 if (currSize > DEVICE_SIZES.L) {
                     this.setParentPaddingTop("0");
                     this.setParentPaddingLeft("0");
                 }
-                else if ((currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&
+                else if (notSmallDisableTop &&
                     currSize <= DEVICE_SIZES.M &&
                     this.static) {
                     this.setParentPaddingLeft(paddingLeft);
                 }
-                else if ((currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&
-                    currSize <= DEVICE_SIZES.L) {
+                else if (notSmallDisableTop && currSize <= DEVICE_SIZES.L) {
                     this.setParentPaddingLeft(this.static && this.menuExpanded
                         ? "calc(var(--ic-space-xl) * 10)"
                         : paddingLeft);
@@ -405,6 +416,9 @@ export class SideNavigation {
         this.arrangeSlottedNavigationItem(this.menuExpanded);
         this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
         this.setExpandedButtonHeight();
+        if (this.closeOnNavItemClick) {
+            this.el.addEventListener("navItemClicked", this.handleNavItemClicked);
+        }
         !isSlotUsed(this.el, "app-title") &&
             onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
     }
@@ -414,6 +428,9 @@ export class SideNavigation {
             this.resizeObserver.disconnect();
         }
         (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", this.transitionEndHandler);
+        if (this.closeOnNavItemClick) {
+            this.el.removeEventListener("navItemClicked", this.handleNavItemClicked);
+        }
     }
     brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
@@ -421,10 +438,11 @@ export class SideNavigation {
     render() {
         const { appTitle, menuOpen, foregroundColor, menuExpanded, href, status, version, collapsedIconLabels, inline, } = this;
         const isSDevice = !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;
+        const isSDeviceDisableTop = this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;
         const isMdDevice = this.deviceSize === DEVICE_SIZES.M;
         const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;
         const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;
-        const displayExpandBtn = isMdDevice || this.disableTopBarBehaviour || (isLgDevice && !this.static);
+        const displayExpandBtn = isMdDevice || isSDeviceDisableTop || (isLgDevice && !this.static);
         const topBarProps = {
             isSDevice,
             foregroundColor,
@@ -433,7 +451,7 @@ export class SideNavigation {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: '436ddf7e690787edf148eefe828faab20800accf', class: {
+        return (h(Host, { key: '3c2b5578401f4cb5aec4443e08d0dd201e3b68a5', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -442,12 +460,12 @@ export class SideNavigation {
                 [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && !!collapsedIconLabels,
                 ["ic-side-navigation-inline"]: !!inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '0a1e0bfaabbba9ab87b9ca2683784b8cb8f6e22e', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'ccb38804313b951d4031e749d902fcc969ae5d4c', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '34dd687fdf758aec64d3e26b602f8eff43e50640', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: '26221987ce6680a1c8907e420c2d7ada899b7df5', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '711b4dd66d08757769e655b1c389cbd6686a64ab', class: "navigation-list" }, h("slot", { key: 'bc2d3e56ea19ae85b4d189a62d15996d273f76a5', name: "primary-navigation" }))))), h("div", { key: '9e238999491c652791e0f0ad1fd78efed7cbdec3', class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'e23e83b3b8ab5745d3336b9046d73b2093b3ce2b', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '015266a0a9c86247a1304a261a8854f6f09c2cc9', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: 'dd6adfcf6555b8733c3a54e986c376a8173b67f4', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: '2496078c272bd4a2330a71a92fe5b6814d57f057', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '9357b0f4413ffb8a27454e76f4ef8f31a0268edd', class: "navigation-list" }, h("slot", { key: 'f16b2e21c42f8bb71090bdf2616821a7f3971bb6', name: "primary-navigation" }))))), h("div", { key: '526a5d6b53d96281d1f94ccba74fff0656bae624', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '4a112b17cbf6007dae1099548b38990463c7ae3e', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: 'ee312d7d1150ac06d6f83f6fabcf406c09988345', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: 'd38968324a5737de02b78d30b063c973f6828635', class: "navigation-list" }, h("slot", { key: '1c0846aa364a9421696127688a126df465bd7529', name: "secondary-navigation" })))), h("div", { key: '997739493b5e2bf1e3c34b5f76c0f63c9eb10bc5', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: 'fa864a0fc1ef72e18e9dc2c39fcee48d30c020e9' }), displayExpandBtn && (h("button", { key: '204eac793e743c630eb7febbe4d0f748df93ef65', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '99fe7d81476680ce9d77e67cfd679dfdcc0a0523', class: "app-status-wrapper" }, status !== "" && (h("div", { key: '164bcb345294ca2d623463347e0b2ba47c055191', class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: 'b4ca53bf595e01cca2fa4f6be6c206df17ca9dea', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '3297c45f0206ad300b91bc72fd3f73833344e0a6', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '9e26f92a7d9b7a336c030d5d9341e72e8d0c8869', class: "navigation-list" }, h("slot", { key: '7542d4061e0b546499e5b5323c39957c1607435a', name: "secondary-navigation" })))), h("div", { key: '3b7e932d373b189762584a180a13bc06ec702d77', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: 'fa143397381376b142bef4fc6318ad98f329a358' }), displayExpandBtn && (h("button", { key: '1d92181c969e5fd7c960ff2b28dbc9588b0339cc', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: 'f82c9aec7d5b2175bcf0a71edef6e7dbd4d2914e', class: "app-status-wrapper" }, status !== "" && (h("div", { key: '33caeb2d9c8234d9b526fb9eea4a4a4ff829238d', class: {
                 ["app-status"]: true,
-            } }, h("ic-typography", { key: '0c5bec1d433278488b3c06c6ddd4a0c1e676e9d8', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { key: '64a0a27816a364a4521fd4504c2d31f4e9ac3ecc', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, h("ic-typography", { key: '565ad1362e02ba1c86a179310f8fa9681402c9f2', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { key: '98c9e55f050ae87c60506b72726d843e3e67eb8e', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     static get is() { return "ic-side-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -482,6 +500,26 @@ export class SideNavigation {
                 "attribute": "app-title",
                 "reflect": false
             },
+            "closeOnNavItemClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "close-on-nav-item-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "collapsedIconLabels": {
                 "type": "boolean",
                 "mutable": false,