npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.9 → 3.1.0 - Mend

@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

package/dist/collection/patterns/z-index.stories.js ADDED Viewed

@@ -0,0 +1,474 @@
+import { html } from "lit-html";
+export default {
+  title: "Patterns/Component z-index",
+};
+export const ComponentZIndex = {
+  render: () => html`
+    <style>
+      ic-toast {
+        --bottom-position: 50px;
+      }
+    </style>
+    <div style="display:flex;">
+      <ic-side-navigation
+        app-title="Application Name"
+        version="v0.0.7"
+        status="BETA"
+      >
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+        <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-navigation-item
+          slot="primary-navigation"
+          href="/"
+          label="Search"
+          selected="true"
+        >
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-divider slot="primary-navigation"></ic-divider>
+        <ic-navigation-item slot="primary-navigation" href="/" label="Trends">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-navigation-group
+          slot="primary-navigation"
+          label="Second navigation group"
+          expandable="true"
+        >
+          <ic-navigation-item label="Different navigation" href="/">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z"
+                fill="currentColor"
+              />
+            </svg>
+          </ic-navigation-item>
+          <ic-navigation-item label="Navigation" href="/">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z"
+                fill="currentColor"
+              />
+            </svg>
+          </ic-navigation-item>
+        </ic-navigation-group>
+        <ic-navigation-item
+          slot="primary-navigation"
+          href="/"
+          label="This is a very very very long label for the navigation item"
+        >
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-navigation-item
+          slot="secondary-navigation"
+          href="/"
+          label="Settings"
+        >
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+      </ic-side-navigation>
+      <div
+        class="content-wrapper"
+        style="display:flex; flex-direction: column; flex-grow: 1;"
+      >
+        <main>
+          <ic-top-navigation
+            app-title="Application Name"
+            status="beta"
+            version="v0.0.7"
+          >
+            <svg
+              slot="app-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+            <ic-search-bar
+              slot="search"
+              placeholder="Search"
+              label="Search"
+              id="top-nav-search-bar"
+            ></ic-search-bar>
+            <ic-navigation-button
+              label="button1"
+              slot="buttons"
+              onclick="alert('test')"
+            >
+              <svg
+                slot="icon"
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+                />
+              </svg>
+            </ic-navigation-button>
+            <ic-navigation-group
+              slot="navigation"
+              label="Navigation group"
+              expandable="true"
+            >
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+                selected="true"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+            </ic-navigation-group>
+            <ic-navigation-group
+              slot="navigation"
+              label="Second navigation group"
+              expandable="true"
+            >
+              <ic-navigation-item
+                label="Different navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+            </ic-navigation-group>
+          </ic-top-navigation>
+          <span id="main"></span>
+          <ic-page-header
+            heading="Page header"
+            subheading="This is a page header component with additional functionality and this is the text."
+            aligned="full-width"
+            sticky
+          >
+            <ic-status-tag
+              slot="heading-adornment"
+              label="Beta"
+            ></ic-status-tag>
+            <ic-search-bar
+              id="page-header-search-bar"
+              characters-until-suggestion="1"
+              slot="input"
+              label="What is your favourite coffee?"
+            ></ic-search-bar>
+          </ic-page-header>
+          <ic-section-container id="top-target">
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+              vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante
+              quis, tempor interdum libero. In dictum sodales velit, eu egestas
+              arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci
+              sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna
+              interdum risus, vel fringilla libero ex eu dui. Suspendisse
+              ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae
+              congue ligula rutrum id.</ic-typography
+            >
+            <ic-button onclick="showToast()">Display toast</ic-button>
+            <ic-typography
+              >Etiam in suscipit metus. Duis semper, sapien a molestie semper,
+              ex nibh porttitor tellus, vel molestie justo odio vel purus.
+              Curabitur porttitor, tortor sed semper sollicitudin, odio odio
+              congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies
+              commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt
+              ullamcorper sit amet in metus. Aenean facilisis placerat dictum.
+              Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor
+              lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam
+              non lorem ante.</ic-typography
+            >
+            <ic-typography
+              >Donec aliquam eget mauris condimentum cursus. Nullam tempus a
+              urna in commodo. Proin mauris augue, viverra id finibus id,
+              vulputate in ante. Aliquam volutpat hendrerit tellus vitae
+              tristique. Donec pellentesque enim arcu, at feugiat mauris
+              venenatis vitae. Sed iaculis ut elit et ultrices. Donec diam eros,
+              iaculis ac est nec, tempus feugiat nisl. Suspendisse eget interdum
+              lorem. Phasellus pretium urna id elit pharetra
+              hendrerit.</ic-typography
+            >
+            <ic-typography
+              >Mauris blandit, mi ut posuere dapibus, est ante porttitor sem,
+              quis pretium velit ante nec felis. Vivamus efficitur scelerisque
+              dapibus. Nunc lacinia finibus laoreet. Praesent commodo augue
+              orci, congue rutrum velit malesuada gravida. Nunc magna mauris,
+              ornare nec nisl vel, faucibus euismod orci. Proin in augue vitae
+              nunc gravida consectetur. Pellentesque id malesuada ex, sit amet
+              imperdiet est. Duis erat nibh, lacinia vitae faucibus non, aliquam
+              in dolor. Nam interdum felis vitae feugiat posuere. Cras volutpat
+              molestie ipsum, sed auctor quam volutpat vitae. Vivamus lobortis
+              scelerisque libero vel scelerisque.</ic-typography
+            >
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+              eget orci condimentum, tempus tortor posuere, lacinia ex.
+              Curabitur bibendum suscipit turpis vitae mollis. Ut laoreet orci a
+              risus facilisis porta. Orci varius natoque penatibus et magnis dis
+              parturient montes, nascetur ridiculus mus. Curabitur a porttitor
+              neque, ac dignissim velit. Morbi quis malesuada massa, vitae
+              sodales tellus. Aenean laoreet mattis lobortis. In mauris erat,
+              tincidunt in placerat sed, pretium ac tortor. Morbi blandit lacus
+              a leo vehicula aliquet.</ic-typography
+            >
+            <ic-typography
+              >Pellentesque aliquam risus vel eros maximus, at pellentesque mi
+              pretium. Etiam nec velit at orci varius porttitor. Aliquam
+              facilisis, elit non cursus fringilla, metus metus malesuada lacus,
+              at blandit nibh augue aliquet orci. Duis aliquam, est eget sodales
+              ullamcorper, eros turpis euismod nulla, sed sollicitudin diam
+              massa semper purus. Vivamus vel turpis ipsum. Interdum et
+              malesuada fames ac ante ipsum primis in faucibus. Morbi euismod
+              turpis dapibus quam fermentum condimentum. Mauris ex orci,
+              consequat quis tempor eu, finibus vitae eros. Ut eu erat eu ipsum
+              pulvinar cursus vel at dui. Etiam tincidunt quam porta nulla
+              suscipit vestibulum. Sed iaculis enim leo, et aliquam justo
+              feugiat in. Vivamus in ornare nulla, at tempor massa. Sed et
+              aliquam nisi.</ic-typography
+            >
+            <ic-typography
+              >Mauris tempus accumsan libero non tincidunt. Curabitur et leo
+              orci. Suspendisse molestie posuere leo vitae posuere. Cras lacinia
+              urna non erat gravida sagittis. Quisque dapibus arcu nec sem
+              pharetra convallis. Nullam sed arcu mollis, posuere elit at,
+              condimentum ligula. Nullam maximus nulla quam, ut euismod est
+              feugiat at. Quisque ut venenatis ex, in facilisis sapien.
+              Pellentesque in orci vitae metus iaculis venenatis. Nunc porttitor
+              tellus arcu, in posuere quam vulputate nec. Aenean in venenatis
+              ligula, non mollis quam. Suspendisse nec enim vel massa finibus
+              pretium et a urna. Etiam suscipit semper est, id efficitur diam
+              sollicitudin nec. Nullam nibh sapien, condimentum ut laoreet et,
+              euismod ac mi. Vestibulum tristique odio non risus ullamcorper, et
+              aliquam turpis varius. Nunc metus ex, tempus a augue sit amet,
+              interdum vulputate libero.</ic-typography
+            >
+            <ic-typography
+              >Aenean convallis libero id magna congue pellentesque. Nulla
+              iaculis interdum porta. Aenean laoreet scelerisque nulla vel
+              molestie. Class aptent taciti sociosqu ad litora torquent per
+              conubia nostra, per inceptos himenaeos. Integer sollicitudin in
+              felis vitae rhoncus. Sed eu elementum massa. Cras ut accumsan
+              risus. Donec nec augue justo. Aenean sagittis luctus leo egestas
+              consectetur. Sed sit amet nisl quis felis volutpat facilisis ac
+              vitae tellus. Curabitur pharetra commodo consequat. Aliquam
+              consequat ipsum lacus, sed faucibus sapien mollis
+              vel.</ic-typography
+            >
+            <ic-toast-region>
+              <ic-toast id="toast1" heading="Your coffee is ready"></ic-toast>
+            </ic-toast-region>
+          </ic-section-container>
+        </main>
+        <ic-back-to-top target="main"></ic-back-to-top>
+        <ic-footer
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
+              please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+              background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+          >
+            Logo
+          </div>
+        </ic-footer>
+      </div>
+    </div>
+    <ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>
+    <script>
+      const options = [
+        { label: "Espresso", value: "espresso" },
+        { label: "Double Espresso", value: "doubleespresso" },
+        { label: "Flat White", value: "flatwhite" },
+        { label: "Cappuccino", value: "cappuccino" },
+        { label: "Americano", value: "americano" },
+        { label: "Ameno", value: "ameno" },
+        { label: "Aicano", value: "acano" },
+        { label: "Mocha", value: "mocha" },
+      ];
+      document.querySelector("#page-header-search-bar").options = options;
+      document.querySelector("#top-nav-search-bar").options = options;
+      var toastRegion = document.querySelector("ic-toast-region");
+      function showToast() {
+        var x = document.getElementById("toast1");
+        toastRegion.openToast = x;
+      }
+    </script>
+  `,
+  name: "Component z-index",
+  parameters: {
+    layout: "fullscreen",
+  },
+};

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

@@ -80,4 +80,43 @@ export const IC_BLOCK_COLOR_EXCEPTIONS = {
  */
 export const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;
 export const WHITE_MAX_COLOR_BRIGHTNESS = 130;
+// Keyboard characters that do not affect the content of an input control when pressed
+export const IGNORED_KEYBOARD_CHARACTERS = [
+    "Alt",
+    "AltGraph",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "AudioVolumeDown",
+    "AudioVolumeMute",
+    "AudioVolumeUp",
+    "CapsLock",
+    "ContextMenu",
+    "Control",
+    "Delete",
+    "End",
+    "Enter",
+    "Escape",
+    "F1",
+    "F10",
+    "F11",
+    "F12",
+    "F2",
+    "F3",
+    "F4",
+    "F5",
+    "F6",
+    "F7",
+    "F8",
+    "F9",
+    "Home",
+    "Insert",
+    "Meta",
+    "NumLock",
+    "PageDown",
+    "PageUp",
+    "Shift",
+    "Tab",
+];
 //# sourceMappingURL=constants.js.map

package/dist/collection/utils/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n neutral: {\n icon: neutralIcon,\n ariaLabel: \"Neutral\",\n },\n info: {\n icon: infoIcon,\n ariaLabel: \"For your information\",\n },\n warning: {\n icon: warningIcon,\n ariaLabel: \"Warning\",\n },\n error: {\n icon: errorIcon,\n ariaLabel: \"Error\",\n },\n success: {\n icon: successIcon,\n ariaLabel: \"Success\",\n },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n \"aria-atomic\",\n \"aria-autocomplete\",\n \"aria-busy\",\n \"aria-controls\",\n \"aria-current\",\n \"aria-describedby\",\n \"aria-description\",\n \"aria-details\",\n \"aria-disabled\",\n \"aria-dropeffect\",\n \"aria-errormessage\",\n \"aria-expanded\",\n \"aria-flowto\",\n \"aria-grabbed\",\n \"aria-haspopup\",\n \"aria-hidden\",\n \"aria-invalid\",\n \"aria-keyshortcuts\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-live\",\n \"aria-owns\",\n \"aria-relevant\",\n \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n XS: 576,\n S: 768,\n M: 992,\n L: 1200,\n XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n \"ic-hero\",\n \"ic-top-navigation\",\n \"ic-footer\",\n \"ic-side-navigation\",\n \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n"]}
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,sFAAsF;AACtF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,KAAK;CACN,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n neutral: {\n icon: neutralIcon,\n ariaLabel: \"Neutral\",\n },\n info: {\n icon: infoIcon,\n ariaLabel: \"For your information\",\n },\n warning: {\n icon: warningIcon,\n ariaLabel: \"Warning\",\n },\n error: {\n icon: errorIcon,\n ariaLabel: \"Error\",\n },\n success: {\n icon: successIcon,\n ariaLabel: \"Success\",\n },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n \"aria-atomic\",\n \"aria-autocomplete\",\n \"aria-busy\",\n \"aria-controls\",\n \"aria-current\",\n \"aria-describedby\",\n \"aria-description\",\n \"aria-details\",\n \"aria-disabled\",\n \"aria-dropeffect\",\n \"aria-errormessage\",\n \"aria-expanded\",\n \"aria-flowto\",\n \"aria-grabbed\",\n \"aria-haspopup\",\n \"aria-hidden\",\n \"aria-invalid\",\n \"aria-keyshortcuts\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-live\",\n \"aria-owns\",\n \"aria-relevant\",\n \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n XS: 576,\n S: 768,\n M: 992,\n L: 1200,\n XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n \"ic-hero\",\n \"ic-top-navigation\",\n \"ic-footer\",\n \"ic-side-navigation\",\n \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n\n// Keyboard characters that do not affect the content of an input control when pressed\nexport const IGNORED_KEYBOARD_CHARACTERS = [\n \"Alt\",\n \"AltGraph\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"AudioVolumeDown\",\n \"AudioVolumeMute\",\n \"AudioVolumeUp\",\n \"CapsLock\",\n \"ContextMenu\",\n \"Control\",\n \"Delete\",\n \"End\",\n \"Enter\",\n \"Escape\",\n \"F1\",\n \"F10\",\n \"F11\",\n \"F12\",\n \"F2\",\n \"F3\",\n \"F4\",\n \"F5\",\n \"F6\",\n \"F7\",\n \"F8\",\n \"F9\",\n \"Home\",\n \"Insert\",\n \"Meta\",\n \"NumLock\",\n \"PageDown\",\n \"PageUp\",\n \"Shift\",\n \"Tab\",\n];\n"]}

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

@@ -2,6 +2,7 @@ import { forceUpdate } from "@stencil/core";
 import { IcBrandForegroundEnum, } from "../utils/types";
 import { IC_BLOCK_COLOR_COMPONENTS, IC_BLOCK_COLOR_EXCEPTIONS, IC_FIXED_COLOR_COMPONENTS, } from "./constants";
 const DARK_MODE_THRESHOLD = 133.3505;
+const ANYWHERE_SEARCH_POSITION = "anywhere";
 const icInput = "ic-input";
 const linkIcInput = "input.ic-input";
 /**
@@ -76,10 +77,10 @@ export const renderHiddenInput = (always, container, name, value, disabled) => {
             input.classList.add(icInput);
             container.appendChild(input);
         }
-        input.disabled = 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 || "";
@@ -115,9 +116,11 @@ export const renderFileHiddenInput = (event, container, multiple, name, value, d
         input.hidden = true;
         input.multiple = multiple;
         input.name = name;
-        input.files = value;
         input.disabled = disabled;
-        input.accept = accept;
+        if (value)
+            input.files = value;
+        if (accept)
+            input.accept = accept;
         input.onchange = () => {
             event.emit(input.files);
         };
@@ -131,7 +134,7 @@ export const removeHiddenInput = (container) => {
     const input = filtered[0];
     input === null || input === void 0 ? void 0 : input.remove();
 };
-export const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
+export const hasShadowDom = (el) => el ? !!el.shadowRoot && !!el.attachShadow : false;
 export const getInputHelperTextID = (id) => id + "-helper-text";
 export const getInputValidationTextID = (id) => id + "-validation-text";
 export const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
@@ -150,9 +153,9 @@ export const getInputDescribedByText = (inputId, helperText, validationText) =>
 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) {
+    if (blockColorParent) {
         const parentTag = blockColorParent.tagName.toLowerCase();
         const currentTag = el.tagName.toLowerCase();
         if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
@@ -187,7 +190,7 @@ export const isMobileOrTablet = () => "maxTouchPoints" in navigator && "userAgen
  */
 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();
@@ -195,7 +198,7 @@ export const handleHiddenFormButtonClick = (form, button) => {
 };
 export const isEmptyString = (value) => value ? value.trim().length === 0 : true;
 // A helper function that checks if a prop has been defined
-export const isPropDefined = (prop) => prop !== undefined ? prop : null;
+export const isPropDefined = (prop) => prop !== undefined ? prop : undefined;
 /**
  * Extracts the label using the value from an object. Requires the object to have a label and value property.
  * @param value - value from object
@@ -227,12 +230,12 @@ export const getLabelFromValue = (value, options, valueField = "value", labelFie
  * @param position - whether the search string matches the start of or anywhere in the options
  * @returns filtered array of options
  */
-export const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
+export const getFilteredMenuOptions = (options, includeDescriptions, searchString, position = ANYWHERE_SEARCH_POSITION, labelField = "label") => options.filter((option) => {
     var _a;
     const label = option[labelField].toLowerCase();
     const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const lowerSearchString = searchString.toLowerCase();
-    return position === "anywhere"
+    return position === ANYWHERE_SEARCH_POSITION
         ? includeDescriptions
             ? label.includes(lowerSearchString) ||
                 (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
@@ -333,19 +336,21 @@ export const getSlotElements = (slot) => {
 };
 export const getNavItemParentDetails = ({ parentElement, }) => {
     let navType = { navType: "", parent: null };
-    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;
+    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;
 };