@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/p-115c79b6.js

@@ -0,0 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
+var actionArrowDownSmall={"title":"action-arrow-down-small","tags":"action arrow down small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 19.5a2.3 2.3 0 0 1-1.729-.78L.46 7.568a1.847 1.847 0 0 1 2.773-2.439l8.579 9.752a.25.25 0 0 0 .376 0l8.579-9.752a1.847 1.847 0 1 1 2.773 2.439l-9.808 11.148A2.31 2.31 0 0 1 12 19.5z\"/></svg>"};
+
+export { actionArrowDownSmall as a };

package/lib/dist-custom-elements/p-12721178.js

@@ -0,0 +1,57 @@
+/*!
+ * Built with Duet Design System
+ */
+const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
+  childList: true,
+  subtree: true,
+}) => {
+  let mutation;
+  if (typeof MutationObserver !== "undefined") {
+    mutation = new MutationObserver(mutationList => {
+      onChange(changeHandler(mutationList, tagName));
+    });
+    mutation.observe(containerEl, options);
+  }
+  return mutation;
+};
+const watchForOptions = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getSelectedOption);
+};
+const watchForElement = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getElementItem, {
+    childList: true,
+    subtree: true,
+  });
+};
+const getElementItem = (mutationList) => {
+  let addedNode = false;
+  let removedNode = false;
+  mutationList.forEach(mut => {
+    if (mut.addedNodes.length) {
+      addedNode = true;
+    }
+    if (mut.removedNodes.length) {
+      removedNode = true;
+    }
+  });
+  return { addedNode, removedNode, mutationList };
+};
+const getSelectedOption = (mutationList, tagName) => {
+  let newOption;
+  mutationList.forEach(mut => {
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < mut.addedNodes.length; i++) {
+      newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
+    }
+  });
+  return newOption;
+};
+const findCheckedOption = (el, tagName) => {
+  if (el.nodeType !== 1) {
+    return undefined;
+  }
+  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
+  return options.find((o) => o.checked === true);
+};
+
+export { watchForElement as a, findCheckedOption as f, watchForOptions as w };

package/lib/dist-custom-elements/p-166d7b9c.js

@@ -0,0 +1,199 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { m as media_query_large, a as media_query_medium, b as media_query_small } from './p-02305a1e.js';
+import { w as watchForOptions, a as watchForElement } from './p-12721178.js';
+
+const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
+
+function isGridItem(element) {
+  return element.tagName.toLowerCase() === "duet-grid-item";
+}
+const DuetGrid = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_small.replace(/'/g, "")),
+    ];
+    this.distributeFormElement = false;
+    /**
+     * Enable or disable the automatic responsive behaviour of the grid component.
+     * Setting this option to "true" makes sure that contents are stacked vertically
+     * on mobile (575px and under).
+     */
+    this.responsive = false;
+    /**
+     * Switch the breakpoint used to trigger the content stacking. These match to
+     * similar media query tokens: $media-query-small and $media-query-medium.
+     */
+    this.breakpoint = "small";
+    /**
+     * Direction of the grid items.
+     */
+    this.direction = "horizontal";
+    /**
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
+     */
+    this.alignment = "top";
+    /**
+     * Adjusts the horizontal distribution of the grid items.
+     */
+    this.distribution = "default";
+    /**
+     * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
+     */
+    this.mobile = "";
+  }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  async connectedCallback() {
+    const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
+    this.mutationO = watchForOptions(el, "duet-grid-item", () => {
+      this.updateGridItems();
+    });
+    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+      // listen for potential mediaquery changes and reset layout
+      for (let i = 0; i < this.mql.length; i++) {
+        // addEventListener is not available in Stencil hydrate
+        if (this.mql[i].addEventListener) {
+          this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+        }
+      }
+    }
+    this.updateGridItems();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
+    // listen for potential mediaquery changes and reset layout
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+      }
+    }
+  }
+  /**
+   * Local methods
+   */
+  async updateGridItems() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    items.forEach(item => {
+      item.responsive = this.responsive;
+      item.breakpoint = this.breakpoint;
+    });
+  }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    // if layout changes to columns instead of row, remove all padding
+    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight && !hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight || hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-grid": true,
+        "duet-no-stacking": !this.responsive,
+        "duet-grid-align-top": this.alignment === "top",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
+        "duet-grid-align-center": this.alignment === "center",
+        "duet-grid-align-stretch": this.alignment === "stretch",
+        "duet-grid-align-baseline": this.alignment === "baseline",
+        "duet-grid-distribution-left": this.distribution === "left",
+        "duet-grid-distribution-right": this.distribution === "right",
+        "duet-grid-distribution-center": this.distribution === "center",
+        "duet-grid-distribution-between": this.distribution === "space-between",
+        "duet-grid-distribution-around": this.distribution === "space-around",
+        "duet-grid-distribution-evenly": this.distribution === "space-evenly",
+        "duet-grid-mobile-left": this.mobile === "left",
+        "duet-grid-mobile-center": this.mobile === "center",
+        "duet-grid-mobile-right": this.mobile === "right",
+        "duet-grid-direction-horizontal": this.direction === "horizontal",
+        "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-breakpoint-small": this.breakpoint === "small",
+        "duet-grid-breakpoint-medium": this.breakpoint === "medium",
+        "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
+      } }));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "responsive": ["updateGridItems"],
+    "breakpoint": ["updateGridItems"]
+  }; }
+  static get style() { return duetGridCss; }
+}, [2, "duet-grid", {
+    "responsive": [4],
+    "breakpoint": [1],
+    "direction": [1],
+    "alignment": [1],
+    "distribution": [1],
+    "mobile": [1],
+    "distributeFormElement": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetGrid);
+      }
+      break;
+  } });
+}
+
+export { DuetGrid as D, defineCustomElement as d };