@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/components/swirl-columns.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const swirlColumnsCss = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}";
+
+const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.columns = "repeat(3, minmax(0, 1fr))";
+    this.spacing = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "columns", style: {
+        gridTemplateColumns: this.columns,
+        gap: `var(--s-space-${this.spacing})`,
+      } }, h("slot", null))));
+  }
+  static get style() { return swirlColumnsCss; }
+}, [1, "swirl-columns", {
+    "columns": [1],
+    "spacing": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-columns"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-columns":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlColumns$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlColumns = SwirlColumns$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlColumns, defineCustomElement };

package/dist/components/swirl-console-layout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlConsoleLayout extends Components.SwirlConsoleLayout, HTMLElement {}
+export const SwirlConsoleLayout: {
+  prototype: SwirlConsoleLayout;
+  new (): SwirlConsoleLayout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-console-layout.js

@@ -0,0 +1,187 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport } from './utils.js';
+import { d as defineCustomElement$4 } from './swirl-button2.js';
+import { d as defineCustomElement$3 } from './swirl-heading2.js';
+import { d as defineCustomElement$2 } from './swirl-text2.js';
+
+const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}";
+
+const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsoleLayout extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.backButtonClick = createEvent(this, "backButtonClick", 7);
+    this.helpButtonClick = createEvent(this, "helpButtonClick", 7);
+    this.onBackButtonClick = (event) => {
+      this.backButtonClick.emit(event);
+    };
+    this.onHelpButtonClick = (event) => {
+      this.helpButtonClick.emit(event);
+    };
+    this.onMobileNavigationToggleClick = () => {
+      this.toggleSidebar();
+    };
+    this.onClick = (event) => {
+      const target = event.target;
+      const clickOnToggle = Boolean(target.closest(".console-layout__mobile-navigation-button"));
+      const clickOnOverlay = target.closest("[slot]")?.slot === "overlays";
+      const clickInsideSidebar = event.composedPath().includes(this.sidebarEl);
+      if (!clickInsideSidebar &&
+        !clickOnToggle &&
+        !clickOnOverlay &&
+        this.sidebarActive) {
+        this.deactivateSidebar();
+      }
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape" && this.sidebarActive) {
+        this.deactivateSidebar();
+      }
+    };
+    this.appName = undefined;
+    this.backButonLabel = "Back";
+    this.heading = undefined;
+    this.helpButonLabel = "Help";
+    this.hideNavigationButtonLabel = "Hide main navigation";
+    this.logoText = "Admin";
+    this.navigationLabel = "Main";
+    this.maxContentWidth = undefined;
+    this.showBackButton = undefined;
+    this.showHelpButton = undefined;
+    this.showNavigationButtonLabel = "Show main navigation";
+    this.subheading = undefined;
+    this.sidebarActive = undefined;
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      if (!isMobileViewport()) {
+        this.activateSidebar();
+      }
+      else {
+        this.deactivateSidebar();
+      }
+    });
+  }
+  onWindowResize() {
+    const mobileViewport = isMobileViewport();
+    if (!mobileViewport && !this.sidebarActive) {
+      this.activateSidebar();
+    }
+    else if (mobileViewport) {
+      this.deactivateSidebar();
+    }
+  }
+  /**
+   * Toggle the mobile navigation visibility.
+   */
+  async toggleSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+    else {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Show the mobile navigation.
+   */
+  async showSidebar() {
+    if (!this.sidebarActive) {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Hide the mobile navigation.
+   */
+  async hideSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+  }
+  activateSidebar() {
+    this.sidebarActive = true;
+    this.sidebarEl.removeAttribute("inert");
+    if (isMobileViewport()) {
+      this.el.querySelector("swirl-tree-navigation-item")?.focus();
+    }
+  }
+  deactivateSidebar() {
+    this.sidebarActive = false;
+    if (isMobileViewport()) {
+      this.sidebarEl.setAttribute("inert", "");
+    }
+  }
+  render() {
+    const contentStyles = Boolean(this.maxContentWidth)
+      ? {
+        maxWidth: this.maxContentWidth,
+        justifySelf: "center",
+        width: "100%",
+      }
+      : undefined;
+    const className = classnames("console-layout", {
+      "console-layout--sidebar-active": this.sidebarActive,
+      "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
+    });
+    return (h(Host, null, h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { class: "console-layout__header" }, h("div", { class: "console-layout__logo" }, h("svg", { class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { name: "navigation" })), h("div", { class: "console-layout__user" }, h("slot", { name: "user" }))), h("main", { "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { class: "console-layout__app-bar" }, h("span", { class: "console-layout__mobile-navigation-button" }, h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        ? "<swirl-icon-close></swirl-icon-close>"
+        : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
+        ? this.hideNavigationButtonLabel
+        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { class: "console-layout__heading-container" }, h("swirl-heading", { as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { class: "console-layout__heading-container" }, h("slot", { name: "heading" }))), h("div", { class: "console-layout__content-header-tools" }, h("slot", { name: "content-header-tools" }))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
+  }
+  get el() { return this; }
+  static get style() { return swirlConsoleLayoutCss; }
+}, [1, "swirl-console-layout", {
+    "appName": [1, "app-name"],
+    "backButonLabel": [1, "back-buton-label"],
+    "heading": [1],
+    "helpButonLabel": [1, "help-buton-label"],
+    "hideNavigationButtonLabel": [1, "hide-navigation-button-label"],
+    "logoText": [1, "logo-text"],
+    "navigationLabel": [1, "navigation-label"],
+    "maxContentWidth": [1, "max-content-width"],
+    "showBackButton": [4, "show-back-button"],
+    "showHelpButton": [4, "show-help-button"],
+    "showNavigationButtonLabel": [1, "show-navigation-button-label"],
+    "subheading": [1],
+    "sidebarActive": [32],
+    "toggleSidebar": [64],
+    "showSidebar": [64],
+    "hideSidebar": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-console-layout", "swirl-button", "swirl-heading", "swirl-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-console-layout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlConsoleLayout$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlConsoleLayout = SwirlConsoleLayout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlConsoleLayout, defineCustomElement };

package/dist/components/swirl-date-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlDateInput extends Components.SwirlDateInput, HTMLElement {}
+export const SwirlDateInput: {
+  prototype: SwirlDateInput;
+  new (): SwirlDateInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-date-input.js

@@ -0,0 +1,195 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { p as parse, i as isValid, f as format, m as maska } from './maska.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+import { d as defineCustomElement$6 } from './swirl-date-picker2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-today2.js';
+import { d as defineCustomElement$4 } from './swirl-popover2.js';
+import { d as defineCustomElement$3 } from './swirl-popover-trigger2.js';
+import { d as defineCustomElement$2 } from './wc-datepicker2.js';
+
+const swirlDateInputCss = ".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}";
+
+const internalDateFormat = "yyyy-MM-dd";
+const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.invalidInput = createEvent(this, "invalidInput", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.updateIconSize(event.matches);
+    };
+    this.onChange = (event) => {
+      const value = event.target.value;
+      if (value === "") {
+        this.value = undefined;
+        this.valueChange.emit(undefined);
+      }
+      const newDate = parse(value, this.format, new Date());
+      // First, escape any backslashes in the format string
+      const escapedFormat = this.format.replace(/\\/g, "\\\\");
+      // Then construct the RegExp using the escaped format string
+      const formatRegExp = new RegExp(`^${escapedFormat.replace(/[ydM]/g, "\\d")}$`);
+      if (!Boolean(value.match(formatRegExp))) {
+        return;
+      }
+      if (!isValid(newDate)) {
+        this.invalidInput.emit(value);
+        return;
+      }
+      const newValue = format(newDate, internalDateFormat);
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.onPickDate = (event) => {
+      const newDateValue = event.detail;
+      const newValue = format(newDateValue, internalDateFormat);
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+      this.pickerPopover.close();
+    };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.datePickerLabel = "Date picker";
+    this.datePickerTriggerLabel = "Open date picker";
+    this.disabled = undefined;
+    this.format = "yyyy-MM-dd";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.labels = undefined;
+    this.locale = "en-US";
+    this.placeholder = "yyyy-mm-dd";
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.iconSize = 24;
+  }
+  componentWillLoad() {
+    const index = Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);
+    this.id = `swirl-date-input-${index}`;
+  }
+  componentDidLoad() {
+    this.setupMask();
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.mask?.destroy();
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  setupMask() {
+    this.mask?.destroy();
+    this.mask = maska.create(`#${this.id}`, {
+      mask: this.format.replace(/[ydM]/g, "#"),
+    });
+  }
+  render() {
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const dateValue = Boolean(this.value)
+      ? parse(this.value, internalDateFormat, new Date())
+      : undefined;
+    const displayValue = isValid(dateValue)
+      ? format(dateValue, this.format)
+      : undefined;
+    const className = classnames("date-input", {
+      "date-input--inline": this.inline,
+    });
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "format": ["watchFormat"]
+  }; }
+  static get style() { return swirlDateInputCss; }
+}, [2, "swirl-date-input", {
+    "autoFocus": [4, "auto-focus"],
+    "autoSelect": [4, "auto-select"],
+    "datePickerLabel": [1, "date-picker-label"],
+    "datePickerTriggerLabel": [1, "date-picker-trigger-label"],
+    "disabled": [4],
+    "format": [1],
+    "inline": [4],
+    "invalid": [4],
+    "labels": [16],
+    "locale": [1],
+    "placeholder": [1],
+    "required": [4],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "value": [1537],
+    "iconSize": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-date-input", "swirl-date-picker", "swirl-icon-today", "swirl-popover", "swirl-popover-trigger", "wc-datepicker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-date-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlDateInput$1);
+      }
+      break;
+    case "swirl-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-icon-today":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-popover-trigger":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "wc-datepicker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlDateInput = SwirlDateInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlDateInput, defineCustomElement };

package/dist/components/swirl-date-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlDatePicker extends Components.SwirlDatePicker, HTMLElement {}
+export const SwirlDatePicker: {
+  prototype: SwirlDatePicker;
+  new (): SwirlDatePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-date-picker.js

@@ -0,0 +1,6 @@
+import { S as SwirlDatePicker$1, d as defineCustomElement$1 } from './swirl-date-picker2.js';
+
+const SwirlDatePicker = SwirlDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlDatePicker, defineCustomElement };

package/dist/components/swirl-date-picker2.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { r as removeTimezoneOffset } from './utils.js';
+import { d as defineCustomElement$1 } from './wc-datepicker2.js';
+
+const swirlDatePickerCss = ":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:var(--s-surface-overlay-default);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:\"\";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-surface-overlay-hovered)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular);aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer;aspect-ratio:1}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:\"\";inset:0}.date-picker__date:hover:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}";
+
+const SwirlDatePicker = /*@__PURE__*/ proxyCustomElement(class SwirlDatePicker extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 3);
+    this.onClick = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    this.onSelectDate = (event) => {
+      if (typeof event.detail === "string") {
+        this.valueChange.emit(removeTimezoneOffset(new Date(event.detail)));
+      }
+      else {
+        this.valueChange.emit(event.detail.map((date) => removeTimezoneOffset(new Date(date))));
+      }
+    };
+    this.labels = undefined;
+    this.locale = "en-US";
+    this.range = undefined;
+    this.startDate = undefined;
+    this.value = undefined;
+  }
+  render() {
+    const startDate = this.startDate instanceof Date ? this.startDate.toISOString() : undefined;
+    return (h(Host, { onClick: this.onClick }, h("wc-datepicker", { elementClassName: "date-picker", labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+  }
+  get el() { return this; }
+  static get style() { return swirlDatePickerCss; }
+}, [1, "swirl-date-picker", {
+    "labels": [16],
+    "locale": [1],
+    "range": [4],
+    "startDate": [16],
+    "value": [1040]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-date-picker", "wc-datepicker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-date-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlDatePicker);
+      }
+      break;
+    case "wc-datepicker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlDatePicker as S, defineCustomElement as d };

package/dist/components/swirl-description-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlDescriptionListItem extends Components.SwirlDescriptionListItem, HTMLElement {}
+export const SwirlDescriptionListItem: {
+  prototype: SwirlDescriptionListItem;
+  new (): SwirlDescriptionListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-description-list-item.js

@@ -0,0 +1,62 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-info2.js';
+import { d as defineCustomElement$2 } from './swirl-tooltip2.js';
+
+const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;vertical-align:middle;margin-left:var(--s-space-4)}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{flex-shrink:0}";
+
+const SwirlDescriptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDescriptionListItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.bordered = true;
+    this.maxWidth = undefined;
+    this.term = undefined;
+    this.tooltip = undefined;
+  }
+  render() {
+    const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
+    const className = classnames("description-list-item", {
+      "description-list-item--bordered": this.bordered,
+      "description-list-item--has-tools": hasTools,
+    });
+    return (h(Host, { role: "listitem" }, h("div", { class: className, part: "description-list-item", role: "group" }, h("div", { class: "description-list-item__text-container" }, h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { class: "description-list-item__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "right" }, h("swirl-icon-info", { size: 16 }))))), h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", null))), h("div", { class: "description-list-item__tools" }, h("slot", { name: "tools" })))));
+  }
+  get el() { return this; }
+  static get style() { return swirlDescriptionListItemCss; }
+}, [1, "swirl-description-list-item", {
+    "bordered": [4],
+    "maxWidth": [1, "max-width"],
+    "term": [1],
+    "tooltip": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-description-list-item", "swirl-icon-info", "swirl-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-description-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlDescriptionListItem$1);
+      }
+      break;
+    case "swirl-icon-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlDescriptionListItem = SwirlDescriptionListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlDescriptionListItem, defineCustomElement };

package/dist/components/swirl-description-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlDescriptionList extends Components.SwirlDescriptionList, HTMLElement {}
+export const SwirlDescriptionList: {
+  prototype: SwirlDescriptionList;
+  new (): SwirlDescriptionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;