@limetech/lime-elements 40.21.1 → 40.23.0

package/dist/collection/components/form/filled-defaults.js

@@ -0,0 +1,132 @@
+import { isEmpty, isEqual, isPlainObject } from "lodash-es";
+/**
+ * The value without the defaults that were filled into the value the form was
+ * given, as long as they still hold their default. A default the user changed
+ * stays, and so do the defaults of what the user added, such as a list item.
+ *
+ * @param value - the value the form holds, with the defaults filled in
+ * @param filled - the value the form was given, with the defaults filled in
+ * @param given - the value the form was given
+ * @returns the value without the defaults that were filled in
+ */
+export function withoutFilledDefaults(value, filled, given) {
+    // A change can bring in objects that hold nothing, which mean nothing
+    if (isPlainObject(value)) {
+        return withoutFilledProperties(value, isPlainObject(filled) ? filled : {}, given);
+    }
+    if (Array.isArray(value)) {
+        return withoutFilledItems(value, Array.isArray(filled) ? filled : [], given);
+    }
+    return given === undefined && isEqual(value, filled) ? undefined : value;
+}
+function withoutFilledProperties(value, filled, given) {
+    const givenProperties = isPlainObject(given)
+        ? given
+        : {};
+    // In the order they were given, so a saved value keeps its key order
+    const keys = new Set([
+        ...Object.keys(givenProperties),
+        ...Object.keys(value),
+    ]);
+    const result = {};
+    for (const key of keys) {
+        if (!Object.hasOwn(value, key)) {
+            continue;
+        }
+        const kept = withoutFilledDefaults(value[key], filled[key], givenProperties[key]);
+        if (kept !== undefined) {
+            result[key] = kept;
+        }
+    }
+    return isEmpty(result) && given == null ? given : result;
+}
+// Items are paired with the ones the form was given by content, so a removed
+// or moved item does not shift the others onto the defaults of their
+// neighbors. An item that no longer equals any of them is paired with the one
+// it has the most in common with, so an edited item still loses its defaults
+function withoutFilledItems(items, filled, given) {
+    // A list that was not given is a default as a whole: once the user
+    // changes it, it is the user's
+    if (!Array.isArray(given)) {
+        return isEqual(items, filled) ? given : items;
+    }
+    const givenItems = given;
+    const matches = pairItems(items, filled);
+    const result = [];
+    for (const [index, item] of items.entries()) {
+        const match = matches.get(index);
+        if (match === undefined) {
+            result.push(item);
+            continue;
+        }
+        const kept = withoutFilledDefaults(item, filled[match], givenItems[match]);
+        if (kept !== undefined) {
+            result.push(kept);
+        }
+    }
+    return result;
+}
+function pairItems(items, filled) {
+    const matches = new Map();
+    const unmatched = new Set(filled.keys());
+    const pair = (index, match) => {
+        matches.set(index, match);
+        unmatched.delete(match);
+    };
+    for (const [index, item] of items.entries()) {
+        if (unmatched.has(index) && isEqual(item, filled[index])) {
+            pair(index, index);
+        }
+    }
+    for (const [index, item] of items.entries()) {
+        if (matches.has(index)) {
+            continue;
+        }
+        const same = [...unmatched].find((i) => isEqual(item, filled[i]));
+        if (same !== undefined) {
+            pair(index, same);
+        }
+    }
+    for (const [index, item] of items.entries()) {
+        if (matches.has(index)) {
+            continue;
+        }
+        const closest = findClosest(item, filled, unmatched);
+        if (closest !== undefined) {
+            pair(index, closest);
+        }
+    }
+    return matches;
+}
+// The one item that shares the most equal properties, if it shares any at
+// all. When several share as many there is no telling which the item was, and
+// it is left as it is, since a kept default means the same as a missing one
+// while a lost value does not
+function findClosest(item, filled, candidates) {
+    if (!isPlainObject(item)) {
+        return undefined;
+    }
+    let closest;
+    let best = 0;
+    let isTied = false;
+    for (const candidate of candidates) {
+        const score = sharedProperties(item, filled[candidate]);
+        if (score === best) {
+            isTied = true;
+            continue;
+        }
+        if (score < best) {
+            continue;
+        }
+        best = score;
+        closest = candidate;
+        isTied = false;
+    }
+    return isTied ? undefined : closest;
+}
+function sharedProperties(item, other) {
+    if (!isPlainObject(other)) {
+        return 0;
+    }
+    return Object.entries(item).filter(([key, value]) => isEqual(value, other[key])).length;
+}

package/dist/collection/components/form/form.js

@@ -14,6 +14,7 @@ import { h, } from "@stencil/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import JSONSchemaForm from "@rjsf/core";
+import { getDefaultFormState, } from "@rjsf/utils";
 import { isHeadingLevel } from "../../util/heading-level";
 import { ArrayFieldTemplate, ArrayFieldItemTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
 import { SchemaField as CustomSchemaField } from "./fields/schema-field";
@@ -23,7 +24,17 @@ import { widgets } from "./widgets";
 import { rjsfValidator } from "./validator";
 import { isEqual, mapValues } from "lodash-es";
 import { showField, stopShowingField } from "./show-field";
+import { withoutFilledDefaults } from "./filled-defaults";
 import { HeadingLevelContext } from "./templates/heading-level";
+// `@rjsf/core` v6 treats a `const` inside `oneOf`/`anyOf` as a default and
+// auto-selects the first option, so an optional enum can never be left empty
+// (clearing it just gets repopulated on the next render). `skipOneOf` keeps this
+// off for enums while still applying genuine `default` values, matching the
+// pre-v6 behavior.
+const FILL_DEFAULTS = {
+    constAsDefaults: 'skipOneOf',
+    requiredBooleanDefault: 'skip',
+};
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -44,6 +55,7 @@ import { HeadingLevelContext } from "./templates/heading-level";
  * @exampleComponent limel-example-code-editor-form
  * @exampleComponent limel-example-form-highlighted-field
  * @exampleComponent limel-example-form-heading-level
+ * @exampleComponent limel-example-form-include-defaults
  */
 export class Form {
     constructor() {
@@ -73,6 +85,18 @@ export class Form {
          * which keeps untouched required-empty fields silent.
          */
         this.revealErrors = false;
+        /**
+         * Set to `false` to leave the defaults of the schema out of the value,
+         * so that it stays as it was given until the user changes something. The
+         * form still shows the defaults. A default the user changes is in the
+         * value from then on, and so are the defaults that a change brings in,
+         * such as those of a new list item or of fields that depend on the
+         * changed one. Pass the value the form emits back in as `value`.
+         * The form validates what it shows, defaults included. When the user
+         * changes everything back, the value is what the form was given, also
+         * when that is `null` or `undefined`.
+         */
+        this.includeDefaults = true;
         this.isValid = true;
         this.initialized = false;
         this.handleChange = this.handleChange.bind(this);
@@ -82,8 +106,17 @@ export class Form {
         this.initialize();
     }
     componentWillLoad() {
+        this.currentValue = this.value;
         this.warnIfHeadingLevelIsInvalid();
     }
+    handleValueChange() {
+        // The host usually hands back the value the form emitted, as a new
+        // object, which is not a new value to leave the defaults out of
+        if (!isEqual(this.value, this.currentValue)) {
+            this.givenValue = undefined;
+        }
+        this.currentValue = this.value;
+    }
     componentDidLoad() {
         this.initialize();
         this.showHighlightedField();
@@ -125,7 +158,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '549ba8cd825aadedc4ec9e696f6d03bee028cb89', class: "root" });
+        return h("div", { key: 'a50619f8a46a7e3b3ca5ade698141f22cfdd704f', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -138,21 +171,12 @@ export class Form {
                 : 1,
         }, React.createElement(JSONSchemaForm, {
             schema: this.prepareSchema(this.schema),
-            formData: this.value,
+            formData: this.currentValue,
             onChange: this.handleChange,
             widgets: widgets,
             validator: rjsfValidator,
             liveValidate: 'onChange',
-            // `@rjsf/core` v6 treats a `const` inside `oneOf`/`anyOf`
-            // as a default and auto-selects the first option, so an
-            // optional enum can never be left empty (clearing it just
-            // gets repopulated on the next render). `skipOneOf` keeps
-            // this off for enums while still applying genuine
-            // `default` values, matching the pre-v6 behavior.
-            experimental_defaultFormStateBehavior: {
-                constAsDefaults: 'skipOneOf',
-                requiredBooleanDefault: 'skip',
-            },
+            experimental_defaultFormStateBehavior: FILL_DEFAULTS,
             showErrorList: false,
             extraErrors: this.getExtraErrors(this.errors),
             templates: {
@@ -186,11 +210,42 @@ export class Form {
         return this.host.shadowRoot.querySelector('.root');
     }
     handleChange(event) {
-        this.change.emit(event.formData);
+        if (this.includeDefaults) {
+            this.currentValue = event.formData;
+            this.change.emit(event.formData);
+            return;
+        }
+        const { given, filled } = this.getGivenValue();
+        this.givenValue.held = event.formData;
+        const value = withoutFilledDefaults(event.formData, filled, given);
+        if (isEqual(value, this.currentValue)) {
+            // What the form holds changed, even though the value did not
+            this.emitValidationStatus(event.errors);
+            return;
+        }
+        this.currentValue = value;
+        this.change.emit(this.currentValue);
     }
-    validateFormData() {
+    getGivenValue() {
         var _a;
-        const { errors } = rjsfValidator.validateFormData((_a = this.value) !== null && _a !== void 0 ? _a : {}, this.prepareSchema(this.schema));
+        const schema = this.prepareSchema(this.schema);
+        if (((_a = this.givenValue) === null || _a === void 0 ? void 0 : _a.schemaId) !== schema.$id) {
+            const filled = getDefaultFormState(rjsfValidator, schema, this.currentValue, schema, false, FILL_DEFAULTS);
+            this.givenValue = {
+                schemaId: schema.$id,
+                given: this.currentValue,
+                filled,
+                held: filled,
+            };
+        }
+        return this.givenValue;
+    }
+    validateFormData() {
+        // With the defaults left out of the value, the form holds more than it
+        const value = this.includeDefaults
+            ? this.value
+            : this.getGivenValue().held;
+        const { errors } = rjsfValidator.validateFormData(value !== null && value !== void 0 ? value : {}, this.prepareSchema(this.schema));
         this.emitValidationStatus(errors);
     }
     /**
@@ -465,6 +520,26 @@ export class Form {
                 "attribute": "reveal-errors",
                 "defaultValue": "false"
             },
+            "includeDefaults": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `false` to leave the defaults of the schema out of the value,\nso that it stays as it was given until the user changes something. The\nform still shows the defaults. A default the user changes is in the\nvalue from then on, and so are the defaults that a change brings in,\nsuch as those of a new list item or of fields that depend on the\nchanged one. Pass the value the form emits back in as `value`.\nThe form validates what it shows, defaults included. When the user\nchanges everything back, the value is what the form was given, also\nwhen that is `null` or `undefined`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "include-defaults",
+                "defaultValue": "true"
+            },
             "highlightedField": {
                 "type": "unknown",
                 "mutable": false,
@@ -535,6 +610,9 @@ export class Form {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
                 "propName": "headingLevel",
                 "methodName": "handleHeadingLevelChange"
             }, {

package/dist/collection/components/form/form.test-schemas.js

@@ -896,3 +896,53 @@ export const untitledRowSchema = {
         },
     },
 };
+export const dependencyWithDefaultsSchema = {
+    type: 'object',
+    properties: {
+        columns: { type: 'integer', title: 'Columns', default: 5 },
+        limetype: { type: 'string', title: 'Limetype' },
+    },
+    dependencies: {
+        limetype: {
+            properties: {
+                propertyName: {
+                    type: 'string',
+                    title: 'Name property',
+                    default: 'name',
+                },
+            },
+        },
+    },
+};
+export const dependencyWithChangingDefaultSchema = {
+    type: 'object',
+    properties: {
+        limetype: { type: 'string', title: 'Limetype' },
+    },
+    dependencies: {
+        limetype: {
+            oneOf: [
+                {
+                    properties: {
+                        limetype: { const: 'person' },
+                        propertyName: {
+                            type: 'string',
+                            title: 'Name property',
+                            default: 'name',
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        limetype: { const: 'company' },
+                        propertyName: {
+                            type: 'string',
+                            title: 'Name property',
+                            default: 'companyName',
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

package/dist/collection/components/pagination/pagination.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import translate from "../../global/translations";
 import { createRandomString } from "../../util/random-string";
-import { getPrimarySubtag } from "../../util/language";
+import { getSupportedLocale } from "../../util/language";
 import { getPageSlots } from "./pagination.util";
 const FIRST_PAGE = 1;
 const DEFAULT_PAGE_SIZE = 100;
@@ -304,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: '924becb588f7d773572b61865b9dd79b14171153' }, h("nav", { key: 'f517b62cf0107c912d576f08e9d99594f868be44', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '21758520849acfe32f43e86570fe60a040cf2748', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: '7c47cdc658859b4cd8199ef92ebd9bc48275a8ae' }, h("nav", { key: '3bba45547a7183a4b1df58294a56788f9b2e078f', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '60fff33d8e135b1605d0a0f68b6c1ede1b571281', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -620,9 +620,7 @@ export class Pagination {
     }
     /**
      * What the jump form is given, so that the one warning about a language
-     * this browser cannot write numbers in describes both of us. A tag it
-     * accepts but does not support, `zz`, resolves to the viewer's own locale
-     * rather than throwing, so asking the formatter is the only way to know.
+     * this browser cannot write numbers in describes both of us.
      */
     get languageForNumbers() {
         var _a;
@@ -630,31 +628,21 @@ export class Pagination {
         return this.settledLanguage;
     }
     /**
-     * `Intl.NumberFormat` throws on a language it cannot parse, and this is
-     * called from `render`, so an unusable one would leave the control drawing
-     * nothing at all — the single state a user cannot click their way out of.
-     * `src/util/language.ts` states the rule this keeps.
-     *
-     * A tag it cannot parse throws; a well-formed tag it does not support, like
-     * `zz`, does not — it quietly resolves to whatever locale the machine runs
-     * in. Both end up formatting numbers in something other than what was
-     * asked for, so both are worth saying out loud.
+     * This is called from `render`, so a language that `Intl` cannot write
+     * numbers in must not throw, or the control would draw nothing at all —
+     * the single state a user cannot click their way out of.
+     * `getSupportedLocale` in `src/util/language.ts` decides which languages
+     * those are.
      *
      * @returns a formatter, in the given language where that is possible
      */
     createNumberFormat() {
         const { language } = this;
-        try {
-            const format = new Intl.NumberFormat(language);
-            const resolved = format.resolvedOptions().locale;
-            if (getPrimarySubtag(resolved) === getPrimarySubtag(language)) {
-                this.warnedAbout.delete('language');
-                this.settledLanguage = language;
-                return format;
-            }
-        }
-        catch (_a) {
-            // Fall through to the warning below.
+        const locale = getSupportedLocale(language);
+        if (locale) {
+            this.warnedAbout.delete('language');
+            this.settledLanguage = language;
+            return new Intl.NumberFormat(locale);
         }
         this.warnOnce('language', language, () => `\`language\` must be one this browser can write numbers in, but was ${JSON.stringify(language)}. Using ${FALLBACK_LANGUAGE}.`);
         // Where the translations land for the same unusable value, rather than

package/dist/collection/util/language.js

@@ -22,3 +22,32 @@ export function getPrimarySubtag(language) {
     }
     return language.toLowerCase().split('-', 1)[0];
 }
+/**
+ * The locale that `Intl` writes numbers and dates in for `language`, or
+ * `undefined` when it cannot write in that language. `Intl` throws on a
+ * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
+ * locale for one it does not know, such as `zz`. A component that writes in
+ * its `language` while it renders checks it here, and falls back to English
+ * when this gives `undefined`.
+ *
+ * Examples:
+ *  - "sv" => "sv"
+ *  - "SV-se" => "sv-SE"
+ *  - "sv_SE" => undefined
+ *  - "zz" => undefined
+ *  - undefined => undefined
+ *
+ * @param language - the language to write in
+ * @returns the locale, or `undefined`
+ */
+export function getSupportedLocale(language) {
+    if (typeof language !== 'string') {
+        return;
+    }
+    try {
+        return Intl.NumberFormat.supportedLocalesOf(language)[0];
+    }
+    catch (_a) {
+        return;
+    }
+}

package/dist/esm/language-VamkUr90.js

@@ -0,0 +1,55 @@
+/**
+ * Reduce a language to the primary subtag that our language maps are keyed by.
+ *
+ * A `language` prop is typed, but a custom element takes whatever string an
+ * attribute carries — commonly a full BCP 47 tag such as `nb-NO`, since a host
+ * application often derives the language from `document.documentElement.lang`.
+ * Anything that is not a string must resolve rather than throw, so that an
+ * unexpected value can never break a component's render.
+ *
+ * Examples:
+ *  - "nb" => "nb"
+ *  - "nb-NO" => "nb"
+ *  - "SV-SE" => "sv"
+ *  - undefined => ""
+ *
+ * @param language - the language to reduce
+ * @returns the lower-cased primary subtag, or an empty string
+ */
+function getPrimarySubtag(language) {
+    if (typeof language !== 'string') {
+        return '';
+    }
+    return language.toLowerCase().split('-', 1)[0];
+}
+/**
+ * The locale that `Intl` writes numbers and dates in for `language`, or
+ * `undefined` when it cannot write in that language. `Intl` throws on a
+ * tag it cannot read, such as `sv_SE`, and quietly uses the viewer's own
+ * locale for one it does not know, such as `zz`. A component that writes in
+ * its `language` while it renders checks it here, and falls back to English
+ * when this gives `undefined`.
+ *
+ * Examples:
+ *  - "sv" => "sv"
+ *  - "SV-se" => "sv-SE"
+ *  - "sv_SE" => undefined
+ *  - "zz" => undefined
+ *  - undefined => undefined
+ *
+ * @param language - the language to write in
+ * @returns the locale, or `undefined`
+ */
+function getSupportedLocale(language) {
+    if (typeof language !== 'string') {
+        return;
+    }
+    try {
+        return Intl.NumberFormat.supportedLocalesOf(language)[0];
+    }
+    catch (_a) {
+        return;
+    }
+}
+
+export { getPrimarySubtag as a, getSupportedLocale as g };