@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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/limel-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/limel-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-form.cjs.entry.js +4 -0
- package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-list-item.cjs.entry.js +1 -1
- package/dist/cjs/limel-list-item.cjs.entry.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.css +70 -7
- package/dist/collection/components/form/fields/schema-field.js +4 -0
- package/dist/collection/components/form/fields/schema-field.js.map +1 -1
- package/dist/collection/components/form/form.types.js.map +1 -1
- package/dist/collection/components/list-item/list-item.css +72 -9
- package/dist/collection/style/internal/boolean-input.scss +44 -8
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/limel-checkbox.entry.js +1 -1
- package/dist/esm/limel-checkbox.entry.js.map +1 -1
- package/dist/esm/limel-form.entry.js +4 -0
- package/dist/esm/limel-form.entry.js.map +1 -1
- package/dist/esm/limel-list-item.entry.js +1 -1
- package/dist/esm/limel-list-item.entry.js.map +1 -1
- package/dist/lime-elements/index.esm.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-0334e593.entry.js +2 -0
- package/dist/lime-elements/{p-0d4a48ce.entry.js.map → p-0334e593.entry.js.map} +1 -1
- package/dist/lime-elements/p-8539647d.entry.js +2 -0
- package/dist/lime-elements/p-8539647d.entry.js.map +1 -0
- package/dist/lime-elements/{p-179e9d78.entry.js → p-d24988e7.entry.js} +2 -2
- package/dist/lime-elements/{p-179e9d78.entry.js.map → p-d24988e7.entry.js.map} +1 -1
- package/dist/lime-elements/style/internal/boolean-input.scss +44 -8
- package/dist/types/components/form/form.types.d.ts +4 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-0d4a48ce.entry.js +0 -2
- package/dist/lime-elements/p-a7aa383b.entry.js +0 -2
- package/dist/lime-elements/p-a7aa383b.entry.js.map +0 -1
|
@@ -20,7 +20,7 @@ const RadioButtonTemplate = (props) => {
|
|
|
20
20
|
index.h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)));
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
-
const listItemCss = "@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
|
|
23
|
+
const listItemCss = "@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}.radio-button{--limel-boolean-input-box-border-radius:var(\n --limel-boolean-input-box-size\n )}.box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem;transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:\"\";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:50%;width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input{width:var(--limel-boolean-input-box-size);margin-left:-0.25rem}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}";
|
|
24
24
|
|
|
25
25
|
const ListItemComponent = class {
|
|
26
26
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-list-item.entry.cjs.js","mappings":"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","names":["h","getIconName","CheckboxTemplate","translate","createRandomString","Host"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n RadioButtonTemplateProps\n> = (props) => {\n return (\n <div\n class={{\n 'boolean-input': true,\n 'radio-button': true,\n checked: props.checked,\n disabled: props.disabled,\n }}\n >\n <input\n type=\"radio\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled}\n onChange={props.onChange}\n />\n <div class=\"box\" />\n <label class=\"boolean-input-label\" htmlFor={props.id}>\n {props.label}\n </label>\n </div>\n );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\nlimel-list-item {\n min-height: 2.5rem;\n @include mixins.visualize-keyboard-focus();\n\n transition: background-color 0.6s ease;\n position: relative;\n isolation: isolate;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n padding: 0 1rem;\n background-color: rgb(var(--contrast-100));\n\n &:hover {\n z-index: 1;\n transition: background-color 0.2s ease;\n border-radius: 0.5rem;\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n z-index: 1;\n border-radius: 0.5rem;\n }\n\n &:first-of-type {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n }\n\n &:last-of-type {\n border-bottom-left-radius: 0.5rem;\n border-bottom-right-radius: 0.5rem;\n }\n\n &:not([disabled]):not([disabled='true']) {\n cursor: pointer;\n }\n\n &[disabled]:not([disabled='false']) {\n cursor: not-allowed;\n }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n cursor: not-allowed;\n\n .text,\n limel-icon,\n img,\n .boolean-input {\n opacity: 0.4;\n }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n &:before {\n transition: background-color 0.6s ease;\n content: '';\n position: absolute;\n inset: 0;\n\n opacity: 0.2;\n border-radius: 0.5rem;\n }\n\n &[selected]:not([selected='false']) {\n &:before {\n transition: background-color 0.2s ease;\n background-color: var(--limel-theme-primary-color);\n }\n }\n}\n\nlimel-list-item {\n .text {\n flex-grow: 1;\n min-width: 0;\n\n display: flex;\n flex-direction: column;\n\n padding: 0.5rem 0;\n\n color: var(--limel-theme-text-primary-on-background-color);\n }\n\n .label {\n @include mixins.truncate-text();\n\n font-size: var(--limel-theme-default-font-size);\n line-height: 1rem;\n }\n\n .description {\n @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n line-height: 1rem;\n font-size: var(--limel-theme-default-small-font-size);\n opacity: 0.6;\n }\n\n limel-icon {\n color: var(--limel-theme-text-secondary-on-background-color);\n flex-shrink: 0;\n margin-left: -0.5rem;\n\n &:has(+ img) {\n margin-left: 0;\n position: absolute;\n top: 0.125rem;\n left: 0.125rem;\n padding: 0.1875rem;\n width: 1.25rem;\n background-color: rgb(var(--contrast-200), 0.8);\n }\n }\n\n img {\n flex-shrink: 0;\n object-fit: cover;\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n }\n\n limel-menu {\n margin-right: -0.5rem;\n // Sometimes, `primaryComponent`s in list items need to get\n // `order: 2;` to be placed after the text. But since the default `order`\n // of all lit item children is `0`, we need to push the menu to the far right\n // by giving it a bigger order number. Also, by making this into a variable\n // we can handle other edge-cases in consuming components.\n order: var(--limel-list-item-menu-order, 3);\n }\n}\n\nlimel-list-item {\n &[role='menuitem'] & {\n .label {\n font-size: var(--limel-theme-default-small-font-size);\n }\n }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n width: var(--limel-boolean-input-box-size);\n margin-left: -0.25rem;\n &.checkbox {\n margin-right: 0.25rem;\n }\n\n limel-list-item:has(limel-icon) &,\n limel-list-item:has(img) & {\n margin-right: -0.25rem;\n margin-left: 0;\n order: 2;\n }\n}\n\n.boolean-input-label {\n @include mixins.truncate-text();\n opacity: 0;\n width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import {\n Component,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n tag: 'limel-list-item',\n shadow: false,\n styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * {@inheritdoc ListItem.value}\n */\n @Prop()\n public value?: any;\n\n /**\n * {@inheritdoc ListItem.text}\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * {@inheritdoc ListItem.secondaryText}\n */\n @Prop({ reflect: true })\n public secondaryText?: string;\n\n /**\n * {@inheritdoc ListItem.disabled}\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * {@inheritdoc ListItem.icon}\n */\n @Prop()\n public icon?: string | ListItem['icon'];\n\n /**\n * Size of the icon displayed for this item.\n */\n @Prop({ reflect: true })\n public iconSize: IconSize = 'small';\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop({ reflect: true })\n public badgeIcon = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public actions?: ListItem['actions'];\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public primaryComponent?: ListItem['primaryComponent'];\n\n /**\n * {@inheritdoc ListItem.image}\n */\n @Prop()\n public image?: ListItem['image'];\n\n /**\n * The semantic role of the list item. This affects the ARIA role\n * and the interaction behavior.\n *\n * - 'option' → selectable via click/Enter/Space, aria-selected\n * - 'radio'/'checkbox' → selectable, aria-checked\n * - 'menuitem'/'listitem' → activation only, no selection toggle\n */\n @Prop({ reflect: true })\n public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n 'listitem';\n\n /**\n * Emitted when the list item toggles selection (only for selectable types and not disabled).\n */\n @Event()\n public interact: EventEmitter<{\n selected: boolean;\n item: ListItem;\n }>;\n\n @Element()\n private host: HTMLLimelListItemElement;\n\n /**\n * Used to describe the list item for assistive technology.\n */\n private readonly descriptionId: string;\n\n /**\n * Used to label the list item for assistive technology.\n */\n private readonly labelId: string;\n\n // Memoized reference for the action items to avoid unnecessary updates\n private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n constructor() {\n this.labelId = createRandomString();\n this.descriptionId = createRandomString();\n }\n\n public render() {\n const ariaProps: any = {\n 'aria-labelledby': this.labelId,\n 'aria-describedby': this.secondaryText\n ? this.descriptionId\n : undefined,\n 'aria-disabled': this.disabled ? 'true' : 'false',\n };\n\n // ARIA state depending on `role`/`type`\n if (this.type === 'radio' || this.type === 'checkbox') {\n ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n } else if (this.type === 'option' || this.type === 'menuitem') {\n // aria-selected for `option` (spec);\n // also keep for `menuitem` for visual state consistency\n ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n }\n\n return (\n <Host\n role={this.getHostRole()}\n class={{\n 'has-primary-component': !!this.primaryComponent?.name,\n }}\n {...ariaProps}\n onClick={this.onClick}\n onKeyDown={this.onKeyDown}\n >\n {this.renderRadioButton()}\n {this.renderCheckbox()}\n {this.renderIcon()}\n {this.renderImage()}\n {this.renderPrimaryComponent()}\n <div class=\"text\">\n {this.renderLabel()}\n {this.renderDescription()}\n </div>\n {this.renderActionMenu(this.actions)}\n </Host>\n );\n }\n\n private renderLabel = () => {\n return (\n <span class=\"label\" id={this.labelId}>\n {this.text}\n </span>\n );\n };\n\n private renderDescription = () => {\n if (!this.secondaryText) {\n return;\n }\n\n return (\n <span class=\"description\" id={this.descriptionId}>\n {this.secondaryText}\n </span>\n );\n };\n\n private renderIcon = () => {\n const iconName = getIconName(this.icon);\n if (!iconName) {\n return;\n }\n\n let iconColor: string | undefined;\n let iconBackgroundColor: string | undefined;\n let title: string | undefined;\n\n if (typeof this.icon === 'object') {\n iconColor = this.icon.color;\n iconBackgroundColor = this.icon.backgroundColor;\n title = this.icon.title;\n }\n\n const iconProps = {\n 'aria-label': title,\n 'aria-hidden': title ? null : 'true',\n name: iconName,\n style: {\n color: iconColor,\n 'background-color': iconBackgroundColor,\n },\n badge: this.badgeIcon,\n size: this.iconSize,\n };\n\n return <limel-icon {...iconProps} />;\n };\n\n private renderPrimaryComponent = () => {\n const primary = this.primaryComponent;\n if (!primary?.name) {\n return;\n }\n\n const PrimaryComponent: any = primary.name;\n const props = primary.props || {};\n\n return <PrimaryComponent {...props} />;\n };\n\n private renderImage = () => {\n if (!this.image) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n if (!actions || actions.length === 0) {\n return;\n }\n\n const stableActions = this.getStableActions(actions);\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={stableActions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n label={this.actionMenuLabel()}\n />\n </limel-menu>\n );\n };\n\n /**\n * Returns a stable reference for the provided actions array to avoid\n * unnecessary re-renders of the action menu when the reference is unchanged.\n *\n * @param actions The actions (and separators) to display in the menu\n * @returns The same array instance that was previously seen, if unchanged\n */\n private getStableActions(\n actions: Array<MenuItem | ListSeparator>\n ): Array<MenuItem | ListSeparator> {\n if (this.memoizedActions === actions) {\n return this.memoizedActions;\n }\n this.memoizedActions = actions;\n return actions;\n }\n\n private renderRadioButton = () => {\n if (this.type !== 'radio') {\n return;\n }\n\n return (\n <RadioButtonTemplate\n id={`radio_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private renderCheckbox = () => {\n if (this.type !== 'checkbox') {\n return;\n }\n\n return (\n <CheckboxTemplate\n id={`checkbox_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n // Ignore toggling, but don't block embedded controls\n return;\n }\n\n const target = event.target as HTMLElement | null;\n const cameFromActionTrigger = !!target?.closest('.action-menu-trigger');\n const cameFromNoToggle = !!target?.closest('[data-no-toggle]');\n const cameFromMenu = !!target?.closest('limel-menu');\n if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {\n return;\n }\n\n if (this.isSelectableType()) {\n this.handleInteraction();\n }\n // For non-selectable types (menuitem/listitem), allow native click to bubble\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n // Only handle keyboard when the host itself has focus.\n // This avoids toggling when Space/Enter is pressed on inner controls\n // like the action menu trigger or any primary component.\n const shadowRoot = this.host.shadowRoot;\n const activeElement = shadowRoot\n ? (shadowRoot.activeElement as HTMLElement | null)\n : null;\n if (activeElement && activeElement !== this.host) {\n return;\n }\n\n const isEnter = event.key === 'Enter';\n const isSpace =\n event.key === ' ' ||\n event.key === 'Space' ||\n event.key === 'Spacebar' ||\n event.code === 'Space';\n\n if (!isEnter && !isSpace) {\n return;\n }\n\n // Avoid re-triggering while key is held down and auto-repeats\n if (event.repeat) {\n // Also prevent default scroll on Space when repeating\n if (isSpace) {\n event.preventDefault();\n }\n return;\n }\n\n // Prevent page scroll and default button behavior on Space\n if (isSpace) {\n event.preventDefault();\n }\n\n if (this.isSelectableType()) {\n this.handleInteraction();\n return;\n }\n\n // For non-selectable items, treat Enter and Space as activation (simulate click)\n if (isEnter || isSpace) {\n this.host.click();\n }\n };\n\n private isSelectableType(): boolean {\n return (\n this.type === 'option' ||\n this.type === 'radio' ||\n this.type === 'checkbox'\n );\n }\n\n private getHostRole(): string {\n switch (this.type) {\n case 'option': {\n return 'option';\n }\n case 'radio': {\n return 'radio';\n }\n case 'checkbox': {\n return 'checkbox';\n }\n case 'menuitem': {\n return 'menuitem';\n }\n default: {\n return 'listitem';\n }\n }\n }\n\n private handleInteraction = () => {\n const newSelected = !this.selected;\n\n const item: ListItem = {\n text: this.text,\n secondaryText: this.secondaryText,\n disabled: this.disabled,\n icon: this.icon,\n selected: newSelected,\n value: this.value,\n actions: this.actions,\n primaryComponent: this.primaryComponent,\n image: this.image,\n };\n\n this.interact.emit({\n selected: newSelected,\n item: item,\n });\n };\n\n private actionMenuLabel = (): string => {\n return translate.get('file-viewer.more-actions', this.language);\n };\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-list-item.entry.cjs.js","mappings":";;;;;;;;;;AAsCO,MAAM,mBAAmB,GAE5B,CAAC,KAAK;EACN,QACIA,iBACI,KAAK,EAAE;MACH,eAAe,EAAE,IAAI;MACrB,cAAc,EAAE,IAAI;MACpB,OAAO,EAAE,KAAK,CAAC,OAAO;MACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;KAC3B;IAEDA,mBACI,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;IACFA,iBAAK,KAAK,EAAC,KAAK,GAAG;IACnBA,mBAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN,EACR;AACN,CAAC;;AC/DD,MAAM,WAAW,GAAG,y1QAAy1Q;;MC2Dh2Q,iBAAiB;EA+G1B;;;IA+CQ,gBAAW,GAAG;MAClB,QACIA,kBAAM,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAC/B,IAAI,CAAC,IAAI,CACP,EACT;KACL,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACrB,OAAO;OACV;MAED,QACIA,kBAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,IAC3C,IAAI,CAAC,aAAa,CAChB,EACT;KACL,CAAC;IAEM,eAAU,GAAG;MACjB,MAAM,QAAQ,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACxC,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO;OACV;MAED,IAAI,SAA6B,CAAC;MAClC,IAAI,mBAAuC,CAAC;MAC5C,IAAI,KAAyB,CAAC;MAE9B,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC/B,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;QAChD,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC3B;MAED,MAAM,SAAS,GAAG;QACd,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM;QACpC,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;UACH,KAAK,EAAE,SAAS;UAChB,kBAAkB,EAAE,mBAAmB;SAC1C;QACD,KAAK,EAAE,IAAI,CAAC,SAAS;QACrB,IAAI,EAAE,IAAI,CAAC,QAAQ;OACtB,CAAC;MAEF,OAAOD,wCAAgB,SAAS,EAAI,CAAC;KACxC,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;MACtC,IAAI,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,EAAE;QAChB,OAAO;OACV;MAED,MAAM,gBAAgB,GAAQ,OAAO,CAAC,IAAI,CAAC;MAC3C,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;MAElC,OAAOA,QAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;KAC1C,CAAC;IAEM,gBAAW,GAAG;MAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACb,OAAO;OACV;MAED,OAAOA,iBAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;KAC3E,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAwC;MAChE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;MACrD,QACIA,wBACI,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,aAAa,EACpB,aAAa,EAAC,YAAY,IAE1BA,+BACI,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,GAC/B,CACO,EACf;KACL,CAAC;IAmBM,sBAAiB,GAAG;MACxB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;QACvB,OAAO;OACV;MAED,QACIA,QAAC,mBAAmB,IAChB,EAAE,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACJ;KACL,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;QAC1B,OAAO;OACV;MAED,QACIA,QAACE,kCAAgB,IACb,EAAE,EAAE,YAAY,IAAI,CAAC,OAAO,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACJ;KACL,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO;OACV;MAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;MAClD,MAAM,qBAAqB,GAAG,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA,CAAC;MACxE,MAAM,gBAAgB,GAAG,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA,CAAC;MAC/D,MAAM,YAAY,GAAG,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,YAAY,CAAC,CAAA,CAAC;MACrD,IAAI,qBAAqB,IAAI,gBAAgB,IAAI,YAAY,EAAE;QAC3D,OAAO;OACV;MAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC5B;;KAEJ,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACrC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;OACV;;;;MAKD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;MACxC,MAAM,aAAa,GAAG,UAAU;UACzB,UAAU,CAAC,aAAoC;UAChD,IAAI,CAAC;MACX,IAAI,aAAa,IAAI,aAAa,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9C,OAAO;OACV;MAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;MACtC,MAAM,OAAO,GACT,KAAK,CAAC,GAAG,KAAK,GAAG;QACjB,KAAK,CAAC,GAAG,KAAK,OAAO;QACrB,KAAK,CAAC,GAAG,KAAK,UAAU;QACxB,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC;MAE3B,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACV;;MAGD,IAAI,KAAK,CAAC,MAAM,EAAE;;QAEd,IAAI,OAAO,EAAE;UACT,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;QACD,OAAO;OACV;;MAGD,IAAI,OAAO,EAAE;QACT,KAAK,CAAC,cAAc,EAAE,CAAC;OAC1B;MAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,OAAO;OACV;;MAGD,IAAI,OAAO,IAAI,OAAO,EAAE;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;OACrB;KACJ,CAAC;IA8BM,sBAAiB,GAAG;MACxB,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAEnC,MAAM,IAAI,GAAa;QACnB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,aAAa,EAAE,IAAI,CAAC,aAAa;QACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;OACpB,CAAC;MAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,WAAW;QACrB,IAAI,EAAE,IAAI;OACb,CAAC,CAAC;KACN,CAAC;IAEM,oBAAe,GAAG;MACtB,OAAOC,sBAAS,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACnE,CAAC;oBA7Z2B,IAAI;;;;oBAwBf,KAAK;;oBAYK,OAAO;qBAMhB,KAAK;oBAMN,KAAK;;;;gBA8BnB,UAAU;IA4BV,IAAI,CAAC,OAAO,GAAGC,+BAAkB,EAAE,CAAC;IACpC,IAAI,CAAC,aAAa,GAAGA,+BAAkB,EAAE,CAAC;GAC7C;EAEM,MAAM;;IACT,MAAM,SAAS,GAAQ;MACnB,iBAAiB,EAAE,IAAI,CAAC,OAAO;MAC/B,kBAAkB,EAAE,IAAI,CAAC,aAAa;UAChC,IAAI,CAAC,aAAa;UAClB,SAAS;MACf,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO;KACpD,CAAC;;IAGF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MACnD,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;KAChE;SAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;;;MAG3D,SAAS,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;KACjE;IAED,QACIJ,QAACK,UAAI,kBACD,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EACxB,KAAK,EAAE;QACH,uBAAuB,EAAE,CAAC,EAAC,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAA;OACzD,IACG,SAAS,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,KAExB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,sBAAsB,EAAE,EAC9BL,iBAAK,KAAK,EAAC,MAAM,IACZ,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,iBAAiB,EAAE,CACvB,EACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CACjC,EACT;GACL;;;;;;;;EAsGO,gBAAgB,CACpB,OAAwC;IAExC,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,EAAE;MAClC,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;IACD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IAC/B,OAAO,OAAO,CAAC;GAClB;EAsGO,gBAAgB;IACpB,QACI,IAAI,CAAC,IAAI,KAAK,QAAQ;MACtB,IAAI,CAAC,IAAI,KAAK,OAAO;MACrB,IAAI,CAAC,IAAI,KAAK,UAAU,EAC1B;GACL;EAEO,WAAW;IACf,QAAQ,IAAI,CAAC,IAAI;MACb,KAAK,QAAQ,EAAE;QACX,OAAO,QAAQ,CAAC;OACnB;MACD,KAAK,OAAO,EAAE;QACV,OAAO,OAAO,CAAC;OAClB;MACD,KAAK,UAAU,EAAE;QACb,OAAO,UAAU,CAAC;OACrB;MACD,KAAK,UAAU,EAAE;QACb,OAAO,UAAU,CAAC;OACrB;MACD,SAAS;QACL,OAAO,UAAU,CAAC;OACrB;KACJ;GACJ;;;;;;;","names":["h","getIconName","CheckboxTemplate","translate","createRandomString","Host"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n RadioButtonTemplateProps\n> = (props) => {\n return (\n <div\n class={{\n 'boolean-input': true,\n 'radio-button': true,\n checked: props.checked,\n disabled: props.disabled,\n }}\n >\n <input\n type=\"radio\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled}\n onChange={props.onChange}\n />\n <div class=\"box\" />\n <label class=\"boolean-input-label\" htmlFor={props.id}>\n {props.label}\n </label>\n </div>\n );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\nlimel-list-item {\n min-height: 2.5rem;\n @include mixins.visualize-keyboard-focus();\n\n transition: background-color 0.6s ease;\n position: relative;\n isolation: isolate;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n padding: 0 1rem;\n background-color: rgb(var(--contrast-100));\n\n &:hover {\n z-index: 1;\n transition: background-color 0.2s ease;\n border-radius: 0.5rem;\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n z-index: 1;\n border-radius: 0.5rem;\n }\n\n &:first-of-type {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n }\n\n &:last-of-type {\n border-bottom-left-radius: 0.5rem;\n border-bottom-right-radius: 0.5rem;\n }\n\n &:not([disabled]):not([disabled='true']) {\n cursor: pointer;\n }\n\n &[disabled]:not([disabled='false']) {\n cursor: not-allowed;\n }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n cursor: not-allowed;\n\n .text,\n limel-icon,\n img,\n .boolean-input {\n opacity: 0.4;\n }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n &:before {\n transition: background-color 0.6s ease;\n content: '';\n position: absolute;\n inset: 0;\n\n opacity: 0.2;\n border-radius: 0.5rem;\n }\n\n &[selected]:not([selected='false']) {\n &:before {\n transition: background-color 0.2s ease;\n background-color: var(--limel-theme-primary-color);\n }\n }\n}\n\nlimel-list-item {\n .text {\n flex-grow: 1;\n min-width: 0;\n\n display: flex;\n flex-direction: column;\n\n padding: 0.5rem 0;\n\n color: var(--limel-theme-text-primary-on-background-color);\n }\n\n .label {\n @include mixins.truncate-text();\n\n font-size: var(--limel-theme-default-font-size);\n line-height: 1rem;\n }\n\n .description {\n @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n line-height: 1rem;\n font-size: var(--limel-theme-default-small-font-size);\n opacity: 0.6;\n }\n\n limel-icon {\n color: var(--limel-theme-text-secondary-on-background-color);\n flex-shrink: 0;\n margin-left: -0.5rem;\n\n &:has(+ img) {\n margin-left: 0;\n position: absolute;\n top: 0.125rem;\n left: 0.125rem;\n padding: 0.1875rem;\n width: 1.25rem;\n background-color: rgb(var(--contrast-200), 0.8);\n }\n }\n\n img {\n flex-shrink: 0;\n object-fit: cover;\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n }\n\n limel-menu {\n margin-right: -0.5rem;\n // Sometimes, `primaryComponent`s in list items need to get\n // `order: 2;` to be placed after the text. But since the default `order`\n // of all lit item children is `0`, we need to push the menu to the far right\n // by giving it a bigger order number. Also, by making this into a variable\n // we can handle other edge-cases in consuming components.\n order: var(--limel-list-item-menu-order, 3);\n }\n}\n\nlimel-list-item {\n &[role='menuitem'] & {\n .label {\n font-size: var(--limel-theme-default-small-font-size);\n }\n }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n width: var(--limel-boolean-input-box-size);\n margin-left: -0.25rem;\n &.checkbox {\n margin-right: 0.25rem;\n }\n\n limel-list-item:has(limel-icon) &,\n limel-list-item:has(img) & {\n margin-right: -0.25rem;\n margin-left: 0;\n order: 2;\n }\n}\n\n.boolean-input-label {\n @include mixins.truncate-text();\n opacity: 0;\n width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import {\n Component,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n tag: 'limel-list-item',\n shadow: false,\n styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * {@inheritdoc ListItem.value}\n */\n @Prop()\n public value?: any;\n\n /**\n * {@inheritdoc ListItem.text}\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * {@inheritdoc ListItem.secondaryText}\n */\n @Prop({ reflect: true })\n public secondaryText?: string;\n\n /**\n * {@inheritdoc ListItem.disabled}\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * {@inheritdoc ListItem.icon}\n */\n @Prop()\n public icon?: string | ListItem['icon'];\n\n /**\n * Size of the icon displayed for this item.\n */\n @Prop({ reflect: true })\n public iconSize: IconSize = 'small';\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop({ reflect: true })\n public badgeIcon = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public actions?: ListItem['actions'];\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public primaryComponent?: ListItem['primaryComponent'];\n\n /**\n * {@inheritdoc ListItem.image}\n */\n @Prop()\n public image?: ListItem['image'];\n\n /**\n * The semantic role of the list item. This affects the ARIA role\n * and the interaction behavior.\n *\n * - 'option' → selectable via click/Enter/Space, aria-selected\n * - 'radio'/'checkbox' → selectable, aria-checked\n * - 'menuitem'/'listitem' → activation only, no selection toggle\n */\n @Prop({ reflect: true })\n public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n 'listitem';\n\n /**\n * Emitted when the list item toggles selection (only for selectable types and not disabled).\n */\n @Event()\n public interact: EventEmitter<{\n selected: boolean;\n item: ListItem;\n }>;\n\n @Element()\n private host: HTMLLimelListItemElement;\n\n /**\n * Used to describe the list item for assistive technology.\n */\n private readonly descriptionId: string;\n\n /**\n * Used to label the list item for assistive technology.\n */\n private readonly labelId: string;\n\n // Memoized reference for the action items to avoid unnecessary updates\n private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n constructor() {\n this.labelId = createRandomString();\n this.descriptionId = createRandomString();\n }\n\n public render() {\n const ariaProps: any = {\n 'aria-labelledby': this.labelId,\n 'aria-describedby': this.secondaryText\n ? this.descriptionId\n : undefined,\n 'aria-disabled': this.disabled ? 'true' : 'false',\n };\n\n // ARIA state depending on `role`/`type`\n if (this.type === 'radio' || this.type === 'checkbox') {\n ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n } else if (this.type === 'option' || this.type === 'menuitem') {\n // aria-selected for `option` (spec);\n // also keep for `menuitem` for visual state consistency\n ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n }\n\n return (\n <Host\n role={this.getHostRole()}\n class={{\n 'has-primary-component': !!this.primaryComponent?.name,\n }}\n {...ariaProps}\n onClick={this.onClick}\n onKeyDown={this.onKeyDown}\n >\n {this.renderRadioButton()}\n {this.renderCheckbox()}\n {this.renderIcon()}\n {this.renderImage()}\n {this.renderPrimaryComponent()}\n <div class=\"text\">\n {this.renderLabel()}\n {this.renderDescription()}\n </div>\n {this.renderActionMenu(this.actions)}\n </Host>\n );\n }\n\n private renderLabel = () => {\n return (\n <span class=\"label\" id={this.labelId}>\n {this.text}\n </span>\n );\n };\n\n private renderDescription = () => {\n if (!this.secondaryText) {\n return;\n }\n\n return (\n <span class=\"description\" id={this.descriptionId}>\n {this.secondaryText}\n </span>\n );\n };\n\n private renderIcon = () => {\n const iconName = getIconName(this.icon);\n if (!iconName) {\n return;\n }\n\n let iconColor: string | undefined;\n let iconBackgroundColor: string | undefined;\n let title: string | undefined;\n\n if (typeof this.icon === 'object') {\n iconColor = this.icon.color;\n iconBackgroundColor = this.icon.backgroundColor;\n title = this.icon.title;\n }\n\n const iconProps = {\n 'aria-label': title,\n 'aria-hidden': title ? null : 'true',\n name: iconName,\n style: {\n color: iconColor,\n 'background-color': iconBackgroundColor,\n },\n badge: this.badgeIcon,\n size: this.iconSize,\n };\n\n return <limel-icon {...iconProps} />;\n };\n\n private renderPrimaryComponent = () => {\n const primary = this.primaryComponent;\n if (!primary?.name) {\n return;\n }\n\n const PrimaryComponent: any = primary.name;\n const props = primary.props || {};\n\n return <PrimaryComponent {...props} />;\n };\n\n private renderImage = () => {\n if (!this.image) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n if (!actions || actions.length === 0) {\n return;\n }\n\n const stableActions = this.getStableActions(actions);\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={stableActions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n label={this.actionMenuLabel()}\n />\n </limel-menu>\n );\n };\n\n /**\n * Returns a stable reference for the provided actions array to avoid\n * unnecessary re-renders of the action menu when the reference is unchanged.\n *\n * @param actions The actions (and separators) to display in the menu\n * @returns The same array instance that was previously seen, if unchanged\n */\n private getStableActions(\n actions: Array<MenuItem | ListSeparator>\n ): Array<MenuItem | ListSeparator> {\n if (this.memoizedActions === actions) {\n return this.memoizedActions;\n }\n this.memoizedActions = actions;\n return actions;\n }\n\n private renderRadioButton = () => {\n if (this.type !== 'radio') {\n return;\n }\n\n return (\n <RadioButtonTemplate\n id={`radio_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private renderCheckbox = () => {\n if (this.type !== 'checkbox') {\n return;\n }\n\n return (\n <CheckboxTemplate\n id={`checkbox_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n // Ignore toggling, but don't block embedded controls\n return;\n }\n\n const target = event.target as HTMLElement | null;\n const cameFromActionTrigger = !!target?.closest('.action-menu-trigger');\n const cameFromNoToggle = !!target?.closest('[data-no-toggle]');\n const cameFromMenu = !!target?.closest('limel-menu');\n if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {\n return;\n }\n\n if (this.isSelectableType()) {\n this.handleInteraction();\n }\n // For non-selectable types (menuitem/listitem), allow native click to bubble\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n // Only handle keyboard when the host itself has focus.\n // This avoids toggling when Space/Enter is pressed on inner controls\n // like the action menu trigger or any primary component.\n const shadowRoot = this.host.shadowRoot;\n const activeElement = shadowRoot\n ? (shadowRoot.activeElement as HTMLElement | null)\n : null;\n if (activeElement && activeElement !== this.host) {\n return;\n }\n\n const isEnter = event.key === 'Enter';\n const isSpace =\n event.key === ' ' ||\n event.key === 'Space' ||\n event.key === 'Spacebar' ||\n event.code === 'Space';\n\n if (!isEnter && !isSpace) {\n return;\n }\n\n // Avoid re-triggering while key is held down and auto-repeats\n if (event.repeat) {\n // Also prevent default scroll on Space when repeating\n if (isSpace) {\n event.preventDefault();\n }\n return;\n }\n\n // Prevent page scroll and default button behavior on Space\n if (isSpace) {\n event.preventDefault();\n }\n\n if (this.isSelectableType()) {\n this.handleInteraction();\n return;\n }\n\n // For non-selectable items, treat Enter and Space as activation (simulate click)\n if (isEnter || isSpace) {\n this.host.click();\n }\n };\n\n private isSelectableType(): boolean {\n return (\n this.type === 'option' ||\n this.type === 'radio' ||\n this.type === 'checkbox'\n );\n }\n\n private getHostRole(): string {\n switch (this.type) {\n case 'option': {\n return 'option';\n }\n case 'radio': {\n return 'radio';\n }\n case 'checkbox': {\n return 'checkbox';\n }\n case 'menuitem': {\n return 'menuitem';\n }\n default: {\n return 'listitem';\n }\n }\n }\n\n private handleInteraction = () => {\n const newSelected = !this.selected;\n\n const item: ListItem = {\n text: this.text,\n secondaryText: this.secondaryText,\n disabled: this.disabled,\n icon: this.icon,\n selected: newSelected,\n value: this.value,\n actions: this.actions,\n primaryComponent: this.primaryComponent,\n image: this.image,\n };\n\n this.interact.emit({\n selected: newSelected,\n item: item,\n });\n };\n\n private actionMenuLabel = (): string => {\n return translate.get('file-viewer.more-actions', this.language);\n };\n}\n"],"version":3}
|
|
@@ -159,19 +159,48 @@ label.boolean-input-label {
|
|
|
159
159
|
border: 0.125rem solid;
|
|
160
160
|
border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
|
|
161
161
|
background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
|
|
162
|
+
/*
|
|
163
|
+
* NOTE: Original selectors using `:has()` are commented out due to Safari
|
|
164
|
+
* rendering bugs where descendant transitions (e.g. SVG stroke animations)
|
|
165
|
+
* or box/background updates sometimes fail to animate or even repaint
|
|
166
|
+
* reliably when the state change is detected only via `:has()`.
|
|
167
|
+
*
|
|
168
|
+
* Original (kept for future re-implementation, or cleanup):
|
|
169
|
+
* .boolean-input:has(input[type='checkbox']:checked) &,
|
|
170
|
+
* .boolean-input:has(input[type='radio']:checked) & {
|
|
171
|
+
* ...
|
|
172
|
+
* }
|
|
173
|
+
*
|
|
174
|
+
* Replacement uses adjacency: the markup places the `<input>` immediately
|
|
175
|
+
* before .box, so we can select the checked state with
|
|
176
|
+
* input:checked + .box. We retain the explicit `.checked` class pathway in
|
|
177
|
+
* case some templates toggle that class manually.
|
|
178
|
+
*
|
|
179
|
+
* Using the `:has()` selector is more reliable, because it doesn't
|
|
180
|
+
* depend on the DOM structure (e.g. if the markup changes and the input is
|
|
181
|
+
* no longer adjacent to the box), but Safari support for `:has()` is still
|
|
182
|
+
* somewhat inconsistent.
|
|
183
|
+
*/
|
|
184
|
+
/*
|
|
185
|
+
* See previous comment about Safari rendering bugs ☝️.
|
|
186
|
+
*
|
|
187
|
+
* Original (kept for for future re-implementation, or cleanup):
|
|
188
|
+
* .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
|
|
189
|
+
* .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
|
|
190
|
+
*/
|
|
162
191
|
}
|
|
163
|
-
.checked .box, .boolean-input
|
|
192
|
+
.checked .box, .boolean-input > input[type=checkbox]:checked + .box, .boolean-input > input[type=radio]:checked + .box {
|
|
164
193
|
background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
|
|
165
194
|
border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
|
|
166
195
|
}
|
|
167
196
|
.disabled .box {
|
|
168
197
|
opacity: 0.4;
|
|
169
198
|
}
|
|
170
|
-
.boolean-input:not(.disabled):
|
|
199
|
+
.boolean-input:not(.disabled):hover .box {
|
|
171
200
|
will-change: box-shadow;
|
|
172
201
|
box-shadow: var(--button-shadow-hovered);
|
|
173
202
|
}
|
|
174
|
-
.boolean-input:not(.disabled):
|
|
203
|
+
.boolean-input:not(.disabled):active .box {
|
|
175
204
|
will-change: box-shadow;
|
|
176
205
|
box-shadow: var(--button-shadow-pressed);
|
|
177
206
|
}
|
|
@@ -181,8 +210,15 @@ label.boolean-input-label {
|
|
|
181
210
|
position: absolute;
|
|
182
211
|
inset: -0.1875rem;
|
|
183
212
|
border-radius: inherit;
|
|
213
|
+
/*
|
|
214
|
+
* See previous comment about Safari rendering bugs ☝️.
|
|
215
|
+
*
|
|
216
|
+
* Original (kept for for future re-implementation, or cleanup):
|
|
217
|
+
* .boolean-input:has(input[type='checkbox']:focus-visible) &,
|
|
218
|
+
* .boolean-input:has(input[type='radio']:focus-visible) & { ...}
|
|
219
|
+
*/
|
|
184
220
|
}
|
|
185
|
-
.boolean-input
|
|
221
|
+
.boolean-input > input[type=checkbox]:focus-visible + .box:before, .boolean-input > input[type=radio]:focus-visible + .box:before {
|
|
186
222
|
will-change: box-shadow;
|
|
187
223
|
box-shadow: var(--shadow-depth-8-focused);
|
|
188
224
|
}
|
|
@@ -195,8 +231,9 @@ label.boolean-input-label {
|
|
|
195
231
|
border-radius: 1rem;
|
|
196
232
|
opacity: 0;
|
|
197
233
|
background-color: rgb(var(--color-white));
|
|
234
|
+
/* Hover fallback for pseudo-element (see explanation above). */
|
|
198
235
|
}
|
|
199
|
-
.boolean-input:not(.disabled):
|
|
236
|
+
.boolean-input:not(.disabled):hover .box:after {
|
|
200
237
|
will-change: opacity, box-shadow, transform, width;
|
|
201
238
|
}
|
|
202
239
|
|
|
@@ -242,6 +279,32 @@ label.boolean-input-label {
|
|
|
242
279
|
|
|
243
280
|
.checkbox {
|
|
244
281
|
--limel-boolean-input-box-border-radius: 0.25rem;
|
|
282
|
+
/*
|
|
283
|
+
* Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have
|
|
284
|
+
* a rendering bug where transitions on descendants whose end state is triggered
|
|
285
|
+
* ONLY via a parent selector using `:has()` may not animate. Instead, Safari
|
|
286
|
+
* sometimes jumps directly to the final state (or never paints the transition)
|
|
287
|
+
* until a subsequent layout invalidation (e.g. tab switch, resize) happens.
|
|
288
|
+
*
|
|
289
|
+
* Workaround: provide an equivalent selector that does NOT rely on `:has()`,
|
|
290
|
+
* using the adjacency between the input and the visual box. This ensures the
|
|
291
|
+
* `stroke-dashoffset` transition for the check mark runs reliably in Safari
|
|
292
|
+
* while keeping the simpler `:has()` version commented for future re-implementation
|
|
293
|
+
* or cleanup.
|
|
294
|
+
*
|
|
295
|
+
* &:not(.indeterminate):has(input[type='checkbox']:checked) {
|
|
296
|
+
* svg.check-mark {
|
|
297
|
+
* opacity: 1;
|
|
298
|
+
* path {
|
|
299
|
+
* stroke-dashoffset: 0;
|
|
300
|
+
* }
|
|
301
|
+
* }
|
|
302
|
+
* }
|
|
303
|
+
* Using the `:has()` selector is more reliable, because it doesn't
|
|
304
|
+
* depend on the DOM structure (e.g. if the markup changes and the input is
|
|
305
|
+
* no longer adjacent to the box), but Safari support for `:has()` is still
|
|
306
|
+
* somewhat inconsistent.
|
|
307
|
+
*/
|
|
245
308
|
}
|
|
246
309
|
.checkbox svg.check-mark {
|
|
247
310
|
position: absolute;
|
|
@@ -263,10 +326,10 @@ label.boolean-input-label {
|
|
|
263
326
|
stroke-dasharray: 29.7833;
|
|
264
327
|
transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
|
|
265
328
|
}
|
|
266
|
-
.checkbox:not(.indeterminate)
|
|
329
|
+
.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark {
|
|
267
330
|
opacity: 1;
|
|
268
331
|
}
|
|
269
|
-
.checkbox:not(.indeterminate)
|
|
332
|
+
.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark path {
|
|
270
333
|
stroke-dashoffset: 0;
|
|
271
334
|
}
|
|
272
335
|
|
|
@@ -174,6 +174,10 @@ export class SchemaField extends React.Component {
|
|
|
174
174
|
return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'form-group field field-custom' }), component, getHelpComponent(props.schema));
|
|
175
175
|
}
|
|
176
176
|
render() {
|
|
177
|
+
var _a;
|
|
178
|
+
if ((_a = this.props.schema.lime) === null || _a === void 0 ? void 0 : _a.hidden) {
|
|
179
|
+
return null;
|
|
180
|
+
}
|
|
177
181
|
if (hasCustomComponent(this.props.schema)) {
|
|
178
182
|
return this.renderCustomComponent(this.props);
|
|
179
183
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,8CAA8C,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,uBAAuB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAW,EAAE;EACvD,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAW,EAAE;;EAC3C,MAAM,IAAI,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,IAAI,CAAC;EAC1C,IAAI,CAAC,IAAI,EAAE;IACP,OAAO,KAAK,CAAC;GAChB;EAED,IAAI;IACA,8BAA8B,CAAC,IAAI,CAAC,CAAC;GACxC;EAAC,WAAM;IACJ,OAAO,CAAC,IAAI,CAAC,oBAAoB,IAAI,cAAc,CAAC,CAAC;IAErD,OAAO,KAAK,CAAC;GAChB;EAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,CAAC,WAAW,EAAQ,EAAE;EACzD,MAAM,sBAAsB,GAAG,gBAAgB,IAAI,MAAM,CAAC;EAE1D,IAAI,CAAC,sBAAsB,EAAE;IACzB,MAAM,IAAI,KAAK,CACX,yDAAyD,CAC5D,CAAC;GACL;EAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;IAClC,MAAM,IAAI,KAAK,CAAC,wBAAwB,WAAW,mBAAmB,CAAC,CAAC;GAC3E;AACL,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACvB,MAAM,EACyC,EAAE;;EACjD,MAAM,IAAI,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,IAAI,CAAC;EAC1C,MAAM,KAAK,GAAG,CAAA,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,KAAK,KAAI,EAAE,CAAC;EAElD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AACxC,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAC3B,WAAgB,EAChB,MAAkB;EAElB,MAAM,OAAO,GACT,WAAW,CAAC,YAAY,CAAC;EAC7B,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;IAC/B,OAAO,EAAE,CAAC;GACb;EAED,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;EAC9B,IAAI,CAAC,KAAK,EAAE;IACR,OAAO,EAAE,CAAC;GACb;EAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAqB;EAKxD,YAAY,KAAK;IACb,KAAK,CAAC,KAAK,CAAC,CAAC;IALjB,UAAK,GAAG;MACJ,QAAQ,EAAE,KAAK;KAClB,CAAC;IAIE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,2BAA2B;MAC5B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpD,CAAC;EAEO,QAAQ;IACZ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,CAAC,KAAK,EAAE;MACR,OAAO,KAAK,CAAC;KAChB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;KAC3B;IAED,IAAI,KAAK,YAAY,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC;KACf;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;MAC3B,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC1B;IAED,OAAO,IAAI,CAAC;EAChB,CAAC;EAEO,QAAQ;IACZ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAE9B,OAAO,MAAM,CAAC,KAAK,CAAC;EACxB,CAAC;EAEO,SAAS;IACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAChC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAEnC,OAAO,CACH,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;MACnD,CAAC,OAAO,CAAC,WAAW,CAAC,CACxB,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAExC,OAAO,QAAQ,IAAI,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;EAC3C,CAAC;EAEO,aAAa;;IACjB,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAE3C,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;MACnB,MAAM,UAAU,GAAG,MAAA,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,UAAU,CAAC;MAE7D,OAAO,UAAU,IAAI,MAAM,CAAC,WAAW,CAAC;KAC3C;IAED,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,UAAU,IAAI,WAAW,EAAE;MACpD,OAAO,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;KAC9C;IAED,OAAO,MAAM,CAAC,WAAW,CAAC;EAC9B,CAAC;EAEO,QAAQ;IACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAEhC,OAAO,QAAQ,CAAC;EACpB,CAAC;EAEO,2BAA2B,CAC/B,KAAiD;IAEjD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAC9B,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;IAErC,IAAI,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE;MACxC,KAAK,GAAG,SAAS,CAAC;KACrB;IAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,YAAY,CAAC,IAAI;IACrB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IACxC,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,oBAAoB,CAChC,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAU,CACb,CAAC;IAEF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;EACjC,CAAC;EAEO,yBAAyB;IAC7B,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,QAAQ,GACX,GAAG,IAAI,CAAC,KAAK,CAAC;IACf,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAEnE,uCACO,YAAY,KACf,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,EAC3B,QAAQ,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,EACzB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,EAChC,GAAG,EAAE,CAAC,OAAsB,EAAE,EAAE;QAC5B,OAAO,CAAC,QAAQ,GAAG;UACf,MAAM,EAAE,MAAM;UACd,UAAU,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM;UACvC,WAAW,EAAE,WAAW;UACxB,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,SAAS;UACzC,IAAI,EAAE,IAAI;UACV,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC;SAChD,CAAC;QAEF,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;MACpB,CAAC,IACH;EACN,CAAC;EAEO,qBAAqB,CAAC,KAAiB;IAC3C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,yBAAyB,EAAE,GAAG,kBAAkB,CACjE,KAAK,CAAC,MAAM,CACf,CAAC;IAEF,8BAA8B,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,gDACnC,yBAAyB,GACzB,IAAI,CAAC,yBAAyB,EAAE,KACnC,QAAQ,EAAE,IAAI,CAAC,2BAA2B,IAC5C,CAAC;IAEH,OAAO,KAAK,CAAC,aAAa,CACtB,aAAa,kCAEN,IAAI,CAAC,KAAK,KACb,UAAU,EAAE,+BAA+B,KAE/C,SAAS,EACT,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CACjC,CAAC;EACN,CAAC;EAED,MAAM;IACF,IAAI,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;MACvC,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjD;IAED,MAAM,UAAU,mCACT,IAAI,CAAC,KAAK,KACb,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC9B,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,MAAM,EAAE;MACrC,UAAU,CAAC,QAAQ,mBACf,WAAW,EAAE,UAAU,IACpB,UAAU,CAAC,QAAQ,CACzB,CAAC;KACL;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;EAC5D,CAAC;EAED;;;;;;;;;KASG;EACK,aAAa,CAAC,QAAgB;IAClC,IAAI,QAAQ,KAAK,SAAS,EAAE;MACxB,OAAO,SAAS,CAAC;KACpB;IAED,OAAO,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EACpD,CAAC;CACJ","sourcesContent":["import JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\nimport { getHelpComponent } from '../help';\nimport { FormComponent, FormSchema } from '../form.types';\nimport { TimePicker } from '../widgets/time-picker';\n\n/**\n * If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n *\n * This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n *\n * Example:\n * If I have an object `{ name?: string, email?: string }` that I am using a custom web component for `name`,\n * then initially, the formData will be `{}` which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be `{ name: 'some_value' }` which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n *\n * @param value - the value associated with the schema\n * @param schema - the schema for the value\n * @returns whether or not null should be changed to undefined\n */\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n const name = schema.lime?.component?.name;\n if (!name) {\n return false;\n }\n\n try {\n verifyCustomComponentIsDefined(name);\n } catch {\n console.warn(`Custom component ${name} not defined`);\n\n return false;\n }\n\n return true;\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!'\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props || {};\n\n return { name: name, props: props };\n};\n\n/**\n * Create properties from the factory that is set on `limel-form`\n *\n * @param formContext - the form context\n * @param schema - the schema for the current field\n * @returns the properties created by the factory\n */\nexport function getFactoryProps(\n formContext: any,\n schema: FormSchema\n): Record<string, any> {\n const factory: (schema: FormSchema) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return value.length > 0;\n }\n\n if (value instanceof Date) {\n return true;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n return (\n (modified || this.hasValue() || !this.isRequired()) &&\n !isEmpty(errorSchema)\n );\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required || schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText || schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]);\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(\n event: React.SyntheticEvent<Element, CustomEvent>\n ) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.nativeEvent.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly || schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n ref: (element: FormComponent) => {\n element.formInfo = {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n };\n\n return () => {};\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(name, {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n onChange: this.handleCustomComponentChange,\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component,\n getHelpComponent(props.schema)\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n if (this.props.schema.format === 'time') {\n fieldProps.uiSchema = {\n 'ui:widget': TimePicker,\n ...fieldProps.uiSchema,\n };\n }\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /**\n * Gets the path to the current property within the schema\n *\n * @param schemaId - the id of the schema\n * @returns an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // ➡ ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\nimport { getHelpComponent } from '../help';\nimport { FormComponent, FormSchema } from '../form.types';\nimport { TimePicker } from '../widgets/time-picker';\n\n/**\n * If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n *\n * This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n *\n * Example:\n * If I have an object `{ name?: string, email?: string }` that I am using a custom web component for `name`,\n * then initially, the formData will be `{}` which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be `{ name: 'some_value' }` which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n *\n * @param value - the value associated with the schema\n * @param schema - the schema for the value\n * @returns whether or not null should be changed to undefined\n */\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n const name = schema.lime?.component?.name;\n if (!name) {\n return false;\n }\n\n try {\n verifyCustomComponentIsDefined(name);\n } catch {\n console.warn(`Custom component ${name} not defined`);\n\n return false;\n }\n\n return true;\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!'\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props || {};\n\n return { name: name, props: props };\n};\n\n/**\n * Create properties from the factory that is set on `limel-form`\n *\n * @param formContext - the form context\n * @param schema - the schema for the current field\n * @returns the properties created by the factory\n */\nexport function getFactoryProps(\n formContext: any,\n schema: FormSchema\n): Record<string, any> {\n const factory: (schema: FormSchema) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return value.length > 0;\n }\n\n if (value instanceof Date) {\n return true;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n return (\n (modified || this.hasValue() || !this.isRequired()) &&\n !isEmpty(errorSchema)\n );\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required || schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText || schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]);\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(\n event: React.SyntheticEvent<Element, CustomEvent>\n ) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.nativeEvent.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly || schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n ref: (element: FormComponent) => {\n element.formInfo = {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n };\n\n return () => {};\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(name, {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n onChange: this.handleCustomComponentChange,\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component,\n getHelpComponent(props.schema)\n );\n }\n\n render() {\n if (this.props.schema.lime?.hidden) {\n return null;\n }\n\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n if (this.props.schema.format === 'time') {\n fieldProps.uiSchema = {\n 'ui:widget': TimePicker,\n ...fieldProps.uiSchema,\n };\n }\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /**\n * Gets the path to the current property within the schema\n *\n * @param schemaId - the id of the schema\n * @returns an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // ➡ ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.types.js","sourceRoot":"","sources":["../../../src/components/form/form.types.ts"],"names":[],"mappings":"AAwSA;;;GAGG;AACH,MAAM,CAAN,IAAY,cAmBX;AAnBD,WAAY,cAAc;EACtB;;KAEG;EACH,qCAAmB,CAAA;EAEnB;;KAEG;EACH,+BAAa,CAAA;EAEb;;;;;;KAMG;EACH,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc,QAmBzB","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"]}
|
|
1
|
+
{"version":3,"file":"form.types.js","sourceRoot":"","sources":["../../../src/components/form/form.types.ts"],"names":[],"mappings":"AA6SA;;;GAGG;AACH,MAAM,CAAN,IAAY,cAmBX;AAnBD,WAAY,cAAc;EACtB;;KAEG;EACH,qCAAmB,CAAA;EAEnB;;KAEG;EACH,+BAAa,CAAA;EAEb;;;;;;KAMG;EACH,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc,QAmBzB","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"]}
|