@getflip/swirl-components-react 0.3.0 → 0.5.0

package/dist/{flip-checkbox.entry.56d1e132.js → flip-checkbox.entry.4af2f2b4.js}

@@ -1,17 +1,20 @@
-import { r as a, c as r, h as c, H as t } from "./index.0ccdd659.js";
+import { r, c as a, h as c, H as t } from "./index.ac96d2b2.js";
 import { c as n } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const x = `.sc-flip-checkbox-h{display:inline-flex}.sc-flip-checkbox-h *.sc-flip-checkbox{box-sizing:border-box}.checkbox.sc-flip-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-flip-checkbox:focus-within .checkbox__box.sc-flip-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),
-      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-flip-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:transparent}.checkbox--disabled.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__label.sc-flip-checkbox,.checkbox--disabled.sc-flip-checkbox .checkbox__description.sc-flip-checkbox{color:var(--s-text-disabled)}.checkbox__control.sc-flip-checkbox{position:relative;top:0.125rem;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:var(--s-action-neutral-hovered)}.checkbox__box.sc-flip-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-flip-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-flip-checkbox>*.sc-flip-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-flip-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-flip-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-flip-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-4);align-items:flex-start;flex-direction:column}.checkbox__label.sc-flip-checkbox{font-weight:var(--s-font-weight-medium)}.checkbox__description.sc-flip-checkbox{color:var(--s-text-subdued)}`, k = class {
+const k = `.sc-flip-checkbox-h{display:inline-flex}.sc-flip-checkbox-h *.sc-flip-checkbox{box-sizing:border-box}.checkbox.sc-flip-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-flip-checkbox:focus-within .checkbox__box.sc-flip-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),
+      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-flip-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:transparent}.checkbox--disabled.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__label.sc-flip-checkbox,.checkbox--disabled.sc-flip-checkbox .checkbox__description.sc-flip-checkbox{color:var(--s-text-disabled)}.checkbox__control.sc-flip-checkbox{position:relative;top:0.125rem;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:var(--s-action-neutral-hovered)}.checkbox__box.sc-flip-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-flip-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-flip-checkbox>*.sc-flip-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-flip-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-flip-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-flip-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-4);align-items:flex-start;flex-direction:column}.checkbox__label.sc-flip-checkbox{font-weight:var(--s-font-weight-medium)}.checkbox__description.sc-flip-checkbox{color:var(--s-text-subdued)}`, x = class {
   constructor(e) {
-    a(this, e), this.valueChange = r(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.onChange = () => {
+    r(this, e), this.valueChange = a(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.onChange = () => {
       this.checked = !(this.checked === !0 || this.checked === "true"), this.valueChange.emit(this.checked);
     };
   }
+  getAriaCheckedLabel(e, o) {
+    return e ? "true" : o ? "false" : "mixed";
+  }
   render() {
-    const e = this.checked === !1 || this.checked === "false", o = this.checked === !0 || this.checked === "true", i = this.checked === "indeterminate", h = Boolean(this.label) || Boolean(this.description), s = o ? "true" : e ? "false" : "mixed", l = this.invalid === !0 ? "true" : this.invalid === !1 ? "false" : void 0, b = n("checkbox", {
+    const e = this.checked === !1 || this.checked === "false", o = this.checked === !0 || this.checked === "true", i = this.checked === "indeterminate", h = Boolean(this.label) || Boolean(this.description), s = this.getAriaCheckedLabel(o, e), l = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, b = n("checkbox", {
       "checkbox--checked": o,
       "checkbox--disabled": this.disabled,
       "checkbox--indeterminate": i,
@@ -21,7 +24,7 @@ const x = `.sc-flip-checkbox-h{display:inline-flex}.sc-flip-checkbox-h *.sc-flip
     return c(t, null, c("label", { class: b, htmlFor: this.inputId }, c("span", { class: "checkbox__control" }, c("flip-visually-hidden", null, c("input", { "aria-checked": s, "aria-describedby": this.flipAriaDescribedby, "aria-invalid": l, checked: o, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: i, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { "aria-hidden": "true", class: "checkbox__box" }, c("span", { class: "checkbox__icon" }, o && c("flip-icon-check-strong", null), i && c("span", { class: "checkbox__indeterminate-icon" })))), h && c("span", { class: "checkbox__label-container" }, this.label && c("span", { class: "checkbox__label" }, this.label), this.description && c("span", { class: "checkbox__description" }, this.description))));
   }
 };
-k.style = x;
+x.style = k;
 export {
-  k as flip_checkbox
+  x as flip_checkbox
 };

package/dist/{flip-chip.entry.e2be5143.js → flip-chip.entry.9e153968.js}

@@ -1,4 +1,4 @@
-import { r as s, h as e, H as c } from "./index.0ccdd659.js";
+import { r as s, h as e, H as c } from "./index.ac96d2b2.js";
 import { c as n } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/flip-console-layout.entry.940ff9f8.js

@@ -0,0 +1,22 @@
+import { r as l, c as t, h as a, H as i } from "./index.ac96d2b2.js";
+import "react";
+import "react-dom";
+const s = `:host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:20rem 1fr;grid-template-areas:"sidebar main"}.console-layout__sidebar{display:grid;overflow:auto;width:100%;height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);grid-template-rows:auto 1fr auto;grid-template-areas:"header"
+    "navigation"
+    "user";grid-area:sidebar}.console-layout__header{position:sticky;top:0;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{position:sticky;bottom:0;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"
+    "content"}.console-layout__app-bar{position:sticky;top:0;display:flex;min-width:0;padding-right:2.5rem;padding-left:2.5rem;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}.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{padding:2.5rem;background-color:var(--s-background-default);grid-area:content}.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:2.5rem;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__subheading{margin-top:var(--s-space-8)}`, n = class {
+  constructor(e) {
+    l(this, e), this.backButtonClick = t(this, "backButtonClick", 7), this.helpButtonClick = t(this, "helpButtonClick", 7), this.backButonLabel = "Back", this.helpButonLabel = "Help", this.logoText = "Admin", this.navigationLabel = "Main", this.onBackButtonClick = (o) => {
+      this.backButtonClick.emit(o);
+    }, this.onHelpButtonClick = (o) => {
+      this.helpButtonClick.emit(o);
+    };
+  }
+  render() {
+    return a(i, null, a("div", { class: "console-layout" }, a("div", { class: "console-layout__sidebar" }, a("header", { class: "console-layout__header" }, a("div", { class: "console-layout__logo" }, a("svg", { class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, a("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" }), a("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" }), a("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" }), a("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), a("flip-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), a("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, a("slot", { name: "navigation" })), a("div", { class: "console-layout__user" }, a("slot", { name: "user" }))), a("main", { "aria-labelledby": "app-name", class: "console-layout__main" }, a("header", { class: "console-layout__app-bar" }, a("flip-heading", { as: "h1", class: "console-layout__app-name", headingId: "app-name", level: 4, text: this.appName }), this.showHelpButton && a("flip-button", { class: "console-layout__help-button", hideLabel: !0, icon: "<flip-icon-help></flip-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick, variant: "flat" })), a("section", { "aria-labelledby": "heading", class: "console-layout__content" }, a("header", { class: "console-layout__content-header" }, this.showBackButton && a("flip-button", { class: "console-layout__back-button", hideLabel: !0, icon: "<flip-icon-arrow-back></flip-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick }), a("div", null, a("flip-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && a("flip-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading))), a("div", { class: "console-layout__integration" }, a("slot", { name: "content" }))))));
+  }
+};
+n.style = s;
+export {
+  n as flip_console_layout
+};

package/dist/{flip-date-input.entry.2d5088ea.js → flip-date-input.entry.dce529bc.js}

@@ -1,4 +1,4 @@
-import { r as Co, c as No, h as F, H as Io } from "./index.0ccdd659.js";
+import { r as Co, c as No, h as F, H as Io } from "./index.ac96d2b2.js";
 import { c as Uo, a as Yo } from "./_commonjsHelpers-44457d8d.ba94af77.js";
 import "react";
 import "react-dom";
@@ -5418,7 +5418,9 @@ var fl = Uo(function(t, e) {
 const cl = ".sc-flip-date-input-h{display:flex;width:100%}.sc-flip-date-input-h *.sc-flip-date-input{box-sizing:border-box}.date-input.sc-flip-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__input.sc-flip-date-input{display:inline-flex;width:100%;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-flip-date-input:focus{outline:none}.date-input__input.sc-flip-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}.date-input__date-picker-button.sc-flip-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-flip-date-input:focus{outline-color:var(--s-focus-default)}.date-input__date-picker-button.sc-flip-date-input:disabled{cursor:default;color:var(--s-icon-disabled)}", Et = "yyyy-MM-dd", ll = class {
   constructor(t) {
     Co(this, t), this.valueChange = No(this, "valueChange", 7), this.datePickerLabel = "Date picker", this.format = "yyyy-MM-dd", this.placeholder = "yyyy-mm-dd", this.onChange = (e) => {
-      const r = e.target.value, n = ho(r, this.format, new Date()), o = new RegExp(`^${this.format.replace(/y|d|M/g, "\\d")}$`);
+      const r = e.target.value;
+      r === "" && (this.value = void 0, this.valueChange.emit(void 0));
+      const n = ho(r, this.format, new Date()), o = new RegExp(`^${this.format.replace(/[ydM]/g, "\\d")}$`);
       if (!Boolean(r.match(o)) || !Dt(n))
         return;
       const a = Rt(n, Et);
@@ -5454,11 +5456,11 @@ const cl = ".sc-flip-date-input-h{display:flex;width:100%}.sc-flip-date-input-h
   setupMask() {
     var t;
     (t = this.mask) === null || t === void 0 || t.destroy(), this.mask = fl.create(`#${this.id}`, {
-      mask: this.format.replace(/y|d|M/g, "#")
+      mask: this.format.replace(/[ydM]/g, "#")
     });
   }
   render() {
-    const t = this.invalid === !0 ? "true" : this.invalid === !1 ? "false" : void 0, e = Boolean(this.value) ? ho(this.value, Et, new Date()) : void 0, r = Dt(e) ? Rt(e, this.format) : void 0;
+    const t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = Boolean(this.value) ? ho(this.value, Et, new Date()) : void 0, r = Dt(e) ? Rt(e, this.format) : void 0;
     return F(Io, null, F("div", { class: "date-input" }, F("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": t, 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, required: this.required, type: "text", value: r }), F("button", { "aria-hidden": "true", class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, tabIndex: -1, type: "button" }, F("flip-icon-today", null))), !this.disabled && F("flip-popover", { label: this.datePickerLabel, placement: "bottom-end", popoverId: "popover", ref: (n) => this.pickerPopover = n, trigger: `${this.id}-trigger` }, F("flip-date-picker", { locale: this.locale, onValueChange: this.onPickDate, value: e })));
   }
   static get watchers() {