@nl-design-system-community/clippy-components 1.2.0 → 2.0.0

package/dist/clippy-font-combobox/index.d.ts

@@ -2,6 +2,7 @@ import { ClippyCombobox } from '../clippy-combobox';
 type Option = {
     label: string;
     value: string[];
+    description?: string;
     cssUrl?: string;
 };
 declare const tag = "clippy-font-combobox";
@@ -12,15 +13,15 @@ declare global {
 }
 export declare class ClippyFontCombobox extends ClippyCombobox<Option> {
     #private;
-    readonly allowOther = true;
+    allow: (typeof ClippyCombobox.allowances)[number];
     readonly listboxElement?: Element;
     set value(value: Option['value'] | null);
     get value(): Option['value'] | null;
     fetchAdditionalOptions(query: string): Promise<Option[]>;
     valueToQuery(value: Option['value'] | null): string;
-    queryToValue(query: string): string[] | null;
+    queryToValue(query: string): string[];
     getOptionForValue(value: Option['value'] | null): Option | undefined;
-    renderEntry(option: Option, _index: number): import('lit').TemplateResult<1>;
+    renderEntry({ cssUrl, description, label, value }: Option, index: number): import('lit').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/clippy-font-combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-font-combobox/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,GAAG,yBAAyB,CAAC;AAEnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC;KAC3B;CACF;AAED,qBACa,kBAAmB,SAAQ,cAAc,CAAC,MAAM,CAAC;;IAC5D,SAAkB,UAAU,QAAQ;IAIpC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAElC,IACa,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,EAG/C;IAED,IAAa,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAE3C;IAEc,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAgC9D,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM;IAOnD,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IAK5C,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;IAIpE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAapD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/clippy-font-combobox/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAKF,QAAA,MAAM,GAAG,yBAAyB,CAAC;AAEnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC;KAC3B;CACF;AAED,qBACa,kBAAmB,SAAQ,cAAc,CAAC,MAAM,CAAC;;IAEnD,KAAK,EAAE,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAoB;IAI9E,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAElC,IACa,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,EAG/C;IAED,IAAa,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAE3C;IAEc,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAiC9D,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM;IAOnD,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAKrC,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;IAIpE,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAalF"}

package/dist/clippy-font-combobox/index.js

@@ -1,77 +1,112 @@
-import { s as _ } from "../decorators-BGpMqJ7V.js";
-import { html as b } from "lit";
-import { query as C, property as w } from "lit/decorators.js";
-import { ifDefined as E } from "lit/directives/if-defined.js";
-import { ref as x } from "lit/directives/ref.js";
-import { styleMap as O } from "lit/directives/style-map.js";
-import { b as g, C as A } from "../index-CmKtM5nD.js";
-var F = Object.defineProperty, M = Object.getOwnPropertyDescriptor, m = (t) => {
-  throw TypeError(t);
-}, h = (t, e, r, s) => {
-  for (var o = s > 1 ? void 0 : s ? M(e, r) : e, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (o = (s ? n(e, r, o) : n(o)) || o);
-  return s && o && F(e, r, o), o;
-}, y = (t, e, r) => e.has(t) || m("Cannot " + r), a = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), c = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, s) => (y(t, e, "write to private field"), e.set(t, r), r), p, l, f;
-const S = "clippy-font-combobox";
-let u = class extends A {
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import { nothing, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ref } from "lit/directives/ref.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ClippyCombobox } from "../clippy-combobox/index.js";
+import { allowedValuesConverter, arrayFromCommaList } from "../lib/converters/index.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _additional, _intersectionObserver, _loadFontsInView;
+const defaultAllowance = "other";
+const tag = "clippy-font-combobox";
+let ClippyFontCombobox = class extends ClippyCombobox {
   constructor() {
-    super(...arguments), this.allowOther = !0, c(this, p), c(this, l), c(this, f, (t) => {
-      for (const e of t) {
-        const { intersectionRatio: r, target: s } = e;
-        if (r > 0 && s instanceof HTMLElement) {
-          const o = s.dataset.cssUrl || "", i = document.querySelector(`[href="${o}"]`);
-          if (o && !i) {
-            const n = document.createElement("link");
-            n.setAttribute("rel", "stylesheet"), n.setAttribute("href", o), document.head.appendChild(n);
+    super(...arguments);
+    this.allow = defaultAllowance;
+    __privateAdd(this, _additional);
+    __privateAdd(this, _intersectionObserver);
+    __privateAdd(this, _loadFontsInView, (entries) => {
+      for (const entry of entries) {
+        const { intersectionRatio, target } = entry;
+        if (intersectionRatio > 0 && target instanceof HTMLElement) {
+          const cssUrl = target.dataset["cssUrl"] || "";
+          const stylesheets = document.querySelector(`[href="${cssUrl}"]`);
+          if (cssUrl && !stylesheets) {
+            const link = document.createElement("link");
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("href", cssUrl);
+            document.head.appendChild(link);
           }
-          a(this, l)?.unobserve(s);
+          __privateGet(this, _intersectionObserver)?.unobserve(target);
         }
       }
     });
   }
-  set value(t) {
-    super.value = t, this.query = this.valueToQuery(t);
+  set value(value) {
+    super.value = value;
+    this.query = this.valueToQuery(value);
   }
   get value() {
     return super.value;
   }
-  async fetchAdditionalOptions(t) {
-    d(this, p, a(this, p) ?? await import("../external-Dtf6f6DP.js").then(({ default: r }) => r));
-    const e = a(this, p).filter((r) => r.label.includes(t));
-    return e.length && d(this, l, a(this, l) ?? new IntersectionObserver(a(this, f), {
-      root: this.listboxElement
-    })), e;
+  async fetchAdditionalOptions(query2) {
+    __privateSet(this, _additional, __privateGet(this, _additional) ?? await import("../external-BCrp-PaG.js").then(({ default: items }) => items));
+    const filter = this.filter(query2);
+    const options = __privateGet(this, _additional).filter(filter);
+    if (options.length) {
+      __privateSet(this, _intersectionObserver, __privateGet(this, _intersectionObserver) ?? new IntersectionObserver(__privateGet(this, _loadFontsInView), {
+        root: this.listboxElement
+      }));
+    }
+    return options;
   }
-  valueToQuery(t) {
-    return t === null ? "" : Array.isArray(t) ? t[0] : t;
+  valueToQuery(value) {
+    if (value === null) {
+      return "";
+    }
+    return Array.isArray(value) ? value[0] : value;
   }
-  queryToValue(t) {
-    return this.options.find((e) => e.value[0] === t)?.value ?? null;
+  queryToValue(query2) {
+    return this.options.find((option) => option.value[0] === query2)?.value ?? [query2];
   }
-  getOptionForValue(t) {
-    return this.options.find((e) => e.value.every((r, s) => t?.[s] === r));
+  getOptionForValue(value) {
+    return this.options.find((option) => option.value.every((entry, index) => value?.[index] === entry));
   }
-  renderEntry(t, e) {
-    const { cssUrl: r, label: s, value: o } = t, i = { fontFamily: o.toString(), fontSizeAdjust: 0.5 };
-    return b`<span ${x((v) => {
-      v && a(this, l) && a(this, l).observe(v);
-    })} style=${O(i)} data-css-url=${E(r)}>
-      ${s}
-    </span>`;
+  renderEntry({ cssUrl, description, label, value }, index) {
+    const styles = { fontFamily: value.toString(), fontSizeAdjust: 0.5 };
+    const observeElement = (element) => {
+      if (element && __privateGet(this, _intersectionObserver)) {
+        __privateGet(this, _intersectionObserver).observe(element);
+      }
+    };
+    return html`
+      <div ${ref(observeElement)} style=${styleMap(styles)} data-css-url=${ifDefined(cssUrl)}>${label}</div>
+      ${description && index !== void 0 ? html`<div>${description}</div>` : nothing}
+    `;
   }
 };
-p = /* @__PURE__ */ new WeakMap();
-l = /* @__PURE__ */ new WeakMap();
-f = /* @__PURE__ */ new WeakMap();
-h([
-  C("[role=listbox]")
-], u.prototype, "listboxElement", 2);
-h([
-  w({ converter: g })
-], u.prototype, "value", 1);
-u = h([
-  _(S)
-], u);
+_additional = /* @__PURE__ */ new WeakMap();
+_intersectionObserver = /* @__PURE__ */ new WeakMap();
+_loadFontsInView = /* @__PURE__ */ new WeakMap();
+__decorateClass([
+  property({ converter: allowedValuesConverter(ClippyCombobox.allowances, defaultAllowance) })
+], ClippyFontCombobox.prototype, "allow", 2);
+__decorateClass([
+  query("[role=listbox]")
+], ClippyFontCombobox.prototype, "listboxElement", 2);
+__decorateClass([
+  property({ converter: arrayFromCommaList })
+], ClippyFontCombobox.prototype, "value", 1);
+ClippyFontCombobox = __decorateClass([
+  safeCustomElement(tag)
+], ClippyFontCombobox);
 export {
-  u as ClippyFontCombobox
+  ClippyFontCombobox
 };