@limetech/lime-elements 38.26.0 → 38.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/cjs/limel-checkbox.cjs.entry.js +1 -1
  4. package/dist/cjs/limel-checkbox.cjs.entry.js.map +1 -1
  5. package/dist/cjs/limel-form.cjs.entry.js +4 -0
  6. package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
  7. package/dist/cjs/limel-list-item.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-list-item.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/checkbox/checkbox.css +70 -7
  10. package/dist/collection/components/form/fields/schema-field.js +4 -0
  11. package/dist/collection/components/form/fields/schema-field.js.map +1 -1
  12. package/dist/collection/components/form/form.types.js.map +1 -1
  13. package/dist/collection/components/list-item/list-item.css +72 -9
  14. package/dist/collection/style/internal/boolean-input.scss +44 -8
  15. package/dist/esm/index.js.map +1 -1
  16. package/dist/esm/limel-checkbox.entry.js +1 -1
  17. package/dist/esm/limel-checkbox.entry.js.map +1 -1
  18. package/dist/esm/limel-form.entry.js +4 -0
  19. package/dist/esm/limel-form.entry.js.map +1 -1
  20. package/dist/esm/limel-list-item.entry.js +1 -1
  21. package/dist/esm/limel-list-item.entry.js.map +1 -1
  22. package/dist/lime-elements/index.esm.js.map +1 -1
  23. package/dist/lime-elements/lime-elements.esm.js +1 -1
  24. package/dist/lime-elements/p-0334e593.entry.js +2 -0
  25. package/dist/lime-elements/{p-0d4a48ce.entry.js.map → p-0334e593.entry.js.map} +1 -1
  26. package/dist/lime-elements/p-8539647d.entry.js +2 -0
  27. package/dist/lime-elements/p-8539647d.entry.js.map +1 -0
  28. package/dist/lime-elements/{p-179e9d78.entry.js → p-d24988e7.entry.js} +2 -2
  29. package/dist/lime-elements/{p-179e9d78.entry.js.map → p-d24988e7.entry.js.map} +1 -1
  30. package/dist/lime-elements/style/internal/boolean-input.scss +44 -8
  31. package/dist/types/components/form/form.types.d.ts +4 -0
  32. package/package.json +1 -1
  33. package/dist/lime-elements/p-0d4a48ce.entry.js +0 -2
  34. package/dist/lime-elements/p-a7aa383b.entry.js +0 -2
  35. package/dist/lime-elements/p-a7aa383b.entry.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [38.27.0](https://github.com/Lundalogik/lime-elements/compare/v38.26.1...v38.27.0) (2025-10-07)
2
+
3
+
4
+ ### Features
5
+
6
+
7
+ * **form:** add support for hiding fields via lime.hidden metadata ([f3b37a1](https://github.com/Lundalogik/lime-elements/commit/f3b37a1b1ad1b243ea8ec37f758a89ce9d753dcd))
8
+
9
+ ## [38.26.1](https://github.com/Lundalogik/lime-elements/compare/v38.26.0...v38.26.1) (2025-10-07)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+
15
+ * **checkbox:** ensure correct rendering on iOS & macOS 26 ([0c3ef0e](https://github.com/Lundalogik/lime-elements/commit/0c3ef0eb5fd6894e01678e3d35472ea3a7bac583))
16
+
1
17
  ## [38.26.0](https://github.com/Lundalogik/lime-elements/compare/v38.25.0...v38.26.0) (2025-10-03)
2
18
 
3
19
 
@@ -1 +1 @@
1
- {"file":"index.cjs.js","mappings":";;;;AAwSA;;;;AAIYA;AAAZ,WAAY,cAAc;;;;EAItB,qCAAmB,CAAA;;;;EAKnB,+BAAa,CAAA;;;;;;;;EASb,6BAAW,CAAA;AACf,CAAC,EAnBWA,sBAAc,KAAdA,sBAAc;;ACvJ1B;;;;AAIYC;AAAZ,WAAY,oBAAoB;;;;EAI5B,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,mCAAW,CAAA;;;;EAKX,uCAAe,CAAA;AACnB,CAAC,EAzBWA,4BAAoB,KAApBA,4BAAoB;;","names":["FormLayoutType","ColumnAggregatorType"],"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}
1
+ {"file":"index.cjs.js","mappings":";;;;AA6SA;;;;AAIYA;AAAZ,WAAY,cAAc;;;;EAItB,qCAAmB,CAAA;;;;EAKnB,+BAAa,CAAA;;;;;;;;EASb,6BAAW,CAAA;AACf,CAAC,EAnBWA,sBAAc,KAAdA,sBAAc;;AC5J1B;;;;AAIYC;AAAZ,WAAY,oBAAoB;;;;EAI5B,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,uCAAe,CAAA;;;;EAKf,mCAAW,CAAA;;;;EAKX,uCAAe,CAAA;AACnB,CAAC,EAzBWA,4BAAoB,KAApBA,4BAAoB;;","names":["FormLayoutType","ColumnAggregatorType"],"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}
@@ -6,7 +6,7 @@ const index = require('./index-174a078a.js');
6
6
  const randomString = require('./random-string-27fb6c74.js');
7
7
  const checkbox_template = require('./checkbox.template-92ae2e60.js');
8
8
 
9
- 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}";
9
+ 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}";
10
10
 
11
11
  const Checkbox = class {
12
12
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"limel-checkbox.entry.cjs.js","mappings":"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","names":["createRandomString","h","CheckboxTemplate"],"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}
1
+ {"file":"limel-checkbox.entry.cjs.js","mappings":"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","names":["createRandomString","h","CheckboxTemplate"],"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}
@@ -44472,6 +44472,10 @@ class SchemaField extends react.Component {
44472
44472
  return react.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'form-group field field-custom' }), component, getHelpComponent(props.schema));
44473
44473
  }
44474
44474
  render() {
44475
+ var _a;
44476
+ if ((_a = this.props.schema.lime) === null || _a === void 0 ? void 0 : _a.hidden) {
44477
+ return null;
44478
+ }
44475
44479
  if (hasCustomComponent(this.props.schema)) {
44476
44480
  return this.renderCustomComponent(this.props);
44477
44481
  }