@skf-design-system/ui-components 1.0.2-beta.11 → 1.0.2-beta.13

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,27 +1,27 @@
-import { flip as w, offset as E, arrow as $, computePosition as O } from "@floating-ui/dom";
+import { flip as y, offset as $, arrow as E, computePosition as O } from "@floating-ui/dom";
 import { SkfElement as C } from "../../components/skf-element.js";
-import { PopoverController as x } from "../../controllers/popover.controller.js";
-import { uuid as A } from "../../helpers/uuid.js";
+import { PopoverController as T } from "../../controllers/popover.controller.js";
+import { uuid as k } from "../../helpers/uuid.js";
 import { watch as f } from "../../helpers/watch.js";
-import { componentStyles as S } from "../../../styles/component.styles.js";
-import { nothing as P, html as g } from "lit";
-import { property as u, state as c, query as _ } from "lit/decorators.js";
-import { classMap as L } from "lit/directives/class-map.js";
-import { styles as F } from "./popover.styles.js";
-var k = Object.defineProperty, T = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? T(t, o) : t, n = m.length - 1, a; n >= 0; n--)
-    (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
-  return i && e && k(t, o, e), e;
-}, p;
-const s = (p = class extends C {
+import { componentStyles as P } from "../../../styles/component.styles.js";
+import { nothing as _, html as m } from "lit";
+import { property as u, state as c, query as A } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { styles as L } from "./popover.styles.js";
+var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (g, t, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? F(t, s) : t, n = g.length - 1, a; n >= 0; n--)
+    (a = g[n]) && (e = (o ? a(t, s, e) : a(e)) || e);
+  return o && e && x(t, s, e), e;
+}, h;
+const i = (h = class extends C {
   constructor() {
-    super(...arguments), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new x(this), this._toggleOpen = (t) => {
+    super(...arguments), this._skipClosingThisTick = !1, this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new T(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
-      const o = t.newState === "open";
-      this.isOpen = o, this.emit(o ? "skf-opened" : "skf-closed");
+      const s = t.newState === "open";
+      this.isOpen = s, this.emit(s ? "skf-opened" : "skf-closed");
     }, this.handleToggleOpen = async () => {
-      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover.togglePopover(this.isOpen)));
+      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
     }, this.handleAnchorChange = async () => {
       if (!this.anchor) return;
       await this.popoverController.stop(), this.$anchor && this.removeEventListeners();
@@ -29,18 +29,18 @@ const s = (p = class extends C {
       this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
     }, this.reposition = async () => {
       if (!this.$anchor) return;
-      const t = [w(), E(this.offset)];
-      this.arrow && t.push($({ element: this.$arrow }));
-      const { x: o, y: i, middlewareData: e } = await O(this.$anchor, this.$popover, {
+      const t = [y(), $(this.offset)];
+      this.arrow && t.push(E({ element: this.$arrow }));
+      const { x: s, y: o, middlewareData: e } = await O(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
       });
       if (Object.assign(this.$popover.style, {
-        left: `${String(o)}px`,
-        top: `${String(i)}px`
+        left: `${String(s)}px`,
+        top: `${String(o)}px`
       }), this.arrow) {
-        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", h = e.flip?.index, d = e.arrow?.x, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", y = {
+        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", w = {
           bottom: 45,
           right: 135,
           top: 225,
@@ -49,16 +49,18 @@ const s = (p = class extends C {
         Object.assign(this.$arrow.style, {
           top: b,
           [this.placement.includes("left") ? "right" : "left"]: v,
-          [h ? n : a]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(y[a] + (h ? 180 : 0)).toString()}deg`
+          [p ? n : a]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(w[a] + (p ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
     }, this.open = (t) => {
-      t.stopPropagation(), this._toggleOpen(!0), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.openExtended();
-    }, this.close = () => {
-      this.closeExtended(), this._toggleOpen(!1), this.abortEventsController.abort();
+      t.stopPropagation();
+      const o = this.tagName === "SKF-MENU" ? void 0 : !0;
+      this._toggleOpen(o), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.tagName === "SKF-TOOLTIP" && this.$anchor?.setAttribute("aria-describedby", this.id);
+    }, this.close = (t = "") => {
+      console.log("Popover closing", t), this._toggleOpen(!1), this.abortEventsController.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
     };
   }
   connectedCallback() {
@@ -75,24 +77,28 @@ const s = (p = class extends C {
     this.$anchor.addEventListener(
       "focusout",
       (o) => {
-        const i = this.contains(o.relatedTarget);
-        t && i || this.close();
+        const e = this.contains(o.relatedTarget);
+        t && e || this._skipClosingThisTick || this.close("anchor focus out");
       },
       { signal: this.signal }
     ), this.addEventListener(
       "focusout",
       (o) => {
-        const i = this.contains(o.relatedTarget);
-        t && i || this.close();
+        const e = this.contains(o.relatedTarget);
+        t && e || this.close("popover focusout");
       },
       { signal: this.signal }
-    ), this.$popover.id = await A(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
-  }
-  /** @internal add additional open tasks here in UI component */
-  openExtended() {
-  }
-  /** @internal add additional close tasks here in UI component */
-  closeExtended() {
+    ), this._skfPopoverOutsideClickListener ??= (o) => {
+      this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close("outside click") : (this._skipClosingThisTick = !0, setTimeout(() => {
+        this._skipClosingThisTick = !1;
+      }, 0));
+    }, document.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
+      signal: this.signal
+    });
+    const s = window.top && window.self !== window.top;
+    console.log("contains frames", s), s && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
+      signal: this.signal
+    }), this.$popover.id = await k(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
   }
   /** @internal eventlisteners here should implement abort signal */
   addEventListeners(t) {
@@ -103,10 +109,10 @@ const s = (p = class extends C {
     this.abortEventsController.abort();
   }
   render() {
-    return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), g`
-			<div class=${L({ popover: !0, ...p.classMap })} id="root">
+    return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), m`
+			<div class=${S({ popover: !0, ...h.classMap })} id="root">
 				<slot></slot>
-				${this.arrow ? g`<div id="arrow"></div>` : P}
+				${this.arrow ? m`<div id="arrow"></div>` : _}
 			</div>
 		`;
   }
@@ -121,54 +127,54 @@ const s = (p = class extends C {
       '[tabindex]:not([tabindex="-1"])'
     ]).length > 0;
     function e(n, a) {
-      const h = Array.from(
+      const p = Array.from(
         n.querySelectorAll(a.join(", "))
       ), d = Array.from(n.querySelectorAll("*")).map((l) => l.shadowRoot).filter((l) => l !== null);
       for (const l of d)
-        h.push(
+        p.push(
           ...e(l, a)
         );
-      return h;
+      return p;
     }
   }
-}, p.styles = [S, F], p.classMap = {}, p);
+}, h.styles = [P, L], h.classMap = {}, h);
 r([
   u()
-], s.prototype, "placement", 2);
+], i.prototype, "placement", 2);
 r([
   u()
-], s.prototype, "variant", 2);
+], i.prototype, "variant", 2);
 r([
   u()
-], s.prototype, "anchor", 2);
+], i.prototype, "anchor", 2);
 r([
   c()
-], s.prototype, "isOpen", 2);
+], i.prototype, "isOpen", 2);
 r([
   c()
-], s.prototype, "offset", 2);
+], i.prototype, "offset", 2);
 r([
   c()
-], s.prototype, "$anchor", 2);
+], i.prototype, "$anchor", 2);
 r([
   c()
-], s.prototype, "arrow", 2);
+], i.prototype, "arrow", 2);
 r([
   c()
-], s.prototype, "triggerEvent", 2);
+], i.prototype, "triggerEvent", 2);
 r([
-  _("#arrow")
-], s.prototype, "$arrow", 2);
+  A("#arrow")
+], i.prototype, "$arrow", 2);
 r([
   f("isOpen", { afterUpdate: !0 })
-], s.prototype, "handleToggleOpen", 2);
+], i.prototype, "handleToggleOpen", 2);
 r([
   f("$anchor")
-], s.prototype, "handleAnchorEl", 1);
+], i.prototype, "handleAnchorEl", 1);
 r([
   f("anchor")
-], s.prototype, "handleAnchorChange", 2);
-let U = s;
+], i.prototype, "handleAnchorChange", 2);
+let z = i;
 export {
-  U as SkfPopoverBase
+  z as SkfPopoverBase
 };

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -426,8 +426,6 @@ export type SkfDatepickerCalendarProps = {
   "invalid-dates"?: SkfDatepickerCalendar['invalidDates'];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
   "invalidDates"?: SkfDatepickerCalendar['invalidDates'];
-  /** Sets the internal language of the component */
-  "lang"?: SkfDatepickerCalendar['lang'];
   /**  */
   "locale"?: SkfDatepickerCalendar['locale'];
   /**  */
@@ -674,6 +672,8 @@ export type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   "autocomplete"?: SkfInput['autocomplete'];
+  /**  */
+  "autofocus"?: SkfInput['autofocus'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput['customInvalid'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
@@ -945,6 +945,10 @@ export type SkfSelectProps = {
   "lang"?: SkfSelect['lang'];
   /** If defined, limits the number of selectable options */
   "max"?: SkfSelect['max'];
+  /**  */
+  "max-visible-items"?: SkfSelect['maxVisibleItems'];
+  /**  */
+  "maxVisibleItems"?: SkfSelect['maxVisibleItems'];
   /** If defined, sets the minimum number of required options */
   "min"?: SkfSelect['min'];
   /** If true, allows for multiple options to be selected */
@@ -1509,7 +1513,6 @@ export type SkfTooltipProps = {
  * - `eventid`: undefined 
  * - `firstDayOfWeek`: undefined 
  * - `invalid-dates`/`invalidDates`: A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. 
- * - `lang`: Sets the internal language of the component 
  * - `locale`: undefined 
  * - `range`: undefined 
  * - `selectable-from`/`selectableFrom`: Earliest selectable date. (yyyy-mm-dd format) 
@@ -1825,6 +1828,7 @@ export type SkfTooltipProps = {
  * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
  * - `autocomplete`: Indicates whether the value of the control can be automatically completed by the browser. See
  * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. 
+ * - `autofocus`: undefined 
  * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed. Its value is used as hint text. 
  * - `debug`: If true, outputs helping hints in console 
  * - `hide-label`/`hideLabel`: If true, hides the label visually 
@@ -1862,6 +1866,14 @@ export type SkfTooltipProps = {
  * Areas where markup can be added to the component.
  * 
  * - `(default)`: The Inputs label. Alternatively, you can use the `label` attribute.
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `focus() => void`: undefined
+ * - `blur() => void`: undefined
+ * - `select() => void`: undefined
   */
     "skf-input": Partial<SkfInputProps & BaseProps<SkfInput> & BaseEvents>;
 
@@ -2128,6 +2140,7 @@ export type SkfTooltipProps = {
  * - `label`: If defined, displays provided label 
  * - `lang`: Sets the internal language of the component 
  * - `max`: If defined, limits the number of selectable options 
+ * - `max-visible-items`/`maxVisibleItems`: undefined 
  * - `min`: If defined, sets the minimum number of required options 
  * - `multiple`: If true, allows for multiple options to be selected 
  * - `name`: If defined, set name of the component 
@@ -2161,7 +2174,6 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleSizeUpdate() => void`: undefined
- * - `handleExpandedChange() => void`: undefined
   */
     "skf-select": Partial<SkfSelectProps & BaseProps<SkfSelect> & BaseEvents>;
 

package/dist/types/vue/index.d.ts

@@ -203,8 +203,6 @@ type SkfDatepickerCalendarProps = {
   firstDayOfWeek?: SkfDatepickerCalendar["firstDayOfWeek"];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
   "invalid-dates"?: SkfDatepickerCalendar["invalidDates"];
-  /** Sets the internal language of the component */
-  lang?: SkfDatepickerCalendar["lang"];
   /**  */
   locale?: SkfDatepickerCalendar["locale"];
   /**  */
@@ -392,6 +390,8 @@ type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   autocomplete?: SkfInput["autocomplete"];
+  /**  */
+  autofocus?: SkfInput["autofocus"];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput["customInvalid"];
   /** If true, outputs helping hints in console */
@@ -609,6 +609,8 @@ type SkfSelectProps = {
   lang?: SkfSelect["lang"];
   /** If defined, limits the number of selectable options */
   max?: SkfSelect["max"];
+  /**  */
+  "max-visible-items"?: SkfSelect["maxVisibleItems"];
   /** If defined, sets the minimum number of required options */
   min?: SkfSelect["min"];
   /** If true, allows for multiple options to be selected */

package/dist/vscode.html-custom-data.json

@@ -338,11 +338,6 @@
           "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
           "values": []
         },
-        {
-          "name": "lang",
-          "description": "Sets the internal language of the component",
-          "values": [{ "name": "Language" }]
-        },
         { "name": "locale", "values": [] },
         { "name": "range", "values": [] },
         {
@@ -720,6 +715,7 @@
           "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
           "values": [{ "name": "HTMLInputElement['autocomplete']" }]
         },
+        { "name": "autofocus", "values": [] },
         {
           "name": "custom-invalid",
           "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1198,6 +1194,7 @@
           "description": "If defined, limits the number of selectable options",
           "values": []
         },
+        { "name": "max-visible-items", "values": [] },
         {
           "name": "min",
           "description": "If defined, sets the minimum number of required options",

package/dist/web-types.json

@@ -745,11 +745,6 @@
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "value": { "type": "string | undefined" }
             },
-            {
-              "name": "lang",
-              "description": "Sets the internal language of the component",
-              "value": { "type": "Language", "default": "'en'" }
-            },
             {
               "name": "locale",
               "value": { "type": "string", "default": "'en-CA'" }
@@ -790,11 +785,6 @@
                 "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
                 "type": "string | undefined"
               },
-              {
-                "name": "lang",
-                "description": "Sets the internal language of the component",
-                "type": "Language"
-              },
               { "name": "locale", "type": "string" },
               { "name": "range", "type": "boolean" },
               {
@@ -1583,6 +1573,10 @@
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               }
             },
+            {
+              "name": "autofocus",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "custom-invalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1733,6 +1727,7 @@
                 "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               },
+              { "name": "autofocus", "type": "boolean" },
               {
                 "name": "customInvalid",
                 "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
@@ -2559,6 +2554,10 @@
               "description": "If defined, limits the number of selectable options",
               "value": { "type": "number | undefined" }
             },
+            {
+              "name": "max-visible-items",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "min",
               "description": "If defined, sets the minimum number of required options",
@@ -2674,6 +2673,7 @@
                 "description": "If defined, limits the number of selectable options",
                 "type": "number | undefined"
               },
+              { "name": "maxVisibleItems", "type": "number | undefined" },
               {
                 "name": "min",
                 "description": "If defined, sets the minimum number of required options",

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.11",
+  "version": "1.0.2-beta.13",
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@js-temporal/polyfill": "^0.5.1",