@cal.macconnachie/web-components 2.1.6 → 2.2.0

package/dist/index.d.ts

@@ -291,6 +291,7 @@ export declare class BaseSelect extends BaseElement {
     size: SelectSize;
     options: SelectOption[];
     private isOpen;
+    private parsedFromSlot;
     private searchQuery;
     private highlightedIndex;
     private isFlipped;
@@ -299,6 +300,8 @@ export declare class BaseSelect extends BaseElement {
     private selectDisplay;
     private dropdownElement;
     private selectId;
+    connectedCallback(): void;
+    private parseSlottedOptions;
     static styles: CSSResult;
     private get selectedOption();
     private get displayValue();

package/dist/index.js

@@ -633,7 +633,7 @@ var Ds = Object.defineProperty, Pr = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Ds(e, t, s), s;
 };
-class I extends Ue {
+class L extends Ue {
   constructor() {
     super(...arguments), this.theme = "light", this.storageKey = "theme-preference", this.boundThemeChangeHandler = this.handleGlobalThemeChange.bind(this);
   }
@@ -661,11 +661,11 @@ class I extends Ue {
 }
 Pr([
   u({ type: String, attribute: "data-theme", reflect: !0 })
-], I.prototype, "theme");
+], L.prototype, "theme");
 Pr([
   u({ type: String, attribute: "storage-key" })
-], I.prototype, "storageKey");
-const D = ({
+], L.prototype, "storageKey");
+const z = ({
   name: r,
   element: e
 }) => {
@@ -1449,11 +1449,11 @@ const Us = [
   "refresh_token",
   "token_type",
   "expires_in"
-], Ns = () => D({
+], Ns = () => z({
   name: "auth-form",
   element: E
 });
-class E extends I {
+class E extends L {
   constructor() {
     super(...arguments), this.initialMode = "signin", this.logoUrl = "", this.oauthDomain = "", this.oauthRegion = "", this.oauthUserPoolId = "", this.oauthClientId = "", this.oauthRedirectUri = "", this.oauthSpaDomain = "", this.disableSignup = !1, this.mockMode = !1, this.mode = "signin", this.resetStep = "none", this.signupStep = "form", this.isLoading = !1, this.isLoggedIn = !1, this.email = "", this.password = "", this.givenName = "", this.familyName = "", this.newPassword = "", this.confirmPassword = "", this.notice = "", this.error = "", this.errors = {}, this.userEmail = null, this.otpDigits = ["", "", "", "", "", ""], this.signupOtpDigits = ["", "", "", "", "", ""], this.hasHandledOAuthCallback = !1, this.handleAuthRefreshFailed = () => {
       this.isLoggedIn = !1, this.userEmail = null;
@@ -2412,11 +2412,11 @@ var qs = Object.defineProperty, we = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && qs(e, t, s), s;
 };
-const Fs = () => D({
+const Fs = () => z({
   name: "base-button",
   element: de
 });
-class de extends I {
+class de extends L {
   constructor() {
     super(...arguments), this.size = "md", this.variant = "primary", this.hover = void 0, this.disabled = !1, this.fullWidth = !1, this.loading = !1, this.type = "button";
   }
@@ -2914,11 +2914,11 @@ var Hs = Object.defineProperty, He = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Hs(e, t, s), s;
 };
-const js = () => D({
+const js = () => z({
   name: "base-card",
   element: Ee
 });
-class Ee extends I {
+class Ee extends L {
   constructor() {
     super(...arguments), this.variant = "default", this.padding = "none", this.hoverable = !1, this.expandable = !1, this.isExpanded = !1;
   }
@@ -3186,11 +3186,11 @@ var Vs = Object.defineProperty, R = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Vs(e, t, s), s;
 };
-const Zs = () => D({
+const Zs = () => z({
   name: "base-date-picker",
   element: P
 });
-class P extends I {
+class P extends L {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select a date", this.required = !1, this.disabled = !1, this.size = "md", this.isOpen = !1, this.currentMonth = (/* @__PURE__ */ new Date()).getMonth(), this.currentYear = (/* @__PURE__ */ new Date()).getFullYear(), this.showMonthPicker = !1, this.showYearPicker = !1, this.yearRangeStart = (/* @__PURE__ */ new Date()).getFullYear() - 5, this.isFlipped = !1, this.alignRight = !1, this.inputId = `date-picker-${Math.random().toString(36).substr(2, 9)}`, this.weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], this.monthNames = [
       "Jan",
@@ -4029,11 +4029,11 @@ var Ys = Object.defineProperty, B = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Ys(e, t, s), s;
 };
-const Ws = () => D({
+const Ws = () => z({
   name: "base-time-picker",
-  element: z
+  element: M
 });
-class z extends I {
+class M extends L {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select a time", this.required = !1, this.disabled = !1, this.size = "md", this.format = "12", this.isOpen = !1, this.selectedHour = 12, this.selectedMinute = 0, this.selectedPeriod = "AM", this.isFlipped = !1, this.alignRight = !1, this.inputId = `time-picker-${Math.random().toString(36).substr(2, 9)}`;
   }
@@ -4489,73 +4489,73 @@ class z extends I {
 }
 B([
   u({ type: String })
-], z.prototype, "value");
+], M.prototype, "value");
 B([
   u({ type: String })
-], z.prototype, "label");
+], M.prototype, "label");
 B([
   u({ type: String })
-], z.prototype, "placeholder");
+], M.prototype, "placeholder");
 B([
   u({ type: Boolean, reflect: !0 })
-], z.prototype, "required");
+], M.prototype, "required");
 B([
   u({ type: Boolean, reflect: !0 })
-], z.prototype, "disabled");
+], M.prototype, "disabled");
 B([
   u({ type: String })
-], z.prototype, "error");
+], M.prototype, "error");
 B([
   u({ type: String })
-], z.prototype, "hint");
+], M.prototype, "hint");
 B([
   u({ type: String })
-], z.prototype, "size");
+], M.prototype, "size");
 B([
   u({ type: String })
-], z.prototype, "format");
+], M.prototype, "format");
 B([
   w()
-], z.prototype, "isOpen");
+], M.prototype, "isOpen");
 B([
   w()
-], z.prototype, "selectedHour");
+], M.prototype, "selectedHour");
 B([
   w()
-], z.prototype, "selectedMinute");
+], M.prototype, "selectedMinute");
 B([
   w()
-], z.prototype, "selectedPeriod");
+], M.prototype, "selectedPeriod");
 B([
   w()
-], z.prototype, "isFlipped");
+], M.prototype, "isFlipped");
 B([
   w()
-], z.prototype, "alignRight");
+], M.prototype, "alignRight");
 B([
   H(".time-display")
-], z.prototype, "timeDisplay");
+], M.prototype, "timeDisplay");
 B([
   H(".time-container")
-], z.prototype, "timeContainer");
+], M.prototype, "timeContainer");
 var Ks = Object.defineProperty, q = (r, e, t, o) => {
   for (var s = void 0, i = r.length - 1, a; i >= 0; i--)
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Ks(e, t, s), s;
 };
 const Js = () => {
-  D({
+  z({
     name: "base-date-picker",
     element: P
-  }), D({
+  }), z({
     name: "base-time-picker",
-    element: z
-  }), D({
+    element: M
+  }), z({
     name: "base-datetime-picker",
     element: U
   });
 };
-class U extends I {
+class U extends L {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select date and time", this.required = !1, this.disabled = !1, this.size = "md", this.format = "12", this.dateValue = "", this.timeValue = "", this.isFocused = !1, this.inputId = `datetime-picker-${Math.random().toString(36).substring(2, 9)}`;
   }
@@ -4839,11 +4839,11 @@ var Xs = Object.defineProperty, Q = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Xs(e, t, s), s;
 };
-const Gs = () => D({
+const Gs = () => z({
   name: "base-drawer",
   element: J
 });
-class J extends I {
+class J extends L {
   constructor() {
     super(...arguments), this.open = !1, this.size = "sm", this.isClosing = !1, this.isVisible = !1, this.isDragging = !1, this.dragStartY = 0, this.dragCurrentY = 0, this.dragStartTime = 0, this.lastDragEndTime = 0, this.transitionDuration = 300, this.boundKeyHandler = (e) => {
       e.key === "Escape" && this.isVisible && this.handleClose();
@@ -5329,11 +5329,11 @@ const ko = /* @__PURE__ */ Object.assign({
   "../../public/icons/sun.svg": yo,
   "../../public/icons/trash-can.svg": wo,
   "../../public/icons/user.svg": xo
-}), So = () => D({
+}), So = () => z({
   name: "base-icon",
   element: Ce
 });
-class Ce extends I {
+class Ce extends L {
   constructor() {
     super(...arguments), this.name = "", this.size = "24px", this.color = "currentColor", this.svgContent = "";
   }
@@ -5411,11 +5411,11 @@ var _o = Object.defineProperty, ee = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && _o(e, t, s), s;
 };
-const Eo = () => D({
+const Eo = () => z({
   name: "base-input",
   element: X
 });
-class X extends I {
+class X extends L {
   constructor() {
     super(...arguments), this.value = "", this.type = "text", this.required = !1, this.disabled = !1, this.size = "md", this.inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
   }
@@ -5671,18 +5671,34 @@ ee([
 ee([
   H("input")
 ], X.prototype, "inputElement");
-var Co = Object.defineProperty, L = (r, e, t, o) => {
+var Co = Object.defineProperty, I = (r, e, t, o) => {
   for (var s = void 0, i = r.length - 1, a; i >= 0; i--)
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Co(e, t, s), s;
 };
-const Ao = () => D({
+const Ao = () => z({
   name: "base-select",
-  element: M
+  element: D
 });
-class M extends I {
+class D extends L {
   constructor() {
-    super(...arguments), this.value = "", this.placeholder = "Select an option", this.required = !1, this.disabled = !1, this.searchable = !1, this.size = "md", this.options = [], this.isOpen = !1, this.searchQuery = "", this.highlightedIndex = -1, this.isFlipped = !1, this.alignRight = !1, this.selectId = `select-${Math.random().toString(36).substr(2, 9)}`;
+    super(...arguments), this.value = "", this.placeholder = "Select an option", this.required = !1, this.disabled = !1, this.searchable = !1, this.size = "md", this.options = [], this.isOpen = !1, this.parsedFromSlot = !1, this.searchQuery = "", this.highlightedIndex = -1, this.isFlipped = !1, this.alignRight = !1, this.selectId = `select-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.parseSlottedOptions();
+  }
+  parseSlottedOptions() {
+    if (this.options.length === 0 && !this.parsedFromSlot) {
+      const e = this.querySelectorAll("option");
+      if (e.length > 0) {
+        this.options = Array.from(e).map((o) => ({
+          label: o.textContent?.trim() || o.value,
+          value: o.value
+        }));
+        const t = Array.from(e).find((o) => o.hasAttribute("selected"));
+        t && !this.value && (this.value = t.value), this.parsedFromSlot = !0;
+      }
+    }
   }
   static {
     this.styles = F`
@@ -5921,6 +5937,11 @@ class M extends I {
       color: var(--color-text-muted);
       line-height: var(--line-height-tight);
     }
+
+    /* Hidden slot for option elements */
+    ::slotted(option) {
+      display: none;
+    }
   `;
   }
   get selectedOption() {
@@ -6098,74 +6119,80 @@ class M extends I {
                 ${this.error}
               </div>
             ` : this.hint ? m` <div class="select-hint">${this.hint}</div> ` : ""}
+
+        <!-- Hidden slot for option elements -->
+        <slot @slotchange=${this.parseSlottedOptions}></slot>
       </div>
     `;
   }
 }
-L([
+I([
   u({ type: String })
-], M.prototype, "value");
-L([
+], D.prototype, "value");
+I([
   u({ type: String })
-], M.prototype, "label");
-L([
+], D.prototype, "label");
+I([
   u({ type: String })
-], M.prototype, "placeholder");
-L([
+], D.prototype, "placeholder");
+I([
   u({ type: Boolean, reflect: !0 })
-], M.prototype, "required");
-L([
+], D.prototype, "required");
+I([
   u({ type: Boolean, reflect: !0 })
-], M.prototype, "disabled");
-L([
+], D.prototype, "disabled");
+I([
   u({ type: Boolean, reflect: !0 })
-], M.prototype, "searchable");
-L([
+], D.prototype, "searchable");
+I([
   u({ type: String })
-], M.prototype, "error");
-L([
+], D.prototype, "error");
+I([
   u({ type: String })
-], M.prototype, "hint");
-L([
+], D.prototype, "hint");
+I([
   u({ type: String })
-], M.prototype, "size");
-L([
+], D.prototype, "size");
+I([
   u({ type: Array })
-], M.prototype, "options");
-L([
+], D.prototype, "options");
+I([
   w()
-], M.prototype, "isOpen");
-L([
+], D.prototype, "isOpen");
+I([
   w()
-], M.prototype, "searchQuery");
-L([
+], D.prototype, "parsedFromSlot");
+I([
   w()
-], M.prototype, "highlightedIndex");
-L([
+], D.prototype, "searchQuery");
+I([
   w()
-], M.prototype, "isFlipped");
-L([
+], D.prototype, "highlightedIndex");
+I([
   w()
-], M.prototype, "alignRight");
-L([
+], D.prototype, "isFlipped");
+I([
+  w()
+], D.prototype, "alignRight");
+I([
   H(".select-input")
-], M.prototype, "selectInput");
-L([
+], D.prototype, "selectInput");
+I([
   H(".select-display")
-], M.prototype, "selectDisplay");
-L([
+], D.prototype, "selectDisplay");
+I([
   H(".dropdown-options")
-], M.prototype, "dropdownElement");
+], D.prototype, "dropdownElement");
 var To = Object.defineProperty, je = (r, e, t, o) => {
   for (var s = void 0, i = r.length - 1, a; i >= 0; i--)
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && To(e, t, s), s;
 };
-const Po = () => D({
+const Po = () => z({
   name: "base-tab",
   element: Ae
 });
-class Ae extends I {
+class Ae extends L {
   constructor() {
     super(...arguments), this.id = "", this.label = "", this.active = !1;
   }
@@ -6244,11 +6271,11 @@ var Oo = Object.defineProperty, ae = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Oo(e, t, s), s;
 };
-const Ro = () => D({
+const Ro = () => z({
   name: "base-tabs",
   element: oe
 });
-class oe extends I {
+class oe extends L {
   constructor() {
     super(...arguments), this.activeTab = "", this.ariaLabel = "Dashboard navigation", this.syncWithHash = !0, this.variant = "sidebar", this.forceExpanded = !1, this.tabs = [], this.isExpanded = !1, this.isMobile = !1, this.boundHashChangeHandler = this.handleHashChange.bind(this), this.boundResizeHandler = this.handleResize.bind(this), this.hasInitialized = !1;
   }
@@ -6933,11 +6960,11 @@ var Do = Object.defineProperty, G = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Do(e, t, s), s;
 };
-const zo = () => D({
+const zo = () => z({
   name: "base-textarea",
   element: Y
 });
-class Y extends I {
+class Y extends L {
   constructor() {
     super(...arguments), this.value = "", this.required = !1, this.disabled = !1, this.size = "md", this.rows = 4, this.resize = "vertical", this.textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
   }
@@ -7235,11 +7262,11 @@ var Mo = Object.defineProperty, Ve = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Mo(e, t, s), s;
 };
-const Io = () => D({
+const Io = () => z({
   name: "base-toast",
   element: Te
 });
-class Te extends I {
+class Te extends L {
   constructor() {
     super(...arguments), this.variant = "default", this.padding = "sm", this.size = "sm", this.dismiss = "2s", this.position = "bottom-center", this.timerStarted = 0, this.timerPausedAt = 0, this.toastTimout = null;
   }
@@ -7685,10 +7712,10 @@ function wa({
   dismiss: o = "2s"
 }) {
   const s = document.createElement("base-toast");
-  s.id = `toast-${Date.now()}`, s.setAttribute("variant", e), s.setAttribute("position", t), s.setAttribute("dismiss", o), s.textContent = r, document.body.appendChild(s), s.show(), s.addEventListener("toast-hidden", () => {
-    s.hide(), setTimeout(() => {
-      s.parentElement && s.remove();
-    }, 500);
+  s.id = `toast-${Date.now()}`, s.setAttribute("id", s.id), s.setAttribute("variant", e), s.setAttribute("position", t), s.setAttribute("dismiss", o), s.textContent = r, document.body.appendChild(s), s.show(), s.addEventListener("toast-hidden", () => {
+    setTimeout(() => {
+      document.getElementById(s.id)?.remove();
+    }, 300);
   });
 }
 var Lo = Object.defineProperty, Ze = (r, e, t, o) => {
@@ -7696,11 +7723,11 @@ var Lo = Object.defineProperty, Ze = (r, e, t, o) => {
     (a = r[i]) && (s = a(e, t, s) || s);
   return s && Lo(e, t, s), s;
 };
-const Bo = () => D({
+const Bo = () => z({
   name: "quantity-select",
   element: Pe
 });
-class Pe extends I {
+class Pe extends L {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.max = 99, this.size = "md", this.allowInput = !0;
   }
@@ -7947,15 +7974,15 @@ var Uo = Object.defineProperty, Ye = (r, e, t, o) => {
   return s && Uo(e, t, s), s;
 };
 const No = () => {
-  D({
+  z({
     name: "base-icon",
     element: Ce
-  }), D({
+  }), z({
     name: "theme-toggle",
     element: Oe
   });
 };
-class Oe extends I {
+class Oe extends L {
   constructor() {
     super(...arguments), this.size = "sm", this.variant = "ghost", this.themes = [
       { theme: "light", icon: "sun" },
@@ -10006,11 +10033,11 @@ export {
   J as BaseDrawer,
   Ce as BaseIcon,
   X as BaseInput,
-  M as BaseSelect,
+  D as BaseSelect,
   Ae as BaseTab,
   oe as BaseTabs,
   Y as BaseTextarea,
-  z as BaseTimePicker,
+  M as BaseTimePicker,
   Te as BaseToast,
   Pe as QuantitySelect,
   Oe as ThemeToggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cal.macconnachie/web-components",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "description": "Web components hosted on a CDN",
   "keywords": [
     "web-components",