@sebgroup/green-core 1.69.4 → 1.70.1

package/utils/decorators/watch-media-query.js

@@ -0,0 +1,33 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { isServer } from "../helpers/is-server";
+const standardBreakpoints = {
+  sm: "(min-width: 576px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 1024px)",
+  xl: "(min-width: 1280px)"
+};
+function watchMediaQuery(q) {
+  return (proto, _propertyKey, descriptor) => {
+    if (isServer)
+      return;
+    const mediaQuery = window.matchMedia(q);
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      connectedCallback?.call(this);
+      const listener = (e) => {
+        descriptor.value?.call(this, e.matches);
+      };
+      mediaQuery.addEventListener("change", listener);
+      this.disconnectedCallback = function() {
+        disconnectedCallback?.call(this);
+        mediaQuery.removeEventListener("change", listener);
+      };
+      descriptor.value?.call(this, mediaQuery.matches);
+    };
+  };
+}
+export {
+  standardBreakpoints,
+  watchMediaQuery
+};

package/utils/decorators/watch.js

@@ -0,0 +1,29 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+function watch(propertyName, options) {
+  const resolvedOptions = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, propertyKey, descriptor) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              descriptor.value?.call(this, oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+export {
+  watch
+};

package/utils/directives/forward-attributes.js

@@ -0,0 +1,33 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import {
+  Directive,
+  directive,
+  PartType
+} from "lit/directive.js";
+import { nothing } from "lit/html.js";
+class ForwardAttributesDirective extends Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ELEMENT) {
+      throw new Error(
+        "The `forwardAttributes` directive must be used in element bindings"
+      );
+    }
+  }
+  render(_filter) {
+    return nothing;
+  }
+  update(part, [filter]) {
+    const element = part.element;
+    const host = part.options?.host;
+    Array.from(host.attributes).forEach((attr) => {
+      if (filter(attr)) {
+        element.setAttribute(attr.name.replace("gds-", ""), attr.value);
+      }
+    });
+  }
+}
+const forwardAttributes = directive(ForwardAttributesDirective);
+export {
+  forwardAttributes
+};

package/utils/directives/index.js

@@ -0,0 +1 @@
+export * from "./forward-attributes";

package/utils/global-styles.js

@@ -0,0 +1,76 @@
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "../chunks/chunk.QTSIPXV3.js";
+var _useLegacyStylesheets, _styleSheets, _legacyStyleSheets, _initialStyleSheets, _injectStylesLegacy, injectStylesLegacy_fn, _injectStyles, injectStyles_fn;
+import { supportsConstructedStylesheets } from "../utils/controllers/dynamic-styles-controller";
+import { isServer } from "./helpers/is-server";
+function getDocumentAdoptedStylesheet() {
+  if (isServer)
+    return [];
+  return document.adoptedStyleSheets || [];
+}
+const _GlobalStylesRegistry = class _GlobalStylesRegistry {
+  constructor() {
+    __privateAdd(this, _injectStylesLegacy);
+    __privateAdd(this, _injectStyles);
+    __privateAdd(this, _useLegacyStylesheets, !supportsConstructedStylesheets());
+    __privateAdd(this, _styleSheets, /* @__PURE__ */ new Map());
+    __privateAdd(this, _legacyStyleSheets, /* @__PURE__ */ new Map());
+    __privateAdd(this, _initialStyleSheets, getDocumentAdoptedStylesheet());
+  }
+  /**
+   * Get the global singleton instance of the GlobalStylesRegistry.
+   */
+  static get instance() {
+    if (!globalThis.__gdsGlobalStylesRegistry)
+      globalThis.__gdsGlobalStylesRegistry = new _GlobalStylesRegistry();
+    return globalThis.__gdsGlobalStylesRegistry;
+  }
+  /**
+   * Injects global styles into the document. This function is intended to be used for global styles
+   * that cannot be scoped to a specific component.
+   *
+   * @param key unique identifier for this stylesheet.
+   * @param styles CSSResult produced by the lit css template literal tag
+   */
+  injectGlobalStyles(key, styles) {
+    if (__privateGet(this, _useLegacyStylesheets)) {
+      const cssText = Array.isArray(styles) ? styles.map((style) => style.toString()).join("") : styles.toString();
+      __privateMethod(this, _injectStylesLegacy, injectStylesLegacy_fn).call(this, key, cssText);
+    } else {
+      styles.styleSheet && __privateMethod(this, _injectStyles, injectStyles_fn).call(this, key, styles.styleSheet);
+    }
+  }
+};
+_useLegacyStylesheets = new WeakMap();
+_styleSheets = new WeakMap();
+_legacyStyleSheets = new WeakMap();
+_initialStyleSheets = new WeakMap();
+_injectStylesLegacy = new WeakSet();
+injectStylesLegacy_fn = function(key, cssText) {
+  if (isServer)
+    return;
+  let styleEl = __privateGet(this, _legacyStyleSheets).get(key);
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    __privateGet(this, _legacyStyleSheets).set(key, styleEl);
+  }
+  styleEl.textContent = cssText;
+  document.head.appendChild(styleEl);
+};
+_injectStyles = new WeakSet();
+injectStyles_fn = function(key, styleSheet) {
+  if (isServer)
+    return;
+  __privateGet(this, _styleSheets).set(key, styleSheet);
+  document.adoptedStyleSheets = [
+    ...__privateGet(this, _initialStyleSheets),
+    ...Array.from(__privateGet(this, _styleSheets).values())
+  ];
+};
+let GlobalStylesRegistry = _GlobalStylesRegistry;
+export {
+  GlobalStylesRegistry
+};

package/utils/helpers/attribute-converters.js

@@ -0,0 +1,30 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+const dateConverter = {
+  fromAttribute(value) {
+    return new Date(value);
+  },
+  toAttribute(value) {
+    return value.toISOString();
+  }
+};
+const dateArrayConverter = {
+  fromAttribute(value) {
+    return value.split(",").map((d) => new Date(d.trim()));
+  },
+  toAttribute(value) {
+    return JSON.stringify(value.map((d) => d.toISOString()));
+  }
+};
+const stringArrayConverter = {
+  fromAttribute(value) {
+    return value.split(",");
+  },
+  toAttribute(value) {
+    return Array.isArray(value) ? value.join(",") : value;
+  }
+};
+export {
+  dateArrayConverter,
+  dateConverter,
+  stringArrayConverter
+};

package/utils/helpers/custom-element-scoping.d.ts

@@ -12,7 +12,7 @@
  * potentially have its own version of Green.
  *
  * There is a (proposal)[https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md]
- * for enabling user instantiated CustomElementRegistry scoped to a ShodowRoot, but as of
+ * for enabling user instantiated CustomElementRegistry scoped to a ShadowRoot, but as of
  * mid 2023 this is still only available in Chrome canary behind experimental flags.
  *
  * ## Solution
@@ -55,16 +55,22 @@
  * implemented in all major browsers, we might remove this custom scoping mechanism and
  * switch to using native scoped registries instead.
  */
-import { CustomElementDecorator } from 'lit/decorators.js';
+import { GdsElement } from '../../gds-element';
 export declare const VER_SUFFIX = "-gdsvsuffix";
 declare global {
     var __gdsElementLookupTable: {
         [VER_SUFFIX]: Map<string, string>;
     };
 }
+type Constructor<T = GdsElement> = {
+    new (...args: any[]): T;
+};
 export declare class ScopedElementRegistry {
     static get instance(): Map<string, string>;
 }
+export interface GdsCustomElementOptions {
+    dependsOn?: (typeof GdsElement)[];
+}
 /**
  * Class decorator factory that defines the decorated class as a custom element, and registers
  * it with the custom element registry under a versioned name.
@@ -80,7 +86,7 @@ export declare class ScopedElementRegistry {
  * @category Decorator
  * @param tagName The tag name of the custom element to define.
  */
-export declare const gdsCustomElement: (tagName: string) => CustomElementDecorator;
+export declare const gdsCustomElement: (tagName: string, options?: GdsCustomElementOptions) => <T extends Constructor<GdsElement>>(constructor: T) => T;
 /**
  * Template tag factory that creates a new template tag, which rewrites all custom element names from the
  * lookup table to include the version suffix, and then passes the template on to the provided template tag.

package/utils/helpers/custom-element-scoping.js

@@ -0,0 +1,83 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { html as litHtml } from "lit";
+const VER_SUFFIX = "-344135";
+class ScopedElementRegistry {
+  static get instance() {
+    if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])
+      globalThis.__gdsElementLookupTable = {
+        ...globalThis.__gdsElementLookupTable,
+        [VER_SUFFIX]: /* @__PURE__ */ new Map()
+      };
+    return globalThis.__gdsElementLookupTable[VER_SUFFIX];
+  }
+}
+const gdsCustomElement = (tagName, options) => {
+  return function(constructor) {
+    var _a;
+    return _a = class extends constructor {
+      constructor() {
+        super(...arguments);
+        this.gdsElementName = tagName;
+      }
+      static define() {
+        if (_a.isDefined)
+          return;
+        const isVersioningDisabled = globalThis.GDS_DISABLE_VERSIONED_ELEMENTS;
+        const nameToRegister = isVersioningDisabled ? tagName : tagName + VER_SUFFIX;
+        if (customElements.get(nameToRegister))
+          return;
+        _a.isDefined = true;
+        ScopedElementRegistry.instance.set(tagName, nameToRegister);
+        customElements.define(nameToRegister, _a);
+        if (options?.dependsOn) {
+          options.dependsOn.forEach((dep) => dep.define());
+        }
+      }
+    }, _a.isDefined = false, _a;
+  };
+};
+const templateCache = /* @__PURE__ */ new WeakMap();
+function applyElementScoping(strings, ...values) {
+  let modstrings = templateCache.get(strings);
+  if (!modstrings) {
+    modstrings = replaceTags(strings);
+    modstrings.raw = replaceTags(strings.raw);
+    templateCache.set(strings, modstrings);
+  }
+  return [modstrings, ...values];
+}
+const replaceTags = (inStr) => inStr.map((s) => {
+  for (const [key, value] of ScopedElementRegistry.instance.entries()) {
+    s = s.replace(new RegExp(`${key}(?![-a-z])`, "mg"), value);
+  }
+  return s;
+});
+function htmlTemplateTagFactory(extendedTag) {
+  return (strings, ...values) => {
+    if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+      return extendedTag(strings, ...values);
+    }
+    const [modstrings, ...modvalues] = applyElementScoping(strings, ...values);
+    return extendedTag(modstrings, ...modvalues);
+  };
+}
+const html = htmlTemplateTagFactory(litHtml);
+function getScopedTagName(tagName) {
+  return ScopedElementRegistry.instance.get(tagName) ?? tagName;
+}
+function getUnscopedTagName(tagName) {
+  return [...ScopedElementRegistry.instance.entries()].find(
+    ([, value]) => value === tagName
+  )?.[0];
+}
+var custom_element_scoping_default = {};
+export {
+  ScopedElementRegistry,
+  VER_SUFFIX,
+  custom_element_scoping_default as default,
+  gdsCustomElement,
+  getScopedTagName,
+  getUnscopedTagName,
+  html,
+  htmlTemplateTagFactory
+};

package/utils/helpers/id.js

@@ -0,0 +1,5 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+const randomId = () => "gds-" + Math.random().toString(36).substring(2, 9);
+export {
+  randomId
+};

package/utils/helpers/index.js

@@ -0,0 +1,2 @@
+export * from "./id";
+export * from "./style-expression-helpers";

package/utils/helpers/is-server.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Check if the code is running on the server
+ */
+export declare const isServer: boolean;

package/utils/helpers/is-server.js

@@ -0,0 +1,5 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+const isServer = typeof process !== "undefined" && process.env !== void 0;
+export {
+  isServer
+};

package/utils/helpers/strip-white-space.js

@@ -0,0 +1,16 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+const templateCache = /* @__PURE__ */ new WeakMap();
+function stripWhitespace(extendedTag) {
+  return (strings, ...values) => {
+    let modstrings = templateCache.get(strings);
+    if (!modstrings) {
+      modstrings = strings.map((s) => s.replace(/\n[\s]+</gm, "<"));
+      modstrings.raw = strings.raw;
+      templateCache.set(strings, modstrings);
+    }
+    return extendedTag(modstrings, ...values);
+  };
+}
+export {
+  stripWhitespace
+};

package/utils/helpers/style-expression-helpers.js

@@ -0,0 +1,47 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+function parseColorValue(value, context, level) {
+  if (value === "transparent" || value === "currentColor" || value === "inherit") {
+    return value;
+  }
+  const [colorName, transparency] = value.split("/");
+  const colorVar = `var(--gds-color-l${level}-${context}-${colorName})`;
+  return transparency ? `color-mix(in srgb, ${colorVar} ${parseFloat(transparency) * 100}%, transparent 0%)` : colorVar;
+}
+function forColorTokens(context) {
+  return {
+    valueTemplate: function(v) {
+      return parseColorValue(v, context, this.level);
+    }
+  };
+}
+const forSpaceTokens = {
+  valueTemplate: (value) => `var(--gds-space-${value}, 0)`
+};
+const forSpaceTokensAndCustomValues = {
+  valueTemplate: (value) => `var(--gds-space-${sanitizeVariableName(value)}, ${value})`
+};
+const forSpaceTokensSupportingNegative = {
+  valueTemplate: (v) => {
+    const sign = v.startsWith("-") ? "neg" : "pos";
+    const val = sign == "pos" ? `var(--gds-space-${v})` : `calc(var(--gds-space-${v.substring(1)}) * -1)`;
+    return v === "auto" ? "auto" : val;
+  },
+  styleTemplate: (prop, values) => {
+    const transformValue = (v) => v === "auto" ? "auto" : `${v}`;
+    const top = transformValue(values[0]);
+    const right = values.length > 1 ? transformValue(values[1]) : top;
+    const bottom = values.length > 2 ? transformValue(values[2]) : top;
+    const left = values.length > 3 ? transformValue(values[3]) : right;
+    return `${prop}: ${top} ${right} ${bottom} ${left};`;
+  }
+};
+function sanitizeVariableName(name) {
+  return name.replace(/[^a-zA-Z0-9-]/g, "");
+}
+export {
+  forColorTokens,
+  forSpaceTokens,
+  forSpaceTokensAndCustomValues,
+  forSpaceTokensSupportingNegative,
+  parseColorValue
+};

package/utils/helpers/style-expression-parser-tester.js

@@ -0,0 +1,10 @@
+import { inspect } from "util";
+import { parse, toCss, tokenize } from "./style-expression-parser";
+const expression = "block; hover:flex; xl { focus:block; flex }";
+const ast = parse(tokenize(expression));
+const css = toCss(":host", "background", ast);
+console.log(
+  "AST",
+  inspect(ast, { showHidden: false, depth: null, colors: true })
+);
+console.log(inspect(css, { showHidden: false, depth: null, colors: true }));

package/utils/helpers/style-expression-parser.js

@@ -0,0 +1,119 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+const viewportBreakpoints = {
+  "0": "0px",
+  "2xs": "320px",
+  xs: "425px",
+  s: "768px",
+  m: "1024px",
+  l: "1280px",
+  xl: "1440px",
+  "2xl": "2560px",
+  "3xl": "3840px",
+  "4xl": "4320px",
+  "5xl": "6016px",
+  "6xl": "7680px"
+};
+const breakpointValueRegex = /^([<|>]=?)?([0-9a-z]+)/;
+const controlTokens = ["{", "}", ";", ":", ","];
+const whitespace = [" ", "/n"];
+function tokenize(source = "") {
+  const lexemes = [];
+  let scanned = "";
+  for (let i = 0; i < source.length; i++) {
+    const c = source[i];
+    if (!whitespace.includes(c))
+      scanned += c;
+    if (controlTokens.includes(c)) {
+      lexemes.push(scanned.slice(0, -1));
+      lexemes.push(c);
+      scanned = "";
+      continue;
+    }
+    if (whitespace.includes(c) || i === source.length - 1) {
+      lexemes.push(scanned);
+      scanned = "";
+      continue;
+    }
+  }
+  return lexemes.filter((l) => l !== "");
+}
+function parse(tokens) {
+  const tree = [];
+  let bpScope = { breakpoint: "-", values: [] };
+  const getEmptyBucket = () => ({ sel: "", values: [] });
+  let valueBucket = getEmptyBucket();
+  for (const t of tokens) {
+    if (!controlTokens.includes(t)) {
+      valueBucket.values.push(t);
+      continue;
+    }
+    if (t === "{") {
+      bpScope = { breakpoint: valueBucket.values.join(","), values: [] };
+      valueBucket = getEmptyBucket();
+    }
+    if (t === ";") {
+      if (tree.length === 0) {
+        tree.push(bpScope);
+      }
+      if (valueBucket.values.length > 0) {
+        bpScope.values.push(valueBucket);
+        valueBucket = getEmptyBucket();
+      }
+    }
+    if (t === ":") {
+      const sel = valueBucket.values.pop() ?? "";
+      valueBucket.sel = sel;
+    }
+    if (bpScope && t === "}") {
+      bpScope.values.push(valueBucket);
+      valueBucket = getEmptyBucket();
+      tree.push(bpScope);
+    }
+  }
+  if (valueBucket.values.length > 0) {
+    bpScope.values.push(valueBucket);
+  }
+  if (tree.length === 0) {
+    tree.push(bpScope);
+  }
+  return tree;
+}
+function parseBreakpoint(bp) {
+  const bps = bp.split(",");
+  return bps.map((b) => {
+    const match = b.trim().match(breakpointValueRegex);
+    if (!match) {
+      throw new Error(`Invalid breakpoint specifier: ${b}`);
+    }
+    return { condition: match[1], value: match[2] };
+  });
+}
+function toCss(selector, property, tree, valueTemplate = (v) => v, styleTemplate = (p, vs) => `${p}: ${vs.join(" ")};`) {
+  let css = "";
+  for (const bp of tree) {
+    const bpSpecs = bp.breakpoint === "-" ? [{ condition: ">=", value: "0" }] : parseBreakpoint(bp.breakpoint);
+    const query = bpSpecs.map(
+      (b) => `(${b.condition?.includes("<") ? "max-width" : "min-width"}: ${viewportBreakpoints[b.value] ?? b.value})`
+    ).join(" and ");
+    const mq = `@media ${query} {${bp.values.map((bpValues) => {
+      let sel = selector;
+      if (bpValues.sel.length > 0)
+        sel = selector === ":host" ? `:host(:${bpValues.sel})` : `${selector}:${bpValues.sel}`;
+      const style = styleTemplate(
+        property,
+        bpValues.values.map(valueTemplate)
+      );
+      if (bpValues.sel === "hover")
+        return `@media (hover: hover) {${sel}{${style}}}`;
+      else
+        return `${sel}{${style}}`;
+    }).join("")}}`;
+    css += mq;
+  }
+  return css;
+}
+export {
+  parse,
+  toCss,
+  tokenize
+};

package/utils/helpers/unwrap-slots.js

@@ -0,0 +1,11 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+function unwrap(slotRef) {
+  let slot = slotRef;
+  while (slot.assignedElements().length > 0 && slot.assignedElements()[0].nodeName === "SLOT") {
+    slot = slot.assignedElements()[0];
+  }
+  return slot;
+}
+export {
+  unwrap
+};

package/utils/localization/localization.js

@@ -0,0 +1,48 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { configureLocalization } from "@lit/localize";
+import { sourceLocale, targetLocales } from "../../generated/locale-codes";
+import * as templates_da from "../../generated/locales/da";
+import * as templates_de from "../../generated/locales/de";
+import * as templates_fi from "../../generated/locales/fi";
+import * as templates_fr from "../../generated/locales/fr";
+import * as templates_it from "../../generated/locales/it";
+import * as templates_nl from "../../generated/locales/nl";
+import * as templates_no from "../../generated/locales/no";
+import * as templates_sv from "../../generated/locales/sv";
+const localizedTemplates = /* @__PURE__ */ new Map([
+  ["sv", templates_sv],
+  ["no", templates_no],
+  ["nl", templates_nl],
+  ["it", templates_it],
+  ["fr", templates_fr],
+  ["fi", templates_fi],
+  ["de", templates_de],
+  ["da", templates_da]
+]);
+const gdsInitLocalization = ({ extraLocales, extraTemplates } = {
+  extraLocales: [],
+  extraTemplates: /* @__PURE__ */ new Map()
+}) => {
+  const _targetLocales = [...targetLocales];
+  for (const [locale, template] of extraTemplates) {
+    localizedTemplates.set(locale, template);
+  }
+  for (const locale of extraLocales) {
+    _targetLocales.push(locale);
+  }
+  return configureLocalization({
+    sourceLocale,
+    targetLocales: _targetLocales,
+    loadLocale: async (locale) => {
+      const localModule = localizedTemplates.get(locale);
+      if (localModule) {
+        return localModule;
+      }
+      return Promise.reject(new Error(`Locale ${locale} not found`));
+    }
+  });
+};
+export {
+  gdsInitLocalization,
+  targetLocales
+};