@scania/tegel 0.0.5 → 0.0.6

package/dist/collection/patterns-stories/navigation/navigation-user-menu.stories.js

@@ -0,0 +1,140 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    siteName: {
+      name: 'Site name',
+      description: 'Set a custom title for the header',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    siteName: 'Application',
+  },
+};
+const Template = () => formatHtmlPreview(`
+    <script>
+      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+      window.demoSideMenu = document.querySelector('#demo-side-menu');
+      window.demoHamburger = document.querySelector('#demo-hamburger');
+    </script>
+    <style>
+      /* If an extra button in the header is required except on 
+      very narrow screens, you can use classes like these: */
+      .demo-hide {
+        display: none;
+      }
+
+      @media (min-width: 375px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <sdds-header>
+        <sdds-header-hamburger class="demo-xs-hide" onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></sdds-header-hamburger>
+
+        <sdds-header-title>
+          Example: User menu
+        </sdds-header-title>
+
+        <sdds-header-launcher slot="end">
+          <sdds-header-launcher-list-title>Sustainable tools</sdds-header-launcher-list-title>
+          <sdds-header-launcher-list>
+            <sdds-header-launcher-list-item>
+              <a href="https://tegel.scania.com">Button</a>
+            </sdds-header-launcher-list-item>
+            <sdds-header-launcher-list-item>
+              <a href="https://tegel.scania.com">Button</a>
+            </sdds-header-launcher-list-item>
+          </sdds-header-launcher-list>
+        </sdds-header-launcher>
+        
+        <sdds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon selected>
+          <img slot="button-icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+          <sdds-header-dropdown-list type="lg">
+            <sdds-header-dropdown-list-user
+              heading="Name Nameson"
+              subheading="Company name">
+            </sdds-header-dropdown-list-user>
+            <sdds-header-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </sdds-header-dropdown-list-item>
+            <sdds-header-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </sdds-header-dropdown-list-item>
+          </sdds-header-dropdown-list>
+        </sdds-header-dropdown>
+
+        <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+        </sdds-header-brand-symbol>
+
+      </sdds-header>
+
+      <sdds-side-menu id="demo-side-menu" aria-label="Side menu">
+        <sdds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-overlay>
+
+        <sdds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-close-button>
+
+        <sdds-side-menu-dropdown slot="end" class="demo-xs-hide" selected default-open>
+          <sdds-side-menu-user 
+            slot="button-label" 
+            heading="Name Namesson" 
+            subheading="Company name" 
+            img-src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" 
+            img-alt="">
+          </sdds-side-menu-user>
+          <sdds-side-menu-dropdown-list type="lg">
+            <sdds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+
+
+      </sdds-side-menu>
+
+      <main class="demo-main sdds-u-p3" style="box-sizing: border-box;">
+        <p>If you display a user menu, a side menu is needed to show it on extra small screens.</p>
+        <br/>
+        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>
+      </main>
+    </div>
+  `);
+export const UserMenu = Template.bind({});
+//# sourceMappingURL=navigation-user-menu.stories.js.map

package/dist/collection/patterns-stories/navigation/navigation-user-menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-user-menu.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-user-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiGD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    siteName: {\n      name: 'Site name',\n      description: 'Set a custom title for the header',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    siteName: 'Application',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n    <script>\n      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */\n      window.demoSideMenu = document.querySelector('#demo-side-menu');\n      window.demoHamburger = document.querySelector('#demo-hamburger');\n    </script>\n    <style>\n      /* If an extra button in the header is required except on \n      very narrow screens, you can use classes like these: */\n      .demo-hide {\n        display: none;\n      }\n\n      @media (min-width: 375px) {\n        .demo-xs-hide {\n          display: none;\n        }\n        .demo-xs-show {\n          display: block;\n        }\n      }\n    </style>\n\n\n    <div class=\"demo-layout\">\n      <sdds-header>\n        <sdds-header-hamburger class=\"demo-xs-hide\" onclick=\"demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);\" aria-label=\"Open application drawer\" aria-haspopup=\"true\" aria-expanded=\"false\"></sdds-header-hamburger>\n\n        <sdds-header-title>\n          Example: User menu\n        </sdds-header-title>\n\n        <sdds-header-launcher slot=\"end\">\n          <sdds-header-launcher-list-title>Sustainable tools</sdds-header-launcher-list-title>\n          <sdds-header-launcher-list>\n            <sdds-header-launcher-list-item>\n              <a href=\"https://tegel.scania.com\">Button</a>\n            </sdds-header-launcher-list-item>\n            <sdds-header-launcher-list-item>\n              <a href=\"https://tegel.scania.com\">Button</a>\n            </sdds-header-launcher-list-item>\n          </sdds-header-launcher-list>\n        </sdds-header-launcher>\n        \n        <sdds-header-dropdown slot=\"end\" class=\"demo-hide demo-xs-show\" no-dropdown-icon selected>\n          <img slot=\"button-icon\" src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" alt=\"User menu.\"/>\n          <sdds-header-dropdown-list type=\"lg\">\n            <sdds-header-dropdown-list-user\n              heading=\"Name Nameson\"\n              subheading=\"Company name\">\n            </sdds-header-dropdown-list-user>\n            <sdds-header-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">My Instructions</a>\n            </sdds-header-dropdown-list-item>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Task List</a>\n            </sdds-header-dropdown-list-item>\n          </sdds-header-dropdown-list>\n        </sdds-header-dropdown>\n\n        <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n        </sdds-header-brand-symbol>\n\n      </sdds-header>\n\n      <sdds-side-menu id=\"demo-side-menu\" aria-label=\"Side menu\">\n        <sdds-side-menu-overlay slot=\"overlay\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-overlay>\n\n        <sdds-side-menu-close-button slot=\"close-button\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-close-button>\n\n        <sdds-side-menu-dropdown slot=\"end\" class=\"demo-xs-hide\" selected default-open>\n          <sdds-side-menu-user \n            slot=\"button-label\" \n            heading=\"Name Namesson\" \n            subheading=\"Company name\" \n            img-src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" \n            img-alt=\"\">\n          </sdds-side-menu-user>\n          <sdds-side-menu-dropdown-list type=\"lg\">\n            <sdds-side-menu-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">My Instructions</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Task List</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n\n\n      </sdds-side-menu>\n\n      <main class=\"demo-main sdds-u-p3\" style=\"box-sizing: border-box;\">\n        <p>If you display a user menu, a side menu is needed to show it on extra small screens.</p>\n        <br/>\n        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>\n      </main>\n    </div>\n  `,\n  );\n\nexport const UserMenu = Template.bind({});\n"]}

package/dist/collection/utils/utils.js

@@ -10,4 +10,277 @@ export const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.as
 export function demoFormat(first, middle, last) {
   return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
+/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346
+ *
+ * Appends a hidden input element to allow the component
+ * work within and get picked up by a <form>.
+ * @param element The element on which the input with be appended.
+ * @param name Name of the input.
+ * @param value The value of the input.
+ * @param disabled Disables the input if true.
+ * @param additionalAttributes Additional attributes that should be passed to the input.
+ */
+export const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
+  const input = element.ownerDocument.createElement('input');
+  input.type = 'hidden';
+  element.appendChild(input);
+  input.disabled = disabled;
+  input.name = name;
+  input.value = value || '';
+  if (additionalAttributes) {
+    additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+  }
+};
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+export const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach((attr) => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+export const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
+};
+/**
+ * Recursively finds the first matching element or child based on a provided condition.
+ *
+ * @param {ParentNode} parentNode - The starting element or shadow root to search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.
+ * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.
+ * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.
+ */
+export function dfs(parentNode, searchPredicate, pierceShadow = false) {
+  if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {
+    return parentNode;
+  }
+  const childElements = parentNode instanceof HTMLSlotElement
+    ? parentNode.assignedElements({ flatten: true })
+    : Array.from(parentNode.children);
+  if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {
+    childElements.push(...Array.from(parentNode.shadowRoot.children));
+  }
+  let foundElement = null;
+  childElements.some((child) => {
+    foundElement = dfs(child, searchPredicate, pierceShadow);
+    return foundElement !== null;
+  });
+  return foundElement;
+}
+// A higher-order function to find the nested child of siblings matching a predicate,
+// based on a sibling traversal function (getNextSibling or getPreviousSibling).
+function getNestedChildOfSiblingsMatching(element, searchPredicate, siblingTraversalFn) {
+  // Start with the sibling of the provided element.
+  let sibling = siblingTraversalFn(element);
+  // Iterate through the siblings until there are no more siblings.
+  while (sibling) {
+    // Use the dfs helper function to find the deeply nested child
+    // that matches the given criteria within the current sibling.
+    const nestedChild = dfs(sibling, searchPredicate);
+    // If a matching deeply nested child is found, return it.
+    if (nestedChild) {
+      return nestedChild;
+    }
+    // Move on to the next sibling.
+    sibling = siblingTraversalFn(sibling);
+  }
+  // If no matching deeply nested child is found, return null.
+  return null;
+}
+// Functions to get the next and previous sibling elements.
+const getNextSibling = (element) => element.nextElementSibling;
+const getPreviousSibling = (element) => element.previousElementSibling;
+/**
+ * Searches for a next sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+export const getNextNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getNextSibling);
+/**
+ * Searches for a previous sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+export const getPreviousNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);
+/**
+ * Checks if the given element is a heading element (h1-h6) or has a role of "heading".
+ *
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is a heading element, false otherwise.
+ */
+export const isHeadingElement = (el) => {
+  const tagName = el.tagName.toLowerCase();
+  const role = el.getAttribute('role');
+  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';
+};
+/**
+ * Loop through the children and add the 'listitem' role if needed.
+ * @param {Node} targetNode The node being updated.
+ * */
+export const updateListChildrenRoles = (targetNode) => {
+  targetNode.childNodes.forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {
+        element.setAttribute('role', 'listitem');
+      }
+    }
+  });
+};
+export function isFocusable(element) {
+  if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  const focusableSelectors = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ];
+  // Check if the element matches any of the focusable elements selectors
+  if (focusableSelectors.some((selector) => element.matches(selector))) {
+    return true;
+  }
+  // Check if the element is contenteditable
+  if (element.hasAttribute('contenteditable')) {
+    const contentEditableValue = element.getAttribute('contenteditable').toLowerCase();
+    if (contentEditableValue === 'true' || contentEditableValue === '') {
+      return true;
+    }
+  }
+  return false;
+}
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAG9C,MAAM,eAAe,GAAY;EAC/B,eAAe,EAAE,KAAK;EACtB,yBAAyB,EAAE,QAAQ;EACnC,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,EAAE,CAC3C,QAAQ,CAAC,MAAM,CAAC,OAAO,kBACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,IAC/B,eAAe,EAClB,CAAC;AAEL,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;EACpE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["import prettier from 'prettier/standalone';\nimport parserBabel from 'prettier/parser-babel';\nimport parserHtml from 'prettier/parser-html';\nimport { Options } from 'prettier';\n\nconst prettierOptions: Options = {\n  bracketSameLine: false,\n  htmlWhitespaceSensitivity: 'ignore',\n  printWidth: 100,\n};\n\nexport const formatHtmlPreview = (htmlStr) =>\n  prettier.format(htmlStr, {\n    parser: 'html',\n    plugins: [parserBabel, parserHtml],\n    ...prettierOptions,\n  });\n\nexport function demoFormat(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAG9C,MAAM,eAAe,GAAY;EAC/B,eAAe,EAAE,KAAK;EACtB,yBAAyB,EAAE,QAAQ;EACnC,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,EAAE,CAC3C,QAAQ,CAAC,MAAM,CAAC,OAAO,kBACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,IAC/B,eAAe,EAClB,CAAC;AAEL,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;EACpE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAAoB,EACpB,IAAY,EACZ,KAAgC,EAChC,QAAiB,EACjB,oBAA2D,EAC3D,EAAE;EACF,MAAM,KAAK,GAAG,OAAO,CAAC,aAAc,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5D,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;EACtB,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;EAC3B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC1B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;EAClB,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;EAC1B,IAAI,oBAAoB,EAAE;IACxB,oBAAoB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GAClF;AACH,CAAC,CAAC;AAIF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAe,EAAE,aAAuB,EAAE,EAAE,EAAE;EAC9E,MAAM,eAAe,GAAe,EAAE,CAAC;EAEvC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;IAC1B,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;MACzB,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MACpC,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;OAC/C;MACD,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;KAC1B;EACH,CAAC,CAAC,CAAC;EAEH,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,cAAc,GAAG;EACrB,MAAM;EACN,uBAAuB;EACvB,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,cAAc;EACd,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;EACd,eAAe;EACf,mBAAmB;EACnB,eAAe;EACf,aAAa;EACb,eAAe;EACf,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,sBAAsB;EACtB,kBAAkB;EAClB,WAAW;EACX,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,eAAe;EACf,eAAe;EACf,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,WAAW;EACX,eAAe;EACf,eAAe;EACf,eAAe;EACf,gBAAgB;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAe,EAAE,UAAqB,EAAE,EAAE;EAC9E,IAAI,mBAAmB,GAAG,cAAc,CAAC;EACzC,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;IACvC,mBAAmB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;GACxF;EACD,OAAO,iBAAiB,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,UAAU,GAAG,CACjB,UAAsB,EACtB,eAA6C,EAC7C,YAAY,GAAG,KAAK;EAEpB,IAAI,UAAU,YAAY,WAAW,IAAI,eAAe,CAAC,UAAU,CAAC,EAAE;IACpE,OAAO,UAAU,CAAC;GACnB;EAED,MAAM,aAAa,GACjB,UAAU,YAAY,eAAe;IACnC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAChD,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;EAEtC,IAAI,YAAY,IAAI,UAAU,YAAY,WAAW,IAAI,UAAU,CAAC,UAAU,EAAE;IAC9E,aAAa,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;GACnE;EAED,IAAI,YAAY,GAAuB,IAAI,CAAC;EAC5C,aAAa,CAAC,IAAI,CAAC,CAAC,KAAkB,EAAE,EAAE;IACxC,YAAY,GAAG,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC;IACzD,OAAO,YAAY,KAAK,IAAI,CAAC;EAC/B,CAAC,CAAC,CAAC;EAEH,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,qFAAqF;AACrF,gFAAgF;AAChF,SAAS,gCAAgC,CACvC,OAAoB,EACpB,eAA6C,EAC7C,kBAA2D;EAE3D,kDAAkD;EAClD,IAAI,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;EAE1C,iEAAiE;EACjE,OAAO,OAAO,EAAE;IACd,8DAA8D;IAC9D,8DAA8D;IAC9D,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAElD,yDAAyD;IACzD,IAAI,WAAW,EAAE;MACf,OAAO,WAAW,CAAC;KACpB;IAED,+BAA+B;IAC/B,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;GACvC;EAED,4DAA4D;EAC5D,OAAO,IAAI,CAAC;AACd,CAAC;AAED,2DAA2D;AAC3D,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,kBAAiC,CAAC;AAC3F,MAAM,kBAAkB,GAAG,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,sBAAqC,CAAC;AAEnG;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAClD,OAAoB,EACpB,eAA6C,EAC7C,EAAE,CAAC,gCAAgC,CAAC,OAAO,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,wCAAwC,GAAG,CACtD,OAAoB,EACpB,eAA6C,EAC7C,EAAE,CAAC,gCAAgC,CAAC,OAAO,EAAE,eAAe,EAAE,kBAAkB,CAAC,CAAC;AAEpF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAe,EAAE,EAAE;EAClD,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;EACzC,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;EACrC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC;AACtF,CAAC,CAAC;AAEF;;;KAGK;AACL,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,UAAgB,EAAQ,EAAE;EAChE,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAU,EAAE,EAAE;IAC3C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;MACvC,MAAM,OAAO,GAAG,IAAe,CAAC;MAChC,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EAAE;QACzF,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OAC1C;KACF;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,OAAoB;EAC9C,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;IACtD,OAAO,KAAK,CAAC;GACd;EAED,MAAM,kBAAkB,GAAG;IACzB,SAAS;IACT,YAAY;IACZ,4CAA4C;IAC5C,wBAAwB;IACxB,0BAA0B;IAC1B,wBAAwB;IACxB,iCAAiC;GAClC,CAAC;EAEF,uEAAuE;EACvE,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;IACpE,OAAO,IAAI,CAAC;GACb;EAED,0CAA0C;EAC1C,IAAI,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE;IAC3C,MAAM,oBAAoB,GAAG,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,WAAW,EAAE,CAAC;IACnF,IAAI,oBAAoB,KAAK,MAAM,IAAI,oBAAoB,KAAK,EAAE,EAAE;MAClE,OAAO,IAAI,CAAC;KACb;GACF;EAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import prettier from 'prettier/standalone';\nimport parserBabel from 'prettier/parser-babel';\nimport parserHtml from 'prettier/parser-html';\nimport { Options } from 'prettier';\n\nconst prettierOptions: Options = {\n  bracketSameLine: false,\n  htmlWhitespaceSensitivity: 'ignore',\n  printWidth: 100,\n};\n\nexport const formatHtmlPreview = (htmlStr) =>\n  prettier.format(htmlStr, {\n    parser: 'html',\n    plugins: [parserBabel, parserHtml],\n    ...prettierOptions,\n  });\n\nexport function demoFormat(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\n/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346\n *\n * Appends a hidden input element to allow the component\n * work within and get picked up by a <form>.\n * @param element The element on which the input with be appended.\n * @param name Name of the input.\n * @param value The value of the input.\n * @param disabled Disables the input if true.\n * @param additionalAttributes Additional attributes that should be passed to the input.\n */\nexport const appendHiddenInput = (\n  element: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean,\n  additionalAttributes: Array<{ key: string; value: string }>,\n) => {\n  const input = element.ownerDocument!.createElement('input');\n  input.type = 'hidden';\n  element.appendChild(input);\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n  if (additionalAttributes) {\n    additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));\n  }\n};\n\nexport type Attributes = { [key: string]: any };\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `ion-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n  const attributeObject: Attributes = {};\n\n  attributes.forEach((attr) => {\n    if (el.hasAttribute(attr)) {\n      const value = el.getAttribute(attr);\n      if (value !== null) {\n        attributeObject[attr] = el.getAttribute(attr);\n      }\n      el.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n  let attributesToInherit = ariaAttributes;\n  if (ignoreList && ignoreList.length > 0) {\n    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n  }\n  return inheritAttributes(el, attributesToInherit);\n};\n\n/**\n * Recursively finds the first matching element or child based on a provided condition.\n *\n * @param {ParentNode} parentNode - The starting element or shadow root to search from.\n * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.\n * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.\n * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.\n */\nexport function dfs(\n  parentNode: ParentNode,\n  searchPredicate: (el: HTMLElement) => boolean,\n  pierceShadow = false,\n): HTMLElement | null {\n  if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {\n    return parentNode;\n  }\n\n  const childElements =\n    parentNode instanceof HTMLSlotElement\n      ? parentNode.assignedElements({ flatten: true })\n      : Array.from(parentNode.children);\n\n  if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {\n    childElements.push(...Array.from(parentNode.shadowRoot.children));\n  }\n\n  let foundElement: HTMLElement | null = null;\n  childElements.some((child: HTMLElement) => {\n    foundElement = dfs(child, searchPredicate, pierceShadow);\n    return foundElement !== null;\n  });\n\n  return foundElement;\n}\n\n// A higher-order function to find the nested child of siblings matching a predicate,\n// based on a sibling traversal function (getNextSibling or getPreviousSibling).\nfunction getNestedChildOfSiblingsMatching(\n  element: HTMLElement,\n  searchPredicate: (el: HTMLElement) => boolean,\n  siblingTraversalFn: (el: HTMLElement) => HTMLElement | null,\n): HTMLElement | null {\n  // Start with the sibling of the provided element.\n  let sibling = siblingTraversalFn(element);\n\n  // Iterate through the siblings until there are no more siblings.\n  while (sibling) {\n    // Use the dfs helper function to find the deeply nested child\n    // that matches the given criteria within the current sibling.\n    const nestedChild = dfs(sibling, searchPredicate);\n\n    // If a matching deeply nested child is found, return it.\n    if (nestedChild) {\n      return nestedChild;\n    }\n\n    // Move on to the next sibling.\n    sibling = siblingTraversalFn(sibling);\n  }\n\n  // If no matching deeply nested child is found, return null.\n  return null;\n}\n\n// Functions to get the next and previous sibling elements.\nconst getNextSibling = (element: HTMLElement) => element.nextElementSibling as HTMLElement;\nconst getPreviousSibling = (element: HTMLElement) => element.previousElementSibling as HTMLElement;\n\n/**\n * Searches for a next sibling element that has a nested child element matching the provided search predicate.\n * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.\n *\n * @param {HTMLElement} element - The starting element to begin the search from.\n * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.\n * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.\n *\n * @example\n * // HTML structure:\n * // <div>\n * //   <h1>Heading 1</h1>\n * //   <ul role=\"list\">\n * //     <li>Item 1</li>\n * //   </ul>\n * // </div>\n * // <div>\n * //   <h2>Heading 2</h2>\n * //   <ul role=\"list\">\n * //     <li>Item 2</li>\n * //   </ul>\n * // </div>\n *\n * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';\n * const startingElement = document.querySelector('[role=\"list\"]');\n * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);\n * console.log(headingEl); // Logs the <h2>Heading 2</h2> element\n */\nexport const getNextNestedChildOfSiblingsMatching = (\n  element: HTMLElement,\n  searchPredicate: (el: HTMLElement) => boolean,\n) => getNestedChildOfSiblingsMatching(element, searchPredicate, getNextSibling);\n\n/**\n * Searches for a previous sibling element that has a nested child element matching the provided search predicate.\n * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.\n *\n * @param {HTMLElement} element - The starting element to begin the search from.\n * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.\n * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.\n *\n * @example\n * // HTML structure:\n * // <div>\n * //   <h1>Heading 1</h1>\n * //   <ul role=\"list\">\n * //     <li>Item 1</li>\n * //   </ul>\n * // </div>\n * // <div>\n * //   <h2>Heading 2</h2>\n * //   <ul role=\"list\">\n * //     <li>Item 2</li>\n * //   </ul>\n * // </div>\n *\n * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';\n * const startingElement = document.querySelector('[role=\"list\"]');\n * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);\n * console.log(headingEl); // Logs the <h2>Heading 2</h2> element\n */\nexport const getPreviousNestedChildOfSiblingsMatching = (\n  element: HTMLElement,\n  searchPredicate: (el: HTMLElement) => boolean,\n) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);\n\n/**\n * Checks if the given element is a heading element (h1-h6) or has a role of \"heading\".\n *\n * @param {HTMLElement} el - The element to check.\n * @returns {boolean} - True if the element is a heading element, false otherwise.\n */\nexport const isHeadingElement = (el: HTMLElement) => {\n  const tagName = el.tagName.toLowerCase();\n  const role = el.getAttribute('role');\n  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';\n};\n\n/**\n * Loop through the children and add the 'listitem' role if needed.\n * @param {Node} targetNode The node being updated.\n * */\nexport const updateListChildrenRoles = (targetNode: Node): void => {\n  targetNode.childNodes.forEach((node: Node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      const element = node as Element;\n      if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {\n        element.setAttribute('role', 'listitem');\n      }\n    }\n  });\n};\n\nexport function isFocusable(element: HTMLElement): boolean {\n  if (!element || element.nodeType !== Node.ELEMENT_NODE) {\n    return false;\n  }\n\n  const focusableSelectors = [\n    'a[href]',\n    'area[href]',\n    'input:not([disabled]):not([type=\"hidden\"])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    '[tabindex]:not([tabindex=\"-1\"])',\n  ];\n\n  // Check if the element matches any of the focusable elements selectors\n  if (focusableSelectors.some((selector) => element.matches(selector))) {\n    return true;\n  }\n\n  // Check if the element is contenteditable\n  if (element.hasAttribute('contenteditable')) {\n    const contentEditableValue = element.getAttribute('contenteditable').toLowerCase();\n    if (contentEditableValue === 'true' || contentEditableValue === '') {\n      return true;\n    }\n  }\n\n  return false;\n}\n"]}

package/dist/components/core-header-item.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const coreHeaderItemCss = ":host{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--sdds-header-height);height:var(--sdds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
+
+const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
+  }
+  static get style() { return coreHeaderItemCss; }
+}, [1, "sdds-core-header-item"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-core-header-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CoreHeaderItem);
+      }
+      break;
+  } });
+}
+
+export { CoreHeaderItem as C, defineCustomElement as d };
+
+//# sourceMappingURL=core-header-item.js.map

package/dist/components/core-header-item.js.map

@@ -0,0 +1 @@
+{"file":"core-header-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,8YAA8Y;;MCO3Z,cAAc;;;;;;EACzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,IACf,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/core-header-item/core-header-item.scss?tag=sdds-core-header-item&encapsulation=shadow","./src/components/header/webcomponent/core-header-item/core-header-item.tsx"],"sourcesContent":["@import '../../../../mixins/box-sizing';\n\n:host {\n  font: var(--sdds-headline-07);\n  letter-spacing: var(--sdds-headline-07-ls);\n  color: var(--sdds-header-nav-item-color);\n\n  .item {\n    all: unset;\n    @include sdds-box-sizing;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: var(--sdds-header-height);\n    height: var(--sdds-header-height);\n    margin: 0;\n  }\n\n  slot {\n    white-space: nowrap;\n  }\n\n  ::slotted(svg) {\n    font-size: 20px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-core-header-item',\n  styleUrl: 'core-header-item.scss',\n  shadow: true,\n})\nexport class CoreHeaderItem {\n  render() {\n    return (\n      <Host>\n        <div class=\"item\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}