@limetech/lime-elements 38.26.0 → 38.27.0

package/dist/collection/components/list-item/list-item.css

@@ -159,19 +159,48 @@ label.boolean-input-label {
   border: 0.125rem solid;
   border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
   background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
-}
-.checked .box, .boolean-input:has(input[type=checkbox]:checked) .box, .boolean-input:has(input[type=radio]:checked) .box {
+  /*
+   * NOTE: Original selectors using `:has()` are commented out due to Safari
+   * rendering bugs where descendant transitions (e.g. SVG stroke animations)
+   * or box/background updates sometimes fail to animate or even repaint
+   * reliably when the state change is detected only via `:has()`.
+   *
+   * Original (kept for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:checked) &,
+   * .boolean-input:has(input[type='radio']:checked) & {
+   *   ...
+   * }
+   *
+   * Replacement uses adjacency: the markup places the `<input>` immediately
+   * before .box, so we can select the checked state with
+   * input:checked + .box. We retain the explicit `.checked` class pathway in
+   * case some templates toggle that class manually.
+   *
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
+   */
+}
+.checked .box, .boolean-input > input[type=checkbox]:checked + .box, .boolean-input > input[type=radio]:checked + .box {
   background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
   border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 .disabled .box {
   opacity: 0.4;
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box {
+.boolean-input:not(.disabled):hover .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-hovered);
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box {
+.boolean-input:not(.disabled):active .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-pressed);
 }
@@ -181,8 +210,15 @@ label.boolean-input-label {
   position: absolute;
   inset: -0.1875rem;
   border-radius: inherit;
-}
-.boolean-input:has(input[type=checkbox]:focus-visible) .box:before, .boolean-input:has(input[type=radio]:focus-visible) .box:before {
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:focus-visible) &,
+   * .boolean-input:has(input[type='radio']:focus-visible) & { ...}
+   */
+}
+.boolean-input > input[type=checkbox]:focus-visible + .box:before, .boolean-input > input[type=radio]:focus-visible + .box:before {
   will-change: box-shadow;
   box-shadow: var(--shadow-depth-8-focused);
 }
@@ -195,8 +231,9 @@ label.boolean-input-label {
   border-radius: 1rem;
   opacity: 0;
   background-color: rgb(var(--color-white));
+  /* Hover fallback for pseudo-element (see explanation above). */
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after {
+.boolean-input:not(.disabled):hover .box:after {
   will-change: opacity, box-shadow, transform, width;
 }
 
@@ -242,6 +279,32 @@ label.boolean-input-label {
 
 .checkbox {
   --limel-boolean-input-box-border-radius: 0.25rem;
+  /*
+   * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have
+   * a rendering bug where transitions on descendants whose end state is triggered
+   * ONLY via a parent selector using `:has()` may not animate. Instead, Safari
+   * sometimes jumps directly to the final state (or never paints the transition)
+   * until a subsequent layout invalidation (e.g. tab switch, resize) happens.
+   *
+   * Workaround: provide an equivalent selector that does NOT rely on `:has()`,
+   * using the adjacency between the input and the visual box. This ensures the
+   * `stroke-dashoffset` transition for the check mark runs reliably in Safari
+   * while keeping the simpler `:has()` version commented for future re-implementation
+   * or cleanup.
+   *
+   * &:not(.indeterminate):has(input[type='checkbox']:checked) {
+   *     svg.check-mark {
+   *         opacity: 1;
+   *         path {
+   *             stroke-dashoffset: 0;
+   *         }
+   *     }
+   * }
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
 }
 .checkbox svg.check-mark {
   position: absolute;
@@ -263,10 +326,10 @@ label.boolean-input-label {
   stroke-dasharray: 29.7833;
   transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark {
+.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark {
   opacity: 1;
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path {
+.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark path {
   stroke-dashoffset: 0;
 }
 

package/dist/collection/style/internal/boolean-input.scss

@@ -110,9 +110,31 @@ label.boolean-input-label {
         rgb(var(--contrast-300))
     );
 
+    /*
+     * NOTE: Original selectors using `:has()` are commented out due to Safari
+     * rendering bugs where descendant transitions (e.g. SVG stroke animations)
+     * or box/background updates sometimes fail to animate or even repaint
+     * reliably when the state change is detected only via `:has()`.
+     *
+     * Original (kept for future re-implementation, or cleanup):
+     * .boolean-input:has(input[type='checkbox']:checked) &,
+     * .boolean-input:has(input[type='radio']:checked) & {
+     *   ...
+     * }
+     *
+     * Replacement uses adjacency: the markup places the `<input>` immediately
+     * before .box, so we can select the checked state with
+     * input:checked + .box. We retain the explicit `.checked` class pathway in
+     * case some templates toggle that class manually.
+     *
+     * Using the `:has()` selector is more reliable, because it doesn't
+     * depend on the DOM structure (e.g. if the markup changes and the input is
+     * no longer adjacent to the box), but Safari support for `:has()` is still
+     * somewhat inconsistent.
+     */
     .checked &,
-    .boolean-input:has(input[type='checkbox']:checked) &,
-    .boolean-input:has(input[type='radio']:checked) & {
+    .boolean-input > input[type='checkbox']:checked + &,
+    .boolean-input > input[type='radio']:checked + & {
         background-color: var(
             --lime-primary-color,
             var(--limel-theme-primary-color)
@@ -127,12 +149,19 @@ label.boolean-input-label {
         opacity: 0.4;
     }
 
-    .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+    /*
+     * See previous comment about Safari rendering bugs ☝️.
+     *
+     * Original (kept for for future re-implementation, or cleanup):
+     * .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
+     * .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
+     */
+    .boolean-input:not(.disabled):hover & {
         will-change: box-shadow;
         box-shadow: var(--button-shadow-hovered);
     }
 
-    .boolean-input:not(.disabled):has(label.boolean-input-label:active) & {
+    .boolean-input:not(.disabled):active & {
         will-change: box-shadow;
         box-shadow: var(--button-shadow-pressed);
     }
@@ -145,10 +174,16 @@ label.boolean-input-label {
         inset: -0.1875rem; // 3px
         border-radius: inherit;
 
-        .boolean-input:has(input[type='checkbox']:focus-visible) &,
-        .boolean-input:has(input[type='radio']:focus-visible) & {
+        /*
+         * See previous comment about Safari rendering bugs ☝️.
+         *
+         * Original (kept for for future re-implementation, or cleanup):
+         * .boolean-input:has(input[type='checkbox']:focus-visible) &,
+         * .boolean-input:has(input[type='radio']:focus-visible) & { ...}
+         */
+        .boolean-input > input[type='checkbox']:focus-visible + &,
+        .boolean-input > input[type='radio']:focus-visible + & {
             will-change: box-shadow;
-
             box-shadow: var(--shadow-depth-8-focused);
         }
     }
@@ -171,7 +206,8 @@ label.boolean-input-label {
 
         background-color: rgb(var(--color-white));
 
-        .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+        /* Hover fallback for pseudo-element (see explanation above). */
+        .boolean-input:not(.disabled):hover & {
             will-change: opacity, box-shadow, transform, width;
         }
     }

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":"AAwSA;;;;IAIY;AAAZ,WAAY,cAAc;;;;EAItB,qCAAmB,CAAA;;;;EAKnB,+BAAa,CAAA;;;;;;;;EASb,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc;;ACvJ1B;;;;IAIY;AAAZ,WAAY,oBAAoB;;;;EAI5B,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,mCAAW,CAAA;;;;EAKX,uCAAe,CAAA;AACnB,CAAC,EAzBW,oBAAoB,KAApB,oBAAoB;;;;","names":[],"sources":["./src/components/form/form.types.ts","./src/components/table/table.types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema';\nimport { Help } from '../help/help.types';\nimport { EventEmitter } from '@stencil/core';\n\n/**\n * EventEmitter from `@stencil/core`.\n *\n * @public\n */\nexport { EventEmitter } from '@stencil/core';\n\ndeclare module 'json-schema' {\n    interface JSONSchema7 {\n        /**\n         * Unique identifier for the schema\n         * @internal\n         */\n        id?: string;\n\n        /**\n         * Lime elements specific options that can be specified in a schema\n         */\n        lime?: Omit<LimeSchemaOptions, 'layout'> & {\n            layout?: Partial<LimeLayoutOptions>;\n        };\n    }\n}\n\n/**\n * @public\n */\nexport interface ValidationStatus {\n    /**\n     * True if the form is valid, false otherwise\n     *\n     * If the form is invalid, any errors can be found on the `errors` property\n     */\n    valid: boolean;\n\n    /**\n     * List of validation errors\n     */\n    errors?: FormError[];\n}\n\n/**\n * @public\n */\nexport interface FormError {\n    /**\n     * Name of the error\n     */\n    name: string;\n\n    /**\n     * Params of the error\n     */\n    params?: unknown;\n\n    /**\n     * Name of the invalid property\n     */\n    property: string;\n\n    /**\n     * Path to the property within the schema\n     */\n    schemaPath: string;\n\n    /**\n     * String describing the error\n     */\n    message: string;\n}\n\n/**\n * @public\n */\nexport type ValidationError = {\n    /**\n     * Name of the field the error belongs to\n     */\n    [key: string]: string[] | ValidationError;\n};\n\n/**\n * @public\n */\nexport interface FormComponent<T = any> {\n    /**\n     * The value of the current property\n     */\n    value: T;\n\n    /**\n     * Whether or not the current property is required\n     */\n    required?: boolean;\n\n    /**\n     * Whether or not the current property is readonly\n     */\n    readonly?: boolean;\n\n    /**\n     * Whether or not the current property is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * The label of the current property\n     */\n    label?: string;\n\n    /**\n     * The helper text for the current property\n     */\n    helperText?: string;\n\n    /**\n     * Additional contextual information about the form\n     */\n    formInfo?: FormInfo;\n\n    /**\n     * The event to emit when the value of the current property has changed\n     */\n    change: EventEmitter<T>;\n}\n\n/**\n * @public\n */\nexport interface FormInfo {\n    /**\n     * The schema of the current property\n     */\n    schema?: FormSchema;\n\n    /**\n     * The schema of the whole form\n     */\n    rootSchema?: FormSchema;\n\n    /**\n     * A tree of errors for this property and its children\n     */\n    errorSchema?: object;\n\n    /**\n     * The value of the whole form\n     */\n    rootValue?: any;\n\n    /**\n     * The name of the current property\n     */\n    name?: string;\n\n    /**\n     * Path to the property within the schema\n     */\n    schemaPath?: string[];\n}\n\n/**\n * Lime elements specific options that can be specified under the `lime` key in\n * a schema, e.g.\n *\n * ```ts\n * const schema = {\n *     type: 'object',\n *     lime: {\n *         collapsible: true,\n *     },\n * };\n * ```\n *\n * @public\n */\nexport interface LimeSchemaOptions {\n    /**\n     * When specified on an object it will render all sub components inside a\n     * collapsible section\n     */\n    collapsible?: boolean;\n\n    /**\n     * When `collapsible` is `true`, set this to `false` to make the\n     * collapsible section load in the open state.\n     * Defaults to `true`.\n     */\n    collapsed?: boolean;\n\n    /**\n     * Will render the field using the specified component. The component\n     * should implement the `FormComponent` interface\n     */\n    component?: FormComponentOptions;\n\n    /**\n     * When specified on an object it will render the sub components with the\n     * specified layout\n     */\n    layout?: LimeLayoutOptions;\n\n    /**\n     * Mark the field as disabled\n     */\n    disabled?: boolean;\n\n    help?: string | Partial<Help>;\n}\n\n/**\n * Options for a layout to be used in a form\n * @public\n */\nexport type LimeLayoutOptions = GridLayoutOptions & RowLayoutOptions;\n\n/**\n * Options for a component to be rendered inside a form\n *\n * @public\n */\nexport interface FormComponentOptions {\n    /**\n     * Name of the component\n     */\n    name?: string;\n\n    /**\n     * Extra properties to give the component in addition to the properties\n     * specified on the `FormComponent` interface\n     */\n    props?: Record<string, any>;\n}\n\n/**\n * @public\n */\nexport interface FormLayoutOptions<\n    T extends FormLayoutType | `${FormLayoutType}` = FormLayoutType.Default,\n> {\n    /**\n     * The type of layout to use\n     */\n    type: T;\n}\n\n/**\n * Layout options for a grid layout\n * @public\n */\nexport interface GridLayoutOptions\n    extends FormLayoutOptions<FormLayoutType | `${FormLayoutType}`> {\n    /**\n     * When specified on a component within the grid, the component will take\n     * up the the specified number of columns in the form\n     */\n\n    colSpan?: 1 | 2 | 3 | 4 | 5 | 'all';\n\n    /**\n     * When specified on a component within the grid, the component will take\n     * up the the specified number of rows in the form\n     */\n    rowSpan?: number;\n\n    /**\n     * Number of columns to use in the layout\n     */\n\n    columns?: 1 | 2 | 3 | 4 | 5;\n\n    /**\n     * Attempts to fill in holes earlier in the grid, if smaller items come up\n     * later. This may cause items to appear out-of-order, when doing so would\n     * fill holes left by larger items. Defaults to `true`.\n     */\n    dense?: boolean;\n}\n\n/**\n * Layout options for a row layout\n * @public\n */\nexport interface RowLayoutOptions\n    extends FormLayoutOptions<FormLayoutType | `${FormLayoutType}`> {\n    /**\n     * When specified on a field, the chosen icon will be displayed\n     * on the left side of the row, beside the title.\n     */\n    icon?: string;\n}\n\n/**\n * Represents the layout types for a form.\n * @public\n */\nexport enum FormLayoutType {\n    /**\n     * The default layout\n     */\n    Default = 'default',\n\n    /**\n     * Render the form fields using a responsive grid layout\n     */\n    Grid = 'grid',\n\n    /**\n     * Render the form fields in full-width rows.\n     * Each row can have a leading `icon`, and a field.\n     * `title` and `description` provided by the schema will be placed\n     * on the row itself, and not on the field.\n     * This layout is good for creating UIs for user settings pages.\n     */\n    Row = 'row',\n}\n\n/**\n * Represents the JSON schema with Lime specific options\n * @public\n */\nexport interface FormSchema<T extends Record<string, any> = any>\n    extends JSONSchema7 {\n    /**\n     * The value of \"items\" MUST be either a valid JSON Schema or an array\n     * of valid JSON Schemas.\n     *\n     * This keyword determines how child instances validate for arrays, and\n     * does not directly validate the immediate instance itself.\n     *\n     * If \"items\" is a schema, validation succeeds if all elements in the\n     * array successfully validate against that schema.\n     *\n     * If \"items\" is an array of schemas, validation succeeds if each\n     * element of the instance validates against the schema at the same\n     * position, if any.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.4.1\n     */\n    items?: FormSchemaArrayItem<T> | Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * The value of \"items\" MUST be either a valid JSON Schema or an array\n     * of valid JSON Schemas.\n     *\n     * This keyword determines how child instances validate for arrays, and\n     * does not directly validate the immediate instance itself.\n     *\n     * If \"items\" is a schema, validation succeeds if all elements in the\n     * array successfully validate against that schema.\n     *\n     * If \"items\" is an array of schemas, validation succeeds if each\n     * element of the instance validates against the schema at the same\n     * position, if any.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.4.2\n     */\n    additionalItems?: FormSchemaArrayItem<T>;\n\n    /**\n     * The value of this keyword MUST be a valid JSON Schema.\n     *\n     * An array instance is valid against \"contains\" if at least one of its\n     * elements is valid against the given schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.4.6\n     */\n    contains?: FormSchemaArrayItem<T>;\n\n    /**\n     * The value of this keyword MUST be an array.  Elements of this array,\n     * if any, MUST be strings, and MUST be unique.\n     *\n     * An object instance is valid against this keyword if every item in the\n     * array is the name of a property in the instance.\n     *\n     * Omitting this keyword has the same behavior as an empty array.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.3\n     */\n    required?: Array<ReplaceObjectType<T, Extract<keyof T, string>, string>>;\n\n    /**\n     * The value of \"properties\" MUST be an object.  Each value of this\n     * object MUST be a valid JSON Schema.\n     *\n     * This keyword determines how child instances validate for objects, and\n     * does not directly validate the immediate instance itself.\n     *\n     * Validation succeeds if, for each name that appears in both the\n     * instance and as a name within this keyword's value, the child\n     * instance for that name successfully validates against the\n     * corresponding schema.\n     *\n     * Omitting this keyword has the same behavior as an empty object.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.4\n     */\n    properties?: ReplaceObjectType<\n        T,\n        FormSubKeySchema<T>,\n        Record<string, FormSchema>\n    >;\n\n    /**\n     * This keyword's value MUST be a non-empty array.  Each item of the\n     * array MUST be a valid JSON Schema.\n     *\n     * An instance validates successfully against this keyword if it\n     * validates successfully against all schemas defined by this keyword's\n     * value.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.1\n     */\n    allOf?: Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * This keyword's value MUST be a non-empty array.  Each item of the\n     * array MUST be a valid JSON Schema.\n     *\n     * An instance validates successfully against this keyword if it\n     * validates successfully against at least one schema defined by this\n     * keyword's value.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.2\n     */\n    anyOf?: Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * This keyword's value MUST be a non-empty array.  Each item of the\n     * array MUST be a valid JSON Schema.\n     *\n     * An instance validates successfully against this keyword if it\n     * validates successfully against exactly one schema defined by this\n     * keyword's value.\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.3\n     */\n    oneOf?: Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * The value of \"patternProperties\" MUST be an object.  Each property\n     * name of this object SHOULD be a valid regular expression, according\n     * to the ECMA 262 regular expression dialect.  Each property value of\n     * this object MUST be a valid JSON Schema.\n     *\n     * This keyword determines how child instances validate for objects, and\n     * does not directly validate the immediate instance itself.  Validation\n     * of the primitive instance type against this keyword always succeeds.\n     *\n     * Validation succeeds if, for each instance name that matches any\n     * regular expressions that appear as a property name in this keyword's\n     * value, the child instance for that name successfully validates\n     * against each schema that corresponds to a matching regular\n     * expression.\n     *\n     * Omitting this keyword has the same behavior as an empty object.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.5\n     */\n    patternProperties?: Record<string, FormSchema>;\n\n    /**\n     * The value of \"additionalProperties\" MUST be a valid JSON Schema.\n     *\n     * This keyword determines how child instances validate for objects, and\n     * does not directly validate the immediate instance itself.\n     *\n     * Validation with \"additionalProperties\" applies only to the child\n     * values of instance names that do not match any names in \"properties\",\n     * and do not match any regular expression in \"patternProperties\".\n     *\n     * For all such properties, validation succeeds if the child instance\n     * validates against the \"additionalProperties\" schema.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.6\n     */\n    additionalProperties?: FormSchema | boolean;\n\n    /**\n     * This keyword specifies rules that are evaluated if the instance is an\n     * object and contains a certain property.\n     *\n     * This keyword's value MUST be an object.  Each property specifies a\n     * dependency.  Each dependency value MUST be an array or a valid JSON\n     * Schema.\n     *\n     * If the dependency value is a subschema, and the dependency key is a\n     * property in the instance, the entire instance must validate against\n     * the dependency value.\n     *\n     * If the dependency value is an array, each element in the array, if\n     * any, MUST be a string, and MUST be unique.  If the dependency key is\n     * a property in the instance, each of the items in the dependency value\n     * must be a property that exists in the instance.\n     *\n     * Omitting this keyword has the same behavior as an empty object.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.7\n     */\n    dependencies?: Record<string, FormSchema | string[]>;\n\n    /**\n     * The value of \"propertyNames\" MUST be a valid JSON Schema.\n     *\n     * If the instance is an object, this keyword validates if every\n     * property name in the instance validates against the provided schema.\n     * Note the property name that the schema is testing will always be a\n     * string.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.8\n     */\n    propertyNames?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * This validation outcome of this keyword's subschema has no direct\n     * effect on the overall validation result.  Rather, it controls which\n     * of the \"then\" or \"else\" keywords are evaluated.\n     *\n     * Instances that successfully validate against this keyword's subschema\n     * MUST also be valid against the subschema value of the \"then\" keyword,\n     * if present.\n     *\n     * Instances that fail to validate against this keyword's subschema MUST\n     * also be valid against the subschema value of the \"else\" keyword, if\n     * present.\n     *\n     * If annotations (Section 3.3) are being collected, they are collected\n     * from this keyword's subschema in the usual way, including when the\n     * keyword is present without either \"then\" or \"else\".\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.6.1\n     */\n    if?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * This validation outcome of this keyword's subschema has no direct\n     * effect on the overall validation result.  Rather, it controls which\n     * of the \"then\" or \"else\" keywords are evaluated.\n     *\n     * Instances that successfully validate against this keyword's subschema\n     * MUST also be valid against the subschema value of the \"then\" keyword,\n     * if present.\n     *\n     * Instances that fail to validate against this keyword's subschema MUST\n     * also be valid against the subschema value of the \"else\" keyword, if\n     * present.\n     *\n     * If annotations (Section 3.3) are being collected, they are collected\n     * from this keyword's subschema in the usual way, including when the\n     * keyword is present without either \"then\" or \"else\".\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.6.2\n     */\n    then?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * When \"if\" is present, and the instance fails to validate against its\n     * subschema, then valiation succeeds against this keyword if the\n     * instance successfully validates against this keyword's subschema.\n     *\n     * This keyword has no effect when \"if\" is absent, or when the instance\n     * successfully validates against its subschema.  Implementations MUST\n     * NOT evaluate the instance against this keyword, for either validation\n     * or annotation collection purposes, in such cases.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.6.3\n     */\n    else?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * An instance is valid against this keyword if it fails to validate\n     * successfully against the schema defined by this keyword.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.4\n     */\n    not?: FormSchema;\n\n    /**\n     * The \"$defs\" keywords provides a standardized location for\n     * schema authors to inline re-usable JSON Schemas into a more general\n     * schema.  The keyword does not directly affect the validation result.\n     *\n     * This keyword's value MUST be an object.  Each member value of this\n     * object MUST be a valid JSON Schema.\n     *\n     * As an example, here is a schema describing an array of positive\n     * integers, where the positive integer constraint is a subschema in\n     * \"definitions\":\n     * ```\n     * {\n     *     \"type\": \"array\",\n     *     \"items\": { \"$ref\": \"#/definitions/positiveInteger\" },\n     *     \"definitions\": {\n     *         \"positiveInteger\": {\n     *             \"type\": \"integer\",\n     *             \"exclusiveMinimum\": 0\n     *         }\n     *     }\n     * }\n     * ```\n     *\n     * $defs is the newer keyword introduced in the JSON Schema Draft 2019-09, while definitions is from the older drafts.\n     *\n     * The main difference is that definitions is no longer an official keyword in the latest JSON Schema specification (Draft 2019-09 and later),\n     * but it is still widely supported for backward compatibility.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-9\n     */\n    $defs?: Record<string, FormSchema>;\n\n    /**\n     * The \"definitions\" keywords provides a standardized location for\n     * schema authors to inline re-usable JSON Schemas into a more general\n     * schema.  The keyword does not directly affect the validation result.\n     *\n     * This keyword's value MUST be an object.  Each member value of this\n     * object MUST be a valid JSON Schema.\n     *\n     * As an example, here is a schema describing an array of positive\n     * integers, where the positive integer constraint is a subschema in\n     * \"definitions\":\n     * ```\n     * {\n     *     \"type\": \"array\",\n     *     \"items\": { \"$ref\": \"#/definitions/positiveInteger\" },\n     *     \"definitions\": {\n     *         \"positiveInteger\": {\n     *             \"type\": \"integer\",\n     *             \"exclusiveMinimum\": 0\n     *         }\n     *     }\n     * }\n     * ```\n     *\n     * $defs is the newer keyword introduced in the JSON Schema Draft 2019-09, while definitions is from the older drafts.\n     *\n     * The main difference is that definitions is no longer an official keyword in the latest JSON Schema specification (Draft 2019-09 and later),\n     * but it is still widely supported for backward compatibility.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-9\n     */\n    definitions?: Record<string, FormSchema>;\n}\n\n/**\n * Utility type for replacing object types with a specified type\n * @public\n */\nexport type ReplaceObjectType<T, AllowedType, ElseType> = T extends any[]\n    ? ElseType\n    : T extends Record<string, any>\n      ? AllowedType\n      : ElseType;\n\n/**\n * Utility type for supporting nested sub items in arrays\n * @public\n */\nexport type FormSchemaArrayItem<T> = T extends any[]\n    ? FormSchema<T[Extract<keyof T, number>]>\n    : FormSchema;\n\n/**\n * Utility type for recursive properties in a schema\n * @public\n */\nexport type FormSubKeySchema<TObj> = Partial<{\n    [Key in Extract<keyof TObj, any>]: FormSchema<TObj[Key]>;\n}>;\n","/**\n * Defines the data for a table\n * @public\n */\nexport interface Column<T extends object = any> {\n    /**\n     * Column title to be displayed\n     */\n    title: string;\n\n    /**\n     * Name of the field in the data\n     */\n    field: keyof T;\n\n    /**\n     * Function to format the value before rendering\n     */\n    formatter?: TableFormatter;\n\n    /**\n     * Component used to render the field value\n     */\n    component?: TableComponentDefinition;\n\n    /**\n     * Type of aggregator to use for the column\n     */\n    aggregator?: ColumnAggregatorType | ColumnAggregatorFunction<T>;\n\n    /**\n     * A component used to render inside the column header\n     */\n    headerComponent?: TableComponentDefinition;\n\n    /**\n     * Sets the horizontal text alignment for the column\n     */\n    horizontalAlign?: 'left' | 'center' | 'right';\n\n    /**\n     * Defines whether end-user can sort a column\n     */\n    headerSort?: boolean;\n}\n\n/**\n * Definition for a formatter function\n * @param value - The value to be formatted\n * @param data - The data for the current row\n * @returns The formatted value\n * @public\n */\nexport type TableFormatter = (value: any, data?: object) => string;\n\n/**\n * The `component` key in the schema uses this interface to define a\n * component to be rendered inside a cell in the table.\n *\n * @note The table will display the component as `inline-block` in order\n * to give the column the correct size. If the component should have the\n * full width of the column, this might have to be overridden by setting\n * the display mode to `block`, e.g.\n *\n * ```css\n * :host(*) {\n *     display: block !important;\n * }\n * ```\n * @public\n */\nexport interface TableComponentDefinition {\n    /**\n     * Name of the component\n     */\n    name: string;\n\n    /**\n     * Properties to send to the component\n     */\n    props?: Record<string, any>;\n\n    /**\n     * Factory for creating properties dynamically for a custom component.\n     *\n     * The properties returned from this function will be merged with the\n     * `props` properties when the component is created.\n     *\n     * When the propsFactory is used for header components there will be no data available.\n     *\n     * @param data - The data for the current row\n     * @returns Properties for the component\n     */\n    propsFactory?: (data: object) => Record<string, any>;\n}\n\n/**\n * Interface for custom components rendered inside a `limel-table`.\n * @public\n */\nexport interface TableComponent<T extends object = any> {\n    /**\n     * Name of the field being rendered\n     */\n    field?: string;\n\n    /**\n     * Value being rendered\n     */\n    value?: any;\n\n    /**\n     * Data for the current row of the table\n     */\n    data?: T;\n}\n\n/**\n * Indicates whether the specified column is sorted ascending or descending.\n * @public\n */\nexport interface ColumnSorter {\n    /**\n     * The column being sorted\n     */\n    column: Column;\n\n    /**\n     * The direction to sort on\n     */\n    direction: 'ASC' | 'DESC';\n}\n\n/**\n * Specifies the current page, and which columns the table is currently sorted on.\n * @public\n */\nexport interface TableParams {\n    /**\n     * The current page being set\n     */\n    page: number;\n\n    /**\n     * Sorters applied to the current page\n     */\n    sorters?: ColumnSorter[];\n}\n\n/**\n * The built-in aggregators available for columns\n * @public\n */\nexport enum ColumnAggregatorType {\n    /**\n     * Calculates the average value of all numerical cells in the column\n     */\n    Average = 'avg',\n\n    /**\n     * Displays the maximum value from all numerical cells in the column\n     */\n    Maximum = 'max',\n\n    /**\n     * Displays the minimum value from all numerical cells in the column\n     */\n    Minimum = 'min',\n\n    /**\n     * Displays the sum of all numerical cells in the column\n     */\n    Sum = 'sum',\n\n    /**\n     * Counts the number of non empty cells in the column\n     */\n    Count = 'count',\n}\n\n/**\n * Instead of using one of the built-in aggregators, it is possible to\n * define a custom aggregator function.\n *\n * @param column - the configuration for the column\n * @param values - list of all values to be aggregated\n * @param data - list of all objects to be aggregated\n * @returns the aggregated data\n *\n * @public\n */\nexport type ColumnAggregatorFunction<T = object> = (\n    column?: Column,\n    values?: any[],\n    data?: T[]\n) => any;\n\n/**\n * Defines aggregate values for columns\n * @public\n */\nexport interface ColumnAggregate {\n    /**\n     * The name of the `Column` field\n     */\n    field: string;\n    /**\n     * The aggregate value\n     */\n    value: any;\n}\n\n/**\n * Data for identifying a row of the table\n * @public\n */\nexport type RowData = {\n    id?: string | number;\n};\n"],"version":3}
+{"file":"index.js","mappings":"AA6SA;;;;IAIY;AAAZ,WAAY,cAAc;;;;EAItB,qCAAmB,CAAA;;;;EAKnB,+BAAa,CAAA;;;;;;;;EASb,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc;;AC5J1B;;;;IAIY;AAAZ,WAAY,oBAAoB;;;;EAI5B,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,mCAAW,CAAA;;;;EAKX,uCAAe,CAAA;AACnB,CAAC,EAzBW,oBAAoB,KAApB,oBAAoB;;;;","names":[],"sources":["./src/components/form/form.types.ts","./src/components/table/table.types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema';\nimport { Help } from '../help/help.types';\nimport { EventEmitter } from '@stencil/core';\n\n/**\n * EventEmitter from `@stencil/core`.\n *\n * @public\n */\nexport { EventEmitter } from '@stencil/core';\n\ndeclare module 'json-schema' {\n    interface JSONSchema7 {\n        /**\n         * Unique identifier for the schema\n         * @internal\n         */\n        id?: string;\n\n        /**\n         * Lime elements specific options that can be specified in a schema\n         */\n        lime?: Omit<LimeSchemaOptions, 'layout'> & {\n            layout?: Partial<LimeLayoutOptions>;\n        };\n    }\n}\n\n/**\n * @public\n */\nexport interface ValidationStatus {\n    /**\n     * True if the form is valid, false otherwise\n     *\n     * If the form is invalid, any errors can be found on the `errors` property\n     */\n    valid: boolean;\n\n    /**\n     * List of validation errors\n     */\n    errors?: FormError[];\n}\n\n/**\n * @public\n */\nexport interface FormError {\n    /**\n     * Name of the error\n     */\n    name: string;\n\n    /**\n     * Params of the error\n     */\n    params?: unknown;\n\n    /**\n     * Name of the invalid property\n     */\n    property: string;\n\n    /**\n     * Path to the property within the schema\n     */\n    schemaPath: string;\n\n    /**\n     * String describing the error\n     */\n    message: string;\n}\n\n/**\n * @public\n */\nexport type ValidationError = {\n    /**\n     * Name of the field the error belongs to\n     */\n    [key: string]: string[] | ValidationError;\n};\n\n/**\n * @public\n */\nexport interface FormComponent<T = any> {\n    /**\n     * The value of the current property\n     */\n    value: T;\n\n    /**\n     * Whether or not the current property is required\n     */\n    required?: boolean;\n\n    /**\n     * Whether or not the current property is readonly\n     */\n    readonly?: boolean;\n\n    /**\n     * Whether or not the current property is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * The label of the current property\n     */\n    label?: string;\n\n    /**\n     * The helper text for the current property\n     */\n    helperText?: string;\n\n    /**\n     * Additional contextual information about the form\n     */\n    formInfo?: FormInfo;\n\n    /**\n     * The event to emit when the value of the current property has changed\n     */\n    change: EventEmitter<T>;\n}\n\n/**\n * @public\n */\nexport interface FormInfo {\n    /**\n     * The schema of the current property\n     */\n    schema?: FormSchema;\n\n    /**\n     * The schema of the whole form\n     */\n    rootSchema?: FormSchema;\n\n    /**\n     * A tree of errors for this property and its children\n     */\n    errorSchema?: object;\n\n    /**\n     * The value of the whole form\n     */\n    rootValue?: any;\n\n    /**\n     * The name of the current property\n     */\n    name?: string;\n\n    /**\n     * Path to the property within the schema\n     */\n    schemaPath?: string[];\n}\n\n/**\n * Lime elements specific options that can be specified under the `lime` key in\n * a schema, e.g.\n *\n * ```ts\n * const schema = {\n *     type: 'object',\n *     lime: {\n *         collapsible: true,\n *     },\n * };\n * ```\n *\n * @public\n */\nexport interface LimeSchemaOptions {\n    /**\n     * When specified on an object it will render all sub components inside a\n     * collapsible section\n     */\n    collapsible?: boolean;\n\n    /**\n     * When `collapsible` is `true`, set this to `false` to make the\n     * collapsible section load in the open state.\n     * Defaults to `true`.\n     */\n    collapsed?: boolean;\n\n    /**\n     * Will render the field using the specified component. The component\n     * should implement the `FormComponent` interface\n     */\n    component?: FormComponentOptions;\n\n    /**\n     * When specified on an object it will render the sub components with the\n     * specified layout\n     */\n    layout?: LimeLayoutOptions;\n\n    /**\n     * Mark the field as disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Hide the field from the UI while preserving its value in the form data.\n     */\n    hidden?: boolean;\n\n    help?: string | Partial<Help>;\n}\n\n/**\n * Options for a layout to be used in a form\n * @public\n */\nexport type LimeLayoutOptions = GridLayoutOptions & RowLayoutOptions;\n\n/**\n * Options for a component to be rendered inside a form\n *\n * @public\n */\nexport interface FormComponentOptions {\n    /**\n     * Name of the component\n     */\n    name?: string;\n\n    /**\n     * Extra properties to give the component in addition to the properties\n     * specified on the `FormComponent` interface\n     */\n    props?: Record<string, any>;\n}\n\n/**\n * @public\n */\nexport interface FormLayoutOptions<\n    T extends FormLayoutType | `${FormLayoutType}` = FormLayoutType.Default,\n> {\n    /**\n     * The type of layout to use\n     */\n    type: T;\n}\n\n/**\n * Layout options for a grid layout\n * @public\n */\nexport interface GridLayoutOptions\n    extends FormLayoutOptions<FormLayoutType | `${FormLayoutType}`> {\n    /**\n     * When specified on a component within the grid, the component will take\n     * up the the specified number of columns in the form\n     */\n\n    colSpan?: 1 | 2 | 3 | 4 | 5 | 'all';\n\n    /**\n     * When specified on a component within the grid, the component will take\n     * up the the specified number of rows in the form\n     */\n    rowSpan?: number;\n\n    /**\n     * Number of columns to use in the layout\n     */\n\n    columns?: 1 | 2 | 3 | 4 | 5;\n\n    /**\n     * Attempts to fill in holes earlier in the grid, if smaller items come up\n     * later. This may cause items to appear out-of-order, when doing so would\n     * fill holes left by larger items. Defaults to `true`.\n     */\n    dense?: boolean;\n}\n\n/**\n * Layout options for a row layout\n * @public\n */\nexport interface RowLayoutOptions\n    extends FormLayoutOptions<FormLayoutType | `${FormLayoutType}`> {\n    /**\n     * When specified on a field, the chosen icon will be displayed\n     * on the left side of the row, beside the title.\n     */\n    icon?: string;\n}\n\n/**\n * Represents the layout types for a form.\n * @public\n */\nexport enum FormLayoutType {\n    /**\n     * The default layout\n     */\n    Default = 'default',\n\n    /**\n     * Render the form fields using a responsive grid layout\n     */\n    Grid = 'grid',\n\n    /**\n     * Render the form fields in full-width rows.\n     * Each row can have a leading `icon`, and a field.\n     * `title` and `description` provided by the schema will be placed\n     * on the row itself, and not on the field.\n     * This layout is good for creating UIs for user settings pages.\n     */\n    Row = 'row',\n}\n\n/**\n * Represents the JSON schema with Lime specific options\n * @public\n */\nexport interface FormSchema<T extends Record<string, any> = any>\n    extends JSONSchema7 {\n    /**\n     * The value of \"items\" MUST be either a valid JSON Schema or an array\n     * of valid JSON Schemas.\n     *\n     * This keyword determines how child instances validate for arrays, and\n     * does not directly validate the immediate instance itself.\n     *\n     * If \"items\" is a schema, validation succeeds if all elements in the\n     * array successfully validate against that schema.\n     *\n     * If \"items\" is an array of schemas, validation succeeds if each\n     * element of the instance validates against the schema at the same\n     * position, if any.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.4.1\n     */\n    items?: FormSchemaArrayItem<T> | Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * The value of \"items\" MUST be either a valid JSON Schema or an array\n     * of valid JSON Schemas.\n     *\n     * This keyword determines how child instances validate for arrays, and\n     * does not directly validate the immediate instance itself.\n     *\n     * If \"items\" is a schema, validation succeeds if all elements in the\n     * array successfully validate against that schema.\n     *\n     * If \"items\" is an array of schemas, validation succeeds if each\n     * element of the instance validates against the schema at the same\n     * position, if any.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.4.2\n     */\n    additionalItems?: FormSchemaArrayItem<T>;\n\n    /**\n     * The value of this keyword MUST be a valid JSON Schema.\n     *\n     * An array instance is valid against \"contains\" if at least one of its\n     * elements is valid against the given schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.4.6\n     */\n    contains?: FormSchemaArrayItem<T>;\n\n    /**\n     * The value of this keyword MUST be an array.  Elements of this array,\n     * if any, MUST be strings, and MUST be unique.\n     *\n     * An object instance is valid against this keyword if every item in the\n     * array is the name of a property in the instance.\n     *\n     * Omitting this keyword has the same behavior as an empty array.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.3\n     */\n    required?: Array<ReplaceObjectType<T, Extract<keyof T, string>, string>>;\n\n    /**\n     * The value of \"properties\" MUST be an object.  Each value of this\n     * object MUST be a valid JSON Schema.\n     *\n     * This keyword determines how child instances validate for objects, and\n     * does not directly validate the immediate instance itself.\n     *\n     * Validation succeeds if, for each name that appears in both the\n     * instance and as a name within this keyword's value, the child\n     * instance for that name successfully validates against the\n     * corresponding schema.\n     *\n     * Omitting this keyword has the same behavior as an empty object.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.4\n     */\n    properties?: ReplaceObjectType<\n        T,\n        FormSubKeySchema<T>,\n        Record<string, FormSchema>\n    >;\n\n    /**\n     * This keyword's value MUST be a non-empty array.  Each item of the\n     * array MUST be a valid JSON Schema.\n     *\n     * An instance validates successfully against this keyword if it\n     * validates successfully against all schemas defined by this keyword's\n     * value.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.1\n     */\n    allOf?: Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * This keyword's value MUST be a non-empty array.  Each item of the\n     * array MUST be a valid JSON Schema.\n     *\n     * An instance validates successfully against this keyword if it\n     * validates successfully against at least one schema defined by this\n     * keyword's value.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.2\n     */\n    anyOf?: Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * This keyword's value MUST be a non-empty array.  Each item of the\n     * array MUST be a valid JSON Schema.\n     *\n     * An instance validates successfully against this keyword if it\n     * validates successfully against exactly one schema defined by this\n     * keyword's value.\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.3\n     */\n    oneOf?: Array<FormSchemaArrayItem<T>>;\n\n    /**\n     * The value of \"patternProperties\" MUST be an object.  Each property\n     * name of this object SHOULD be a valid regular expression, according\n     * to the ECMA 262 regular expression dialect.  Each property value of\n     * this object MUST be a valid JSON Schema.\n     *\n     * This keyword determines how child instances validate for objects, and\n     * does not directly validate the immediate instance itself.  Validation\n     * of the primitive instance type against this keyword always succeeds.\n     *\n     * Validation succeeds if, for each instance name that matches any\n     * regular expressions that appear as a property name in this keyword's\n     * value, the child instance for that name successfully validates\n     * against each schema that corresponds to a matching regular\n     * expression.\n     *\n     * Omitting this keyword has the same behavior as an empty object.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.5\n     */\n    patternProperties?: Record<string, FormSchema>;\n\n    /**\n     * The value of \"additionalProperties\" MUST be a valid JSON Schema.\n     *\n     * This keyword determines how child instances validate for objects, and\n     * does not directly validate the immediate instance itself.\n     *\n     * Validation with \"additionalProperties\" applies only to the child\n     * values of instance names that do not match any names in \"properties\",\n     * and do not match any regular expression in \"patternProperties\".\n     *\n     * For all such properties, validation succeeds if the child instance\n     * validates against the \"additionalProperties\" schema.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.6\n     */\n    additionalProperties?: FormSchema | boolean;\n\n    /**\n     * This keyword specifies rules that are evaluated if the instance is an\n     * object and contains a certain property.\n     *\n     * This keyword's value MUST be an object.  Each property specifies a\n     * dependency.  Each dependency value MUST be an array or a valid JSON\n     * Schema.\n     *\n     * If the dependency value is a subschema, and the dependency key is a\n     * property in the instance, the entire instance must validate against\n     * the dependency value.\n     *\n     * If the dependency value is an array, each element in the array, if\n     * any, MUST be a string, and MUST be unique.  If the dependency key is\n     * a property in the instance, each of the items in the dependency value\n     * must be a property that exists in the instance.\n     *\n     * Omitting this keyword has the same behavior as an empty object.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.7\n     */\n    dependencies?: Record<string, FormSchema | string[]>;\n\n    /**\n     * The value of \"propertyNames\" MUST be a valid JSON Schema.\n     *\n     * If the instance is an object, this keyword validates if every\n     * property name in the instance validates against the provided schema.\n     * Note the property name that the schema is testing will always be a\n     * string.\n     *\n     * Omitting this keyword has the same behavior as an empty schema.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.5.8\n     */\n    propertyNames?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * This validation outcome of this keyword's subschema has no direct\n     * effect on the overall validation result.  Rather, it controls which\n     * of the \"then\" or \"else\" keywords are evaluated.\n     *\n     * Instances that successfully validate against this keyword's subschema\n     * MUST also be valid against the subschema value of the \"then\" keyword,\n     * if present.\n     *\n     * Instances that fail to validate against this keyword's subschema MUST\n     * also be valid against the subschema value of the \"else\" keyword, if\n     * present.\n     *\n     * If annotations (Section 3.3) are being collected, they are collected\n     * from this keyword's subschema in the usual way, including when the\n     * keyword is present without either \"then\" or \"else\".\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.6.1\n     */\n    if?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * This validation outcome of this keyword's subschema has no direct\n     * effect on the overall validation result.  Rather, it controls which\n     * of the \"then\" or \"else\" keywords are evaluated.\n     *\n     * Instances that successfully validate against this keyword's subschema\n     * MUST also be valid against the subschema value of the \"then\" keyword,\n     * if present.\n     *\n     * Instances that fail to validate against this keyword's subschema MUST\n     * also be valid against the subschema value of the \"else\" keyword, if\n     * present.\n     *\n     * If annotations (Section 3.3) are being collected, they are collected\n     * from this keyword's subschema in the usual way, including when the\n     * keyword is present without either \"then\" or \"else\".\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.6.2\n     */\n    then?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * When \"if\" is present, and the instance fails to validate against its\n     * subschema, then valiation succeeds against this keyword if the\n     * instance successfully validates against this keyword's subschema.\n     *\n     * This keyword has no effect when \"if\" is absent, or when the instance\n     * successfully validates against its subschema.  Implementations MUST\n     * NOT evaluate the instance against this keyword, for either validation\n     * or annotation collection purposes, in such cases.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.6.3\n     */\n    else?: FormSchema;\n\n    /**\n     * This keyword's value MUST be a valid JSON Schema.\n     *\n     * An instance is valid against this keyword if it fails to validate\n     * successfully against the schema defined by this keyword.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-6.7.4\n     */\n    not?: FormSchema;\n\n    /**\n     * The \"$defs\" keywords provides a standardized location for\n     * schema authors to inline re-usable JSON Schemas into a more general\n     * schema.  The keyword does not directly affect the validation result.\n     *\n     * This keyword's value MUST be an object.  Each member value of this\n     * object MUST be a valid JSON Schema.\n     *\n     * As an example, here is a schema describing an array of positive\n     * integers, where the positive integer constraint is a subschema in\n     * \"definitions\":\n     * ```\n     * {\n     *     \"type\": \"array\",\n     *     \"items\": { \"$ref\": \"#/definitions/positiveInteger\" },\n     *     \"definitions\": {\n     *         \"positiveInteger\": {\n     *             \"type\": \"integer\",\n     *             \"exclusiveMinimum\": 0\n     *         }\n     *     }\n     * }\n     * ```\n     *\n     * $defs is the newer keyword introduced in the JSON Schema Draft 2019-09, while definitions is from the older drafts.\n     *\n     * The main difference is that definitions is no longer an official keyword in the latest JSON Schema specification (Draft 2019-09 and later),\n     * but it is still widely supported for backward compatibility.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-9\n     */\n    $defs?: Record<string, FormSchema>;\n\n    /**\n     * The \"definitions\" keywords provides a standardized location for\n     * schema authors to inline re-usable JSON Schemas into a more general\n     * schema.  The keyword does not directly affect the validation result.\n     *\n     * This keyword's value MUST be an object.  Each member value of this\n     * object MUST be a valid JSON Schema.\n     *\n     * As an example, here is a schema describing an array of positive\n     * integers, where the positive integer constraint is a subschema in\n     * \"definitions\":\n     * ```\n     * {\n     *     \"type\": \"array\",\n     *     \"items\": { \"$ref\": \"#/definitions/positiveInteger\" },\n     *     \"definitions\": {\n     *         \"positiveInteger\": {\n     *             \"type\": \"integer\",\n     *             \"exclusiveMinimum\": 0\n     *         }\n     *     }\n     * }\n     * ```\n     *\n     * $defs is the newer keyword introduced in the JSON Schema Draft 2019-09, while definitions is from the older drafts.\n     *\n     * The main difference is that definitions is no longer an official keyword in the latest JSON Schema specification (Draft 2019-09 and later),\n     * but it is still widely supported for backward compatibility.\n     *\n     * @see https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01#section-9\n     */\n    definitions?: Record<string, FormSchema>;\n}\n\n/**\n * Utility type for replacing object types with a specified type\n * @public\n */\nexport type ReplaceObjectType<T, AllowedType, ElseType> = T extends any[]\n    ? ElseType\n    : T extends Record<string, any>\n      ? AllowedType\n      : ElseType;\n\n/**\n * Utility type for supporting nested sub items in arrays\n * @public\n */\nexport type FormSchemaArrayItem<T> = T extends any[]\n    ? FormSchema<T[Extract<keyof T, number>]>\n    : FormSchema;\n\n/**\n * Utility type for recursive properties in a schema\n * @public\n */\nexport type FormSubKeySchema<TObj> = Partial<{\n    [Key in Extract<keyof TObj, any>]: FormSchema<TObj[Key]>;\n}>;\n","/**\n * Defines the data for a table\n * @public\n */\nexport interface Column<T extends object = any> {\n    /**\n     * Column title to be displayed\n     */\n    title: string;\n\n    /**\n     * Name of the field in the data\n     */\n    field: keyof T;\n\n    /**\n     * Function to format the value before rendering\n     */\n    formatter?: TableFormatter;\n\n    /**\n     * Component used to render the field value\n     */\n    component?: TableComponentDefinition;\n\n    /**\n     * Type of aggregator to use for the column\n     */\n    aggregator?: ColumnAggregatorType | ColumnAggregatorFunction<T>;\n\n    /**\n     * A component used to render inside the column header\n     */\n    headerComponent?: TableComponentDefinition;\n\n    /**\n     * Sets the horizontal text alignment for the column\n     */\n    horizontalAlign?: 'left' | 'center' | 'right';\n\n    /**\n     * Defines whether end-user can sort a column\n     */\n    headerSort?: boolean;\n}\n\n/**\n * Definition for a formatter function\n * @param value - The value to be formatted\n * @param data - The data for the current row\n * @returns The formatted value\n * @public\n */\nexport type TableFormatter = (value: any, data?: object) => string;\n\n/**\n * The `component` key in the schema uses this interface to define a\n * component to be rendered inside a cell in the table.\n *\n * @note The table will display the component as `inline-block` in order\n * to give the column the correct size. If the component should have the\n * full width of the column, this might have to be overridden by setting\n * the display mode to `block`, e.g.\n *\n * ```css\n * :host(*) {\n *     display: block !important;\n * }\n * ```\n * @public\n */\nexport interface TableComponentDefinition {\n    /**\n     * Name of the component\n     */\n    name: string;\n\n    /**\n     * Properties to send to the component\n     */\n    props?: Record<string, any>;\n\n    /**\n     * Factory for creating properties dynamically for a custom component.\n     *\n     * The properties returned from this function will be merged with the\n     * `props` properties when the component is created.\n     *\n     * When the propsFactory is used for header components there will be no data available.\n     *\n     * @param data - The data for the current row\n     * @returns Properties for the component\n     */\n    propsFactory?: (data: object) => Record<string, any>;\n}\n\n/**\n * Interface for custom components rendered inside a `limel-table`.\n * @public\n */\nexport interface TableComponent<T extends object = any> {\n    /**\n     * Name of the field being rendered\n     */\n    field?: string;\n\n    /**\n     * Value being rendered\n     */\n    value?: any;\n\n    /**\n     * Data for the current row of the table\n     */\n    data?: T;\n}\n\n/**\n * Indicates whether the specified column is sorted ascending or descending.\n * @public\n */\nexport interface ColumnSorter {\n    /**\n     * The column being sorted\n     */\n    column: Column;\n\n    /**\n     * The direction to sort on\n     */\n    direction: 'ASC' | 'DESC';\n}\n\n/**\n * Specifies the current page, and which columns the table is currently sorted on.\n * @public\n */\nexport interface TableParams {\n    /**\n     * The current page being set\n     */\n    page: number;\n\n    /**\n     * Sorters applied to the current page\n     */\n    sorters?: ColumnSorter[];\n}\n\n/**\n * The built-in aggregators available for columns\n * @public\n */\nexport enum ColumnAggregatorType {\n    /**\n     * Calculates the average value of all numerical cells in the column\n     */\n    Average = 'avg',\n\n    /**\n     * Displays the maximum value from all numerical cells in the column\n     */\n    Maximum = 'max',\n\n    /**\n     * Displays the minimum value from all numerical cells in the column\n     */\n    Minimum = 'min',\n\n    /**\n     * Displays the sum of all numerical cells in the column\n     */\n    Sum = 'sum',\n\n    /**\n     * Counts the number of non empty cells in the column\n     */\n    Count = 'count',\n}\n\n/**\n * Instead of using one of the built-in aggregators, it is possible to\n * define a custom aggregator function.\n *\n * @param column - the configuration for the column\n * @param values - list of all values to be aggregated\n * @param data - list of all objects to be aggregated\n * @returns the aggregated data\n *\n * @public\n */\nexport type ColumnAggregatorFunction<T = object> = (\n    column?: Column,\n    values?: any[],\n    data?: T[]\n) => any;\n\n/**\n * Defines aggregate values for columns\n * @public\n */\nexport interface ColumnAggregate {\n    /**\n     * The name of the `Column` field\n     */\n    field: string;\n    /**\n     * The aggregate value\n     */\n    value: any;\n}\n\n/**\n * Data for identifying a row of the table\n * @public\n */\nexport type RowData = {\n    id?: string | number;\n};\n"],"version":3}

package/dist/esm/limel-checkbox.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 import { c as createRandomString } from './random-string-355331d3.js';
 import { C as CheckboxTemplate } from './checkbox.template-9acc6347.js';
 
-const checkboxCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:\"*\"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)))}.checked .box,.boolean-input:has(input[type=checkbox]:checked) .box,.boolean-input:has(input[type=radio]:checked) .box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:\"\";position:absolute;inset:-0.1875rem;border-radius:inherit}.boolean-input:has(input[type=checkbox]:focus-visible) .box:before,.boolean-input:has(input[type=radio]:focus-visible) .box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:\"\";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white))}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark{opacity:1}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}";
+const checkboxCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:\"*\"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:\"\";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:\"\";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem;}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}";
 
 const Checkbox = class {
   constructor(hostRef) {

package/dist/esm/limel-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"limel-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    &:not(.indeterminate):has(input[type='checkbox']:checked) {\n        svg.check-mark {\n            opacity: 1;\n\n            path {\n                stroke-dashoffset: 0;\n            }\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}
+{"file":"limel-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}

package/dist/esm/limel-form.entry.js

@@ -44468,6 +44468,10 @@ class SchemaField extends react.Component {
     return react.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'form-group field field-custom' }), component, getHelpComponent(props.schema));
   }
   render() {
+    var _a;
+    if ((_a = this.props.schema.lime) === null || _a === void 0 ? void 0 : _a.hidden) {
+      return null;
+    }
     if (hasCustomComponent(this.props.schema)) {
       return this.renderCustomComponent(this.props);
     }