igniteui-webcomponents 5.0.0-rc.0 → 5.0.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 +11 -14
- package/components/button/button-base.js.map +1 -1
- package/components/checkbox/checkbox-base.js.map +1 -1
- package/components/checkbox/checkbox.d.ts +3 -0
- package/components/checkbox/checkbox.js +23 -5
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/themes/shared/checkbox/checkbox.indigo.css.js +1 -1
- package/components/checkbox/themes/shared/checkbox/checkbox.indigo.css.js.map +1 -1
- package/components/combo/types.js.map +1 -1
- package/components/common/controllers/root-click.d.ts +2 -3
- package/components/common/controllers/root-click.js +3 -4
- package/components/common/controllers/root-click.js.map +1 -1
- package/components/common/mixins/combo-box.js +0 -4
- package/components/common/mixins/combo-box.js.map +1 -1
- package/components/common/mixins/form-associated.js +4 -4
- package/components/common/mixins/form-associated.js.map +1 -1
- package/components/icon/icon-references.js +42 -2
- package/components/icon/icon-references.js.map +1 -1
- package/components/icon/icon-state.broadcast.d.ts +1 -0
- package/components/icon/icon-state.broadcast.js +12 -1
- package/components/icon/icon-state.broadcast.js.map +1 -1
- package/components/icon/icon.registry.js +21 -11
- package/components/icon/icon.registry.js.map +1 -1
- package/components/icon/internal-icons-lib.js +62 -0
- package/components/icon/internal-icons-lib.js.map +1 -1
- package/components/input/input-base.js.map +1 -1
- package/components/input/input.js.map +1 -1
- package/components/progress/themes/circular/circular.progress.base.css.js +1 -1
- package/components/progress/themes/circular/circular.progress.base.css.js.map +1 -1
- package/components/progress/themes/circular/dark/circular.progress.bootstrap.css.js +1 -1
- package/components/progress/themes/circular/dark/circular.progress.bootstrap.css.js.map +1 -1
- package/components/progress/themes/circular/dark/circular.progress.fluent.css.js +1 -1
- package/components/progress/themes/circular/dark/circular.progress.fluent.css.js.map +1 -1
- package/components/progress/themes/circular/dark/circular.progress.indigo.css.js +1 -1
- package/components/progress/themes/circular/dark/circular.progress.indigo.css.js.map +1 -1
- package/components/progress/themes/circular/dark/circular.progress.material.css.js +1 -1
- package/components/progress/themes/circular/dark/circular.progress.material.css.js.map +1 -1
- package/components/progress/themes/circular/light/circular.progress.bootstrap.css.js +1 -1
- package/components/progress/themes/circular/light/circular.progress.bootstrap.css.js.map +1 -1
- package/components/progress/themes/circular/light/circular.progress.indigo.css.js +1 -1
- package/components/progress/themes/circular/light/circular.progress.indigo.css.js.map +1 -1
- package/components/progress/themes/circular/light/circular.progress.shared.css.js +1 -1
- package/components/progress/themes/circular/light/circular.progress.shared.css.js.map +1 -1
- package/components/progress/themes/circular/shared/circular.progress.bootstrap.css.js +1 -1
- package/components/progress/themes/circular/shared/circular.progress.bootstrap.css.js.map +1 -1
- package/components/progress/themes/circular/shared/circular.progress.common.css.js +1 -1
- package/components/progress/themes/circular/shared/circular.progress.common.css.js.map +1 -1
- package/components/progress/themes/circular/shared/circular.progress.fluent.css.js +1 -1
- package/components/progress/themes/circular/shared/circular.progress.fluent.css.js.map +1 -1
- package/components/progress/themes/circular/shared/circular.progress.indigo.css.js +1 -1
- package/components/progress/themes/circular/shared/circular.progress.indigo.css.js.map +1 -1
- package/components/progress/themes/linear/linear.progress.base.css.js +1 -1
- package/components/progress/themes/linear/linear.progress.base.css.js.map +1 -1
- package/components/progress/themes/linear/shared/linear.progress.bootstrap.css.js +1 -1
- package/components/progress/themes/linear/shared/linear.progress.bootstrap.css.js.map +1 -1
- package/components/progress/themes/linear/shared/linear.progress.common.css.js +1 -1
- package/components/progress/themes/linear/shared/linear.progress.common.css.js.map +1 -1
- package/components/progress/themes/linear/shared/linear.progress.fluent.css.js +1 -1
- package/components/progress/themes/linear/shared/linear.progress.fluent.css.js.map +1 -1
- package/components/progress/themes/linear/shared/linear.progress.indigo.css.js +1 -1
- package/components/progress/themes/linear/shared/linear.progress.indigo.css.js.map +1 -1
- package/components/radio/radio.d.ts +1 -0
- package/components/radio/radio.js +10 -3
- package/components/radio/radio.js.map +1 -1
- package/components/radio-group/radio-group.d.ts +1 -0
- package/components/radio-group/radio-group.js +6 -0
- package/components/radio-group/radio-group.js.map +1 -1
- package/components/select/select.js.map +1 -1
- package/components/textarea/textarea.js.map +1 -1
- package/custom-elements.json +211 -31
- package/index.d.ts +1 -1
- package/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,11 @@ All notable changes to this project will be documented in this file.
|
|
|
4
4
|
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
|
5
5
|
and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
## [5.0.0] - 2024-08-27
|
|
8
|
+
### Added
|
|
9
|
+
- Icon Registry [#1304](https://github.com/IgniteUI/igniteui-webcomponents/issues/1304)
|
|
10
|
+
- You can now register and replace icons by reference via the `setIconRef` function. To learn more check out the [documentation](https://www.infragistics.com/webcomponentssite/components/layouts/icon#icon-references).
|
|
11
|
+
- All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
|
|
9
12
|
|
|
10
13
|
### Changed
|
|
11
14
|
- **BREAKING**: Removed `igcFocus` and `igcBlur` events from buttons and inputs - Button, Icon Button, Checkbox, Switch, Combo, Date Time Input, Input, Mask Input, Radios, Select, Textarea.
|
|
@@ -22,7 +25,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
|
22
25
|
```ts
|
|
23
26
|
input.addEventListener('focus', focusHandler);
|
|
24
27
|
```
|
|
25
|
-
|
|
26
28
|
- **BREAKING**: Checkbox, Switch `igcChange` event.
|
|
27
29
|
|
|
28
30
|
Before:
|
|
@@ -34,8 +36,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
|
34
36
|
```ts
|
|
35
37
|
CustomEvent<{ checked: boolean; value: string | undefined }>
|
|
36
38
|
```
|
|
37
|
-
|
|
38
|
-
|
|
39
39
|
- **BREAKING**: Radio `igcChange` event.
|
|
40
40
|
|
|
41
41
|
Before:
|
|
@@ -48,11 +48,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
|
48
48
|
CustomEvent<{ checked: boolean; value: string | undefined }>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
### Added
|
|
52
|
-
- Icon Registry [#1304](https://github.com/IgniteUI/igniteui-webcomponents/issues/1304)
|
|
53
|
-
- You can now register and replace icons by reference via the `setIconRef` function. To learn more check out the [documentation](https://www.infragistics.com/webcomponentssite/components/layouts/icon#icon-references).
|
|
54
|
-
- All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
|
|
55
|
-
|
|
56
51
|
### Removed
|
|
57
52
|
- **BREAKING**: igc-form - use the native form element instead.
|
|
58
53
|
- **BREAKING**: Range slider - `ariaThumbLower/ariaThumbUpper`. Use `thumbLabelLower/thumbLabelUpper` instead.
|
|
@@ -70,16 +65,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
|
70
65
|
- Radio - do not emit change event on already checked radio
|
|
71
66
|
- Calendar - add correct dates DOM parts based on active view [[#1278](https://github.com/IgniteUI/igniteui-webcomponents/issues/1278)]
|
|
72
67
|
- Date-picker, Dropdown & Select - showing the component programmatically in response to an outside click event closes the dropdown popover [#1339](https://github.com/IgniteUI/igniteui-webcomponents/issues/1339)
|
|
68
|
+
- Radio - Initially checked radio by attribute throws error when not being last sibling [#1356](https://github.com/IgniteUI/igniteui-webcomponents/issues/1356)
|
|
73
69
|
|
|
74
70
|
## [4.11.1] - 2024-07-03
|
|
75
71
|
### Changed
|
|
76
|
-
|
|
72
|
+
- Stepper Design in vertical mode [#1246](https://github.com/IgniteUI/igniteui-webcomponents/issues/1246)
|
|
77
73
|
|
|
78
74
|
## [4.11.0] - 2024-07-03
|
|
79
75
|
### Changed
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
- Toast Component Indigo Theme [#1249](https://github.com/IgniteUI/igniteui-webcomponents/pull/1249)
|
|
77
|
+
- Rating Component Indigo Theme [#1249](https://github.com/IgniteUI/igniteui-webcomponents/pull/1249)
|
|
78
|
+
- Stepper Component Indigo Theme [#1249](https://github.com/IgniteUI/igniteui-webcomponents/pull/1249)
|
|
83
79
|
|
|
84
80
|
## [4.10.0] - 2024-07-01
|
|
85
81
|
### Added
|
|
@@ -562,6 +558,7 @@ Initial release of Ignite UI Web Components
|
|
|
562
558
|
- Ripple component
|
|
563
559
|
- Switch component
|
|
564
560
|
|
|
561
|
+
[5.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.11.1...5.0.0
|
|
565
562
|
[4.11.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.11.0...4.11.1
|
|
566
563
|
[4.11.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.10.0...4.11.0
|
|
567
564
|
[4.10.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.9.0...4.10.0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../../src/components/button/button-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, type TemplateResult, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { EventEmitterMixin } from '../common//mixins/event-emitter.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { partNameMap } from '../common/util.js';\n\nexport interface IgcButtonEventMap {\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n}\n\n@blazorDeepImport\nexport abstract class IgcButtonBaseComponent extends EventEmitterMixin<\n IgcButtonEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly formAssociated = true;\n\n protected static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n private _kbFocus = addKeyboardFocusRing(this);\n\n protected __internals: ElementInternals;\n protected _disabled = false;\n\n @query('[part=\"base\"]', true)\n private _nativeButton!: HTMLButtonElement;\n\n /* alternateName: displayType */\n /**\n * The type of the button. Defaults to `button`.\n * @attr\n */\n @property({ reflect: true })\n public type: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * The URL the button points to.\n * @attr\n */\n @property()\n public href!: string;\n\n /**\n * Prompts to save the linked URL instead of navigating to it.\n * @attr\n */\n @property()\n public download!: string;\n\n /**\n * Where to display the linked URL, as the name for a browsing context.\n * @attr\n */\n @property()\n public target?: '_blank' | '_parent' | '_self' | '_top';\n\n /**\n * The relationship of the linked URL.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\n * @attr\n */\n @property()\n public rel!: string;\n\n /**\n * The disabled state of the component\n * @attr [disabled=false]\n */\n @property({ type: Boolean, reflect: true })\n public get disabled(): boolean {\n return this._disabled;\n }\n\n public set disabled(value: boolean) {\n this._disabled = value;\n this.toggleAttribute('disabled', Boolean(this._disabled));\n }\n\n /** Returns the HTMLFormElement associated with this element. */\n public get form() {\n return this.__internals.form;\n }\n\n constructor() {\n super();\n this.__internals = this.attachInternals();\n }\n\n /* alternateName: focusComponent */\n /** Sets focus in the button. */\n public override focus(options?: FocusOptions) {\n this._nativeButton.focus(options);\n }\n\n /** Simulates a mouse click on the element */\n public override click() {\n this._nativeButton.click();\n }\n\n /* alternateName: blurComponent */\n /** Removes focus from the button. */\n public override blur() {\n this._nativeButton.blur();\n }\n\n protected handleBlur() {\n this._kbFocus.reset();\n }\n\n protected handleClick() {\n this._kbFocus.reset();\n switch (this.type) {\n case 'submit':\n return this.form?.requestSubmit();\n case 'reset':\n return this.form?.reset();\n default:\n return;\n }\n }\n\n protected formDisabledCallback(state: boolean) {\n this._disabled = state;\n this.requestUpdate();\n }\n\n private renderButton() {\n return html`\n <button\n part=${partNameMap({\n base: true,\n focused: this._kbFocus.focused,\n })}\n aria-label=${ifDefined(this.ariaLabel ?? nothing)}\n ?disabled=${this.disabled}\n type=${ifDefined(this.type)}\n @click=${this.handleClick}\n @blur=${this.handleBlur}\n >\n ${this.renderContent()}\n </button>\n `;\n }\n\n private renderLinkButton() {\n return html`\n <a\n part=${partNameMap({\n base: true,\n focused: this._kbFocus.focused,\n })}\n role=\"button\"\n aria-label=${ifDefined(this.ariaLabel ?? nothing)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n download=${ifDefined(this.download)}\n rel=${ifDefined(this.rel)}\n @blur=${this.disabled ? nothing : this.handleBlur}\n >\n ${this.renderContent()}\n </a>\n `;\n }\n\n protected abstract renderContent(): TemplateResult;\n\n protected override render() {\n const link = this.href !== undefined;\n return link ? this.renderLinkButton() : this.renderButton();\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\n\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';\nimport { checkBoxValidators } from './validators.js';\n\nexport interface CheckboxChangeEventArgs {\n checked: boolean;\n value?: string;\n}\n\nexport interface IgcCheckboxEventMap {\n igcChange: CustomEvent<CheckboxChangeEventArgs>;\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends FormAssociatedRequiredMixin(\n EventEmitterMixin<IgcCheckboxEventMap, Constructor<LitElement>>(LitElement)\n) {\n protected override get __validators() {\n return checkBoxValidators;\n }\n\n protected _kbFocus = addKeyboardFocusRing(this);\n protected _value!: string;\n protected _checked = false;\n\n @query('input', true)\n protected input!: HTMLInputElement;\n\n @queryAssignedNodes({ flatten: true })\n protected label!: Array<Node>;\n\n @state()\n protected hideLabel = false;\n\n /**\n * The value attribute of the control.\n * @attr\n */\n @property()\n public set value(value: string) {\n this._value = value;\n if (this.checked) {\n this.setFormValue(this._value || 'on');\n }\n }\n\n public get value(): string {\n return this._value;\n }\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n public set checked(value: boolean) {\n this._checked = Boolean(value);\n this.setFormValue(this._checked ? this.value || 'on' : null);\n this.updateValidity();\n this.setInvalidState();\n }\n\n public get checked(): boolean {\n return this._checked;\n }\n\n /**\n * The label position of the control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: 'before' | 'after' = 'after';\n\n protected override createRenderRoot() {\n const root = super.createRenderRoot();\n root.addEventListener('slotchange', () => {\n this.hideLabel = this.label.length < 1;\n });\n return root;\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.updateValidity();\n }\n\n /** Simulates a click on the control. */\n public override click() {\n this.input.click();\n }\n\n /* alternateName: focusComponent */\n /** Sets focus on the control. */\n public override focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /* alternateName: blurComponent */\n /** Removes focus from the control. */\n public override blur() {\n this.input.blur();\n }\n\n protected handleClick() {\n this.checked = !this.checked;\n this.emitEvent('igcChange', {\n detail: { checked: this.checked, value: this.value },\n });\n }\n\n protected handleBlur() {\n this._kbFocus.reset();\n }\n\n protected handleFocus() {\n this._dirty = true;\n }\n}\n"]}
|
|
@@ -25,7 +25,10 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
|
|
|
25
25
|
* @attr
|
|
26
26
|
*/
|
|
27
27
|
indeterminate: boolean;
|
|
28
|
+
protected get _isIndigo(): boolean;
|
|
28
29
|
protected handleClick(): void;
|
|
30
|
+
protected renderStandard(): import("lit-html").TemplateResult<1>;
|
|
31
|
+
protected renderIndigo(): import("lit-html").TemplateResult<1>;
|
|
29
32
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
30
33
|
}
|
|
31
34
|
declare global {
|
|
@@ -9,7 +9,7 @@ import { html } from 'lit';
|
|
|
9
9
|
import { property } from 'lit/decorators.js';
|
|
10
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
11
|
import { live } from 'lit/directives/live.js';
|
|
12
|
-
import { themes } from '../../theming/theming-decorator.js';
|
|
12
|
+
import { getThemeController, themes } from '../../theming/theming-decorator.js';
|
|
13
13
|
import { registerComponent } from '../common/definitions/register.js';
|
|
14
14
|
import { createCounter, partNameMap } from '../common/util.js';
|
|
15
15
|
import { IgcCheckboxBaseComponent } from './checkbox-base.js';
|
|
@@ -26,10 +26,30 @@ let IgcCheckboxComponent = IgcCheckboxComponent_1 = class IgcCheckboxComponent e
|
|
|
26
26
|
static register() {
|
|
27
27
|
registerComponent(IgcCheckboxComponent_1);
|
|
28
28
|
}
|
|
29
|
+
get _isIndigo() {
|
|
30
|
+
return getThemeController(this)?.theme === 'indigo';
|
|
31
|
+
}
|
|
29
32
|
handleClick() {
|
|
30
33
|
this.indeterminate = false;
|
|
31
34
|
super.handleClick();
|
|
32
35
|
}
|
|
36
|
+
renderStandard() {
|
|
37
|
+
return html `
|
|
38
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
39
|
+
<path d="M4.1,12.7 9,17.6 20.3,6.3" />
|
|
40
|
+
</svg>
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
renderIndigo() {
|
|
44
|
+
return html `
|
|
45
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
46
|
+
<rect width="18" height="4" x="3" y="10" rx="1.85" />
|
|
47
|
+
<path
|
|
48
|
+
d="M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z"
|
|
49
|
+
/>
|
|
50
|
+
</svg>
|
|
51
|
+
`;
|
|
52
|
+
}
|
|
33
53
|
render() {
|
|
34
54
|
const labelledBy = this.getAttribute('aria-labelledby');
|
|
35
55
|
return html `
|
|
@@ -62,9 +82,7 @@ let IgcCheckboxComponent = IgcCheckboxComponent_1 = class IgcCheckboxComponent e
|
|
|
62
82
|
/>
|
|
63
83
|
<span part=${partNameMap({ control: true, checked: this.checked })}>
|
|
64
84
|
<span part=${partNameMap({ indicator: true, checked: this.checked })}>
|
|
65
|
-
|
|
66
|
-
<path d="M4.1,12.7 9,17.6 20.3,6.3" />
|
|
67
|
-
</svg>
|
|
85
|
+
${this._isIndigo ? this.renderIndigo() : this.renderStandard()}
|
|
68
86
|
</span>
|
|
69
87
|
</span>
|
|
70
88
|
<span
|
|
@@ -85,7 +103,7 @@ __decorate([
|
|
|
85
103
|
property({ type: Boolean, reflect: true })
|
|
86
104
|
], IgcCheckboxComponent.prototype, "indeterminate", void 0);
|
|
87
105
|
IgcCheckboxComponent = IgcCheckboxComponent_1 = __decorate([
|
|
88
|
-
themes(all)
|
|
106
|
+
themes(all, { exposeController: true })
|
|
89
107
|
], IgcCheckboxComponent);
|
|
90
108
|
export default IgcCheckboxComponent;
|
|
91
109
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { getThemeController, themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter, partNameMap } from '../common/util.js';\nimport { IgcCheckboxBaseComponent } from './checkbox-base.js';\nimport { all } from './themes/checkbox-themes.js';\nimport { styles } from './themes/checkbox.base.css.js';\nimport { styles as shared } from './themes/shared/checkbox/checkbox.common.css.js';\n\n/**\n * A check box allowing single values to be selected/deselected.\n *\n * @element igc-checkbox\n *\n * @slot - The checkbox label.\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The base wrapper of the checkbox.\n * @csspart control - The checkbox input element.\n * @csspart label - The checkbox label.\n * @csspart indicator - The checkbox indicator icon.\n */\n@themes(all, { exposeController: true })\nexport default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {\n public static readonly tagName = 'igc-checkbox';\n protected static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register() {\n registerComponent(IgcCheckboxComponent);\n }\n\n private static readonly increment = createCounter();\n private inputId = `checkbox-${IgcCheckboxComponent.increment()}`;\n private labelId = `checkbox-label-${this.inputId}`;\n\n /**\n * Draws the checkbox in indeterminate state.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n protected get _isIndigo(): boolean {\n return getThemeController(this)?.theme === 'indigo';\n }\n\n protected override handleClick() {\n this.indeterminate = false;\n super.handleClick();\n }\n\n protected renderStandard() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n </svg>\n `;\n }\n\n protected renderIndigo() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <rect width=\"18\" height=\"4\" x=\"3\" y=\"10\" rx=\"1.85\" />\n <path\n d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"\n />\n </svg>\n `;\n }\n\n protected override render() {\n const labelledBy = this.getAttribute('aria-labelledby');\n\n return html`\n <label\n part=${partNameMap({\n base: true,\n checked: this.checked,\n focused: this._kbFocus.focused,\n })}\n for=${this.inputId}\n @pointerdown=${this._kbFocus.reset}\n >\n <input\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n .required=${this.required}\n .disabled=${this.disabled}\n .checked=${live(this.checked)}\n .indeterminate=${live(this.indeterminate)}\n aria-checked=${this.indeterminate && !this.checked\n ? 'mixed'\n : this.checked}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-labelledby=${labelledBy ? labelledBy : this.labelId}\n @click=${this.handleClick}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n <span part=${partNameMap({ control: true, checked: this.checked })}>\n <span part=${partNameMap({ indicator: true, checked: this.checked })}>\n ${this._isIndigo ? this.renderIndigo() : this.renderStandard()}\n </span>\n </span>\n <span\n .hidden=${this.hideLabel}\n part=${partNameMap({ label: true, checked: this.checked })}\n id=${this.labelId}\n >\n <slot></slot>\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-checkbox': IgcCheckboxComponent;\n }\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{font-weight:600}[part~=control]{--size: 1rem;border-radius:var(--border-radius-ripple);width:var(--size, 1rem);height:var(--size, 1rem);min-width:var(--size, 1rem)}[part~=control]::after{border-radius:var(--border-radius);border:.125rem solid var(--empty-color)}[part="control checked"]::after{border-color:var(--fill-color);background:var(--fill-color)}[part~=indicator]{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}[part="indicator checked"]{-webkit-transition-duration:.15s;transition-duration:.15s}:host(:hover) [part~=label]{color:var(--label-color-hover)}:host(:hover) [part~=control]::after{border-color:var(--empty-color-hover)}:host(:hover) [part="control checked"]::after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}:host(:focus-visible) [part~=control],[part="base focused"] [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color);box-shadow:0 0 0 .1875rem var(--focus-outline-color)}:host(:focus-visible) [part="control checked"],[part="base checked focused"] [part="control checked"]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}:host([indeterminate]) [part~=indicator]{-webkit-transform:
|
|
2
|
+
export const styles = css `:host{font-weight:600}[part~=control]{--size: 1rem;border-radius:var(--border-radius-ripple);width:var(--size, 1rem);height:var(--size, 1rem);min-width:var(--size, 1rem)}[part~=control]::after{border-radius:var(--border-radius);border:.125rem solid var(--empty-color)}[part="control checked"]::after{border-color:var(--fill-color);background:var(--fill-color)}[part~=indicator]{stroke:unset;stroke-linecap:unset;stroke-width:unset;stroke-dasharray:unset;stroke-dashoffset:unset;fill:var(--tick-color);-webkit-transition:none;transition:none;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}[part~=indicator] rect{fill:none}[part="indicator checked"]{-webkit-transition-duration:.15s;transition-duration:.15s}:host(:hover) [part~=label]{color:var(--label-color-hover)}:host(:hover) [part~=control]::after{border-color:var(--empty-color-hover)}:host(:hover) [part="control checked"]::after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}:host(:focus-visible) [part~=control],[part="base focused"] [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color);box-shadow:0 0 0 .1875rem var(--focus-outline-color)}:host(:focus-visible) [part="control checked"],[part="base checked focused"] [part="control checked"]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}:host([indeterminate]) [part~=indicator]{fill:none;stroke-dashoffset:unset;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}:host([indeterminate]) [part~=indicator] rect{fill:var(--tick-color);opacity:1}:host([indeterminate]) [part~=control]::after{background:var(--fill-color);border-color:var(--fill-color)}:host([indeterminate]:hover) [part~=control]::after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}:host([indeterminate]:focus-visible) [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}:host(:not([disabled])[invalid]) [part~=label],:host(:not(:disabled)[invalid]) [part~=label]{color:var(--label-color)}:host(:not([disabled])[invalid]) [part~=control]::after,:host(:not(:disabled)[invalid]) [part~=control]::after{border-color:var(--error-color)}:host(:not([disabled])[invalid]) [part="control checked"],:host(:not(:disabled)[invalid]) [part="control checked"]{border-color:var(--error-color);background:var(--error-color)}:host(:not([disabled])[invalid]) [part="control checked"]::after,:host(:not(:disabled)[invalid]) [part="control checked"]::after{background:var(--error-color)}:host(:not([disabled])[invalid][indeterminate]) [part~=control],:host(:not(:disabled)[invalid][indeterminate]) [part~=control]{border-color:var(--error-color)}:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after,:host(:not(:disabled)[invalid][indeterminate]) [part~=control]::after{background:var(--error-color)}:host(:hover:not([disabled])[invalid]) [part~=label],:host(:hover:not(:disabled)[invalid]) [part~=label],:host(:hover:not([disabled])[invalid][indeterminate]) [part~=label],:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=label]{color:var(--label-color-hover)}:host(:hover:not([disabled])[invalid]) [part~=control]::after,:host(:hover:not([disabled])[invalid]) [part="control checked"]::after,:host(:hover:not(:disabled)[invalid]) [part~=control]::after,:host(:hover:not(:disabled)[invalid]) [part="control checked"]::after,:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control]::after,:host(:hover:not([disabled])[invalid][indeterminate]) [part="control checked"]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=control]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part="control checked"]::after{border-color:var(--error-color-hover)}:host(:hover:not([disabled])[invalid]) [part="control checked"]::after,:host(:hover:not(:disabled)[invalid]) [part="control checked"]::after,:host(:hover:not([disabled])[invalid][indeterminate]) [part="control checked"]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part="control checked"]::after{background:var(--error-color-hover)}:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=control]::after{background:var(--error-color-hover)}:host(:focus-visible:not([disabled])[invalid]) [part~=control],:host(:focus-visible:not([disabled])[invalid]) [part="control checked"],:host(:focus-visible:not(:disabled)[invalid]) [part~=control],:host(:focus-visible:not(:disabled)[invalid]) [part="control checked"]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-error);box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}:host(:focus-visible:not([disabled])[invalid][indeterminate]) [part~=control],:host(:focus-visible:not(:disabled)[invalid][indeterminate]) [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-error);box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}:host([disabled]) [part~=control]::after,:host(:disabled) [part~=control]::after,:host([disabled][invalid]) [part~=control]::after,:host(:disabled[invalid]) [part~=control]::after{border-color:var(--disabled-color)}:host([disabled]) [part="control checked"]::after,:host(:disabled) [part="control checked"]::after,:host([disabled][invalid]) [part="control checked"]::after,:host(:disabled[invalid]) [part="control checked"]::after{background:var(--disabled-indeterminate-color);border-color:rgba(0,0,0,0)}:host([disabled]) [part~=indicator],:host(:disabled) [part~=indicator],:host([disabled][invalid]) [part~=indicator],:host(:disabled[invalid]) [part~=indicator]{stroke-opacity:.4}:host([disabled][indeterminate]) [part~=control]::after,:host(:disabled[indeterminate]) [part~=control]::after{background:var(--disabled-indeterminate-color);border-color:rgba(0,0,0,0)}`;
|
|
3
3
|
//# sourceMappingURL=checkbox.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/checkbox/themes/shared/checkbox/checkbox.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"checkbox.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/checkbox/themes/shared/checkbox/checkbox.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,o0LAAo0L,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{font-weight:600}[part~=control]{--size: 1rem;border-radius:var(--border-radius-ripple);width:var(--size, 1rem);height:var(--size, 1rem);min-width:var(--size, 1rem)}[part~=control]::after{border-radius:var(--border-radius);border:.125rem solid var(--empty-color)}[part=\"control checked\"]::after{border-color:var(--fill-color);background:var(--fill-color)}[part~=indicator]{stroke:unset;stroke-linecap:unset;stroke-width:unset;stroke-dasharray:unset;stroke-dashoffset:unset;fill:var(--tick-color);-webkit-transition:none;transition:none;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}[part~=indicator] rect{fill:none}[part=\"indicator checked\"]{-webkit-transition-duration:.15s;transition-duration:.15s}:host(:hover) [part~=label]{color:var(--label-color-hover)}:host(:hover) [part~=control]::after{border-color:var(--empty-color-hover)}:host(:hover) [part=\"control checked\"]::after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}:host(:focus-visible) [part~=control],[part=\"base focused\"] [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color);box-shadow:0 0 0 .1875rem var(--focus-outline-color)}:host(:focus-visible) [part=\"control checked\"],[part=\"base checked focused\"] [part=\"control checked\"]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}:host([indeterminate]) [part~=indicator]{fill:none;stroke-dashoffset:unset;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}:host([indeterminate]) [part~=indicator] rect{fill:var(--tick-color);opacity:1}:host([indeterminate]) [part~=control]::after{background:var(--fill-color);border-color:var(--fill-color)}:host([indeterminate]:hover) [part~=control]::after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}:host([indeterminate]:focus-visible) [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}:host(:not([disabled])[invalid]) [part~=label],:host(:not(:disabled)[invalid]) [part~=label]{color:var(--label-color)}:host(:not([disabled])[invalid]) [part~=control]::after,:host(:not(:disabled)[invalid]) [part~=control]::after{border-color:var(--error-color)}:host(:not([disabled])[invalid]) [part=\"control checked\"],:host(:not(:disabled)[invalid]) [part=\"control checked\"]{border-color:var(--error-color);background:var(--error-color)}:host(:not([disabled])[invalid]) [part=\"control checked\"]::after,:host(:not(:disabled)[invalid]) [part=\"control checked\"]::after{background:var(--error-color)}:host(:not([disabled])[invalid][indeterminate]) [part~=control],:host(:not(:disabled)[invalid][indeterminate]) [part~=control]{border-color:var(--error-color)}:host(:not([disabled])[invalid][indeterminate]) [part~=control]::after,:host(:not(:disabled)[invalid][indeterminate]) [part~=control]::after{background:var(--error-color)}:host(:hover:not([disabled])[invalid]) [part~=label],:host(:hover:not(:disabled)[invalid]) [part~=label],:host(:hover:not([disabled])[invalid][indeterminate]) [part~=label],:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=label]{color:var(--label-color-hover)}:host(:hover:not([disabled])[invalid]) [part~=control]::after,:host(:hover:not([disabled])[invalid]) [part=\"control checked\"]::after,:host(:hover:not(:disabled)[invalid]) [part~=control]::after,:host(:hover:not(:disabled)[invalid]) [part=\"control checked\"]::after,:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control]::after,:host(:hover:not([disabled])[invalid][indeterminate]) [part=\"control checked\"]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=control]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part=\"control checked\"]::after{border-color:var(--error-color-hover)}:host(:hover:not([disabled])[invalid]) [part=\"control checked\"]::after,:host(:hover:not(:disabled)[invalid]) [part=\"control checked\"]::after,:host(:hover:not([disabled])[invalid][indeterminate]) [part=\"control checked\"]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part=\"control checked\"]::after{background:var(--error-color-hover)}:host(:hover:not([disabled])[invalid][indeterminate]) [part~=control]::after,:host(:hover:not(:disabled)[invalid][indeterminate]) [part~=control]::after{background:var(--error-color-hover)}:host(:focus-visible:not([disabled])[invalid]) [part~=control],:host(:focus-visible:not([disabled])[invalid]) [part=\"control checked\"],:host(:focus-visible:not(:disabled)[invalid]) [part~=control],:host(:focus-visible:not(:disabled)[invalid]) [part=\"control checked\"]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-error);box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}:host(:focus-visible:not([disabled])[invalid][indeterminate]) [part~=control],:host(:focus-visible:not(:disabled)[invalid][indeterminate]) [part~=control]{-webkit-box-shadow:0 0 0 .1875rem var(--focus-outline-color-error);box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}:host([disabled]) [part~=control]::after,:host(:disabled) [part~=control]::after,:host([disabled][invalid]) [part~=control]::after,:host(:disabled[invalid]) [part~=control]::after{border-color:var(--disabled-color)}:host([disabled]) [part=\"control checked\"]::after,:host(:disabled) [part=\"control checked\"]::after,:host([disabled][invalid]) [part=\"control checked\"]::after,:host(:disabled[invalid]) [part=\"control checked\"]::after{background:var(--disabled-indeterminate-color);border-color:rgba(0,0,0,0)}:host([disabled]) [part~=indicator],:host(:disabled) [part~=indicator],:host([disabled][invalid]) [part~=indicator],:host(:disabled[invalid]) [part~=indicator]{stroke-opacity:.4}:host([disabled][indeterminate]) [part~=control]::after,:host(:disabled[indeterminate]) [part~=control]::after{background:var(--disabled-indeterminate-color);border-color:rgba(0,0,0,0)}`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/combo/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport type { ReactiveControllerHost, TemplateResult } from 'lit';\n\nimport type IgcComboComponent from './combo.js';\n\nexport type Keys<T> = keyof T;\nexport type Values<T> = T[keyof T];\nexport type Item<T extends object> = T | Values<T>;\n\nexport type ComboRecord<T extends object> = {\n value: T;\n header: boolean;\n dataIndex: number;\n};\n\nexport type ComboHost<T extends object> = ReactiveControllerHost &\n IgcComboComponent<T>;\n\nexport type GroupingDirection = 'asc' | 'desc' | 'none';\nexport type ComboChangeType = 'selection' | 'deselection' | 'addition';\nexport type ComboRenderFunction<T extends object> = RenderItemFunction<\n ComboRecord<T>\n>;\nexport type ComboValue<T> = T | Values<T>;\n\nexport interface FilteringOptions<T extends object> {\n filterKey: Keys<T> | undefined;\n caseSensitive?: boolean;\n matchDiacritics?: boolean;\n}\n\nexport interface GroupingOptions<T extends object> {\n groupKey?: Keys<T>;\n valueKey?: Keys<T>;\n displayKey?: Keys<T>;\n direction: GroupingDirection;\n}\n\n/* marshalByValue */\nexport interface IgcComboChangeEventArgs<T extends object = any> {\n newValue: ComboValue<T>[];\n /* primitiveValue */\n items: T[];\n /* blazorAlternateName: changeType */\n type: ComboChangeType;\n}\n\nexport interface IgcComboEventMap {\n igcChange: CustomEvent<IgcComboChangeEventArgs>;\n // For analyzer meta only:\n focus: FocusEvent;\n blur: FocusEvent;\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport type ComboItemTemplate<T extends object> = (\n props: ComboTemplateProps<T>\n) => TemplateResult;\nexport interface ComboTemplateProps<T extends object> {\n item: T;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/combo/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\nimport type { ReactiveControllerHost, TemplateResult } from 'lit';\n\nimport type IgcComboComponent from './combo.js';\n\nexport type Keys<T> = keyof T;\nexport type Values<T> = T[keyof T];\nexport type Item<T extends object> = T | Values<T>;\n\nexport type ComboRecord<T extends object> = {\n value: T;\n header: boolean;\n dataIndex: number;\n};\n\nexport type ComboHost<T extends object> = ReactiveControllerHost &\n IgcComboComponent<T>;\n\nexport type GroupingDirection = 'asc' | 'desc' | 'none';\nexport type ComboChangeType = 'selection' | 'deselection' | 'addition';\nexport type ComboRenderFunction<T extends object> = RenderItemFunction<\n ComboRecord<T>\n>;\nexport type ComboValue<T> = T | Values<T>;\n\nexport interface FilteringOptions<T extends object> {\n filterKey: Keys<T> | undefined;\n caseSensitive?: boolean;\n matchDiacritics?: boolean;\n}\n\nexport interface GroupingOptions<T extends object> {\n groupKey?: Keys<T>;\n valueKey?: Keys<T>;\n displayKey?: Keys<T>;\n direction: GroupingDirection;\n}\n\n/* marshalByValue */\nexport interface IgcComboChangeEventArgs<T extends object = any> {\n newValue: ComboValue<T>[];\n /* primitiveValue */\n items: T[];\n /* blazorAlternateName: changeType */\n type: ComboChangeType;\n}\n\nexport interface IgcComboEventMap {\n igcChange: CustomEvent<IgcComboChangeEventArgs>;\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport type ComboItemTemplate<T extends object> = (\n props: ComboTemplateProps<T>\n) => TemplateResult;\nexport interface ComboTemplateProps<T extends object> {\n item: T;\n}\n"]}
|
|
@@ -3,15 +3,14 @@ type RootClickControllerConfig = {
|
|
|
3
3
|
hideCallback?: () => void;
|
|
4
4
|
target?: HTMLElement;
|
|
5
5
|
};
|
|
6
|
-
|
|
6
|
+
interface RootClickControllerHost extends ReactiveControllerHost, HTMLElement {
|
|
7
7
|
open: boolean;
|
|
8
8
|
keepOpenOnOutsideClick?: boolean;
|
|
9
9
|
hide(): void;
|
|
10
|
-
}
|
|
10
|
+
}
|
|
11
11
|
export declare class RootClickController implements ReactiveController {
|
|
12
12
|
private readonly host;
|
|
13
13
|
private config?;
|
|
14
|
-
disabled: boolean;
|
|
15
14
|
constructor(host: RootClickControllerHost, config?: RootClickControllerConfig | undefined);
|
|
16
15
|
private addEventListeners;
|
|
17
16
|
private removeEventListeners;
|
|
@@ -3,16 +3,15 @@ export class RootClickController {
|
|
|
3
3
|
constructor(host, config) {
|
|
4
4
|
this.host = host;
|
|
5
5
|
this.config = config;
|
|
6
|
-
this.disabled = false;
|
|
7
6
|
this.host.addController(this);
|
|
8
7
|
}
|
|
9
8
|
addEventListeners() {
|
|
10
9
|
if (!this.host.keepOpenOnOutsideClick) {
|
|
11
|
-
document.addEventListener('click', this);
|
|
10
|
+
document.addEventListener('click', this, { capture: true });
|
|
12
11
|
}
|
|
13
12
|
}
|
|
14
13
|
removeEventListeners() {
|
|
15
|
-
document.removeEventListener('click', this);
|
|
14
|
+
document.removeEventListener('click', this, { capture: true });
|
|
16
15
|
}
|
|
17
16
|
configureListeners() {
|
|
18
17
|
this.host.open ? this.addEventListeners() : this.removeEventListeners();
|
|
@@ -25,7 +24,7 @@ export class RootClickController {
|
|
|
25
24
|
return !findElementFromEventPath((node) => targets.has(node), event);
|
|
26
25
|
}
|
|
27
26
|
handleEvent(event) {
|
|
28
|
-
if (this.host.keepOpenOnOutsideClick
|
|
27
|
+
if (this.host.keepOpenOnOutsideClick) {
|
|
29
28
|
return;
|
|
30
29
|
}
|
|
31
30
|
if (this.shouldHide(event)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root-click.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/root-click.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"root-click.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/root-click.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AActD,MAAM,OAAO,mBAAmB;IAC9B,YACmB,IAA6B,EACtC,MAAkC;QADzB,SAAI,GAAJ,IAAI,CAAyB;QACtC,WAAM,GAAN,MAAM,CAA4B;QAE1C,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACtC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACjE,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC1E,CAAC;IAEO,UAAU,CAAC,KAAmB;QACpC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE9C,IAAI,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CAAC,wBAAwB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC;IAEM,WAAW,CAAC,KAAmB;QACpC,IAAI,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,IAAI;QACV,IAAI,CAAC,MAAM,EAAE,YAAY;YACvB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAC1C,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAEM,MAAM,CAAC,MAAkC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;QAC9C,CAAC;QACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,gBAAgB;QACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;CACF;AAED,MAAM,UAAU,mBAAmB,CACjC,IAA6B,EAC7B,MAAkC;IAElC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { findElementFromEventPath } from '../util.js';\n\ntype RootClickControllerConfig = {\n hideCallback?: () => void;\n target?: HTMLElement;\n};\n\ninterface RootClickControllerHost extends ReactiveControllerHost, HTMLElement {\n open: boolean;\n keepOpenOnOutsideClick?: boolean;\n hide(): void;\n}\n\n/* blazorSuppress */\nexport class RootClickController implements ReactiveController {\n constructor(\n private readonly host: RootClickControllerHost,\n private config?: RootClickControllerConfig\n ) {\n this.host.addController(this);\n }\n\n private addEventListeners() {\n if (!this.host.keepOpenOnOutsideClick) {\n document.addEventListener('click', this, { capture: true });\n }\n }\n\n private removeEventListeners() {\n document.removeEventListener('click', this, { capture: true });\n }\n\n private configureListeners() {\n this.host.open ? this.addEventListeners() : this.removeEventListeners();\n }\n\n private shouldHide(event: PointerEvent) {\n const targets = new Set<Element>([this.host]);\n\n if (this.config?.target) {\n targets.add(this.config.target);\n }\n\n return !findElementFromEventPath((node) => targets.has(node), event);\n }\n\n public handleEvent(event: PointerEvent) {\n if (this.host.keepOpenOnOutsideClick) {\n return;\n }\n\n if (this.shouldHide(event)) {\n this.hide();\n }\n }\n\n private hide() {\n this.config?.hideCallback\n ? this.config.hideCallback.call(this.host)\n : this.host.hide();\n }\n\n public update(config?: RootClickControllerConfig) {\n if (config) {\n this.config = { ...this.config, ...config };\n }\n this.configureListeners();\n }\n\n public hostConnected() {\n this.configureListeners();\n }\n\n public hostDisconnected() {\n this.removeEventListeners();\n }\n}\n\nexport function addRootClickHandler(\n host: RootClickControllerHost,\n config?: RootClickControllerConfig\n) {\n return new RootClickController(host, config);\n}\n"]}
|
|
@@ -54,10 +54,6 @@ export class IgcBaseComboBoxLikeComponent extends LitElement {
|
|
|
54
54
|
return true;
|
|
55
55
|
}
|
|
56
56
|
async show() {
|
|
57
|
-
this._rootClickController.disabled = true;
|
|
58
|
-
requestAnimationFrame(() => {
|
|
59
|
-
this._rootClickController.disabled = false;
|
|
60
|
-
});
|
|
61
57
|
return this._show();
|
|
62
58
|
}
|
|
63
59
|
async hide() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/combo-box.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAUvC,MAAM,OAAgB,4BAA6B,SAAQ,UAAU;IAArE;;QASY,yBAAoB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAOpD,qBAAgB,GAAG,KAAK,CAAC;QAWzB,2BAAsB,GAAG,KAAK,CAAC;QAO/B,SAAI,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/combo-box.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAUvC,MAAM,OAAgB,4BAA6B,SAAQ,UAAU;IAArE;;QASY,yBAAoB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAOpD,qBAAgB,GAAG,KAAK,CAAC;QAWzB,2BAAsB,GAAG,KAAK,CAAC;QAO/B,SAAI,GAAG,KAAK,CAAC;IAkEtB,CAAC;IAhEW,WAAW;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAES,WAAW;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAES,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK;QACrC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;YACrD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAES,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK;QACrC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;YACpD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAGM,KAAK,CAAC,IAAI;QACf,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAGM,KAAK,CAAC,IAAI;QACf,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAGM,KAAK,CAAC,MAAM;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;CACF;AApFQ;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;sEAC7C;AAWzB;IALN,QAAQ,CAAC;QACR,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,4BAA4B;KACxC,CAAC;4EACoC;AAO/B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACvB;AAoEtB,MAAM,UAAU,QAAQ,CAAwB,IAAU,EAAE,OAAe;IACzE,OAAO,SAAS,CAAI,IAAI,EAAE,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAC7E,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,IAAU,EACV,OAAe;IAEf,OAAO,SAAS,CACd,IAAI,EACJ,cAAc,EACd,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAClD,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB,CAE/B,KAAU,EAAE,IAAO;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC,KAAK,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAChD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,qBAAqB,CAEnC,KAAU,EAAE,IAAO;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC,KAAK,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,wBAAwB,CAEtC,KAAU;IACV,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IAE1E,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { addRootClickHandler } from '../controllers/root-click.js';\nimport { iterNodes } from '../util.js';\nimport type { UnpackCustomEvent } from './event-emitter.js';\n\ninterface IgcBaseComboBoxEventMap {\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport abstract class IgcBaseComboBoxLikeComponent extends LitElement {\n public declare emitEvent: <\n K extends keyof IgcBaseComboBoxEventMap,\n D extends UnpackCustomEvent<IgcBaseComboBoxEventMap[K]>,\n >(\n event: K,\n eventInitDict?: CustomEventInit<D>\n ) => boolean;\n\n protected _rootClickController = addRootClickHandler(this);\n\n /**\n * Whether the component dropdown should be kept open on selection.\n * @attr keep-open-on-select\n */\n @property({ type: Boolean, reflect: true, attribute: 'keep-open-on-select' })\n public keepOpenOnSelect = false;\n\n /**\n * Whether the component dropdown should be kept open on clicking outside of it.\n * @attr keep-open-on-outside-click\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'keep-open-on-outside-click',\n })\n public keepOpenOnOutsideClick = false;\n\n /**\n * Sets the open state of the component.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n protected emitClosing() {\n return this.emitEvent('igcClosing', { cancelable: true });\n }\n\n protected emitClosed() {\n return this.emitEvent('igcClosed');\n }\n\n protected emitOpening() {\n return this.emitEvent('igcOpening', { cancelable: true });\n }\n\n protected emitOpened() {\n return this.emitEvent('igcOpened');\n }\n\n protected handleAnchorClick() {\n this.open ? this._hide(true) : this._show(true);\n }\n\n protected async _hide(emitEvent = false) {\n if (!this.open || (emitEvent && !this.emitClosing())) {\n return false;\n }\n\n this.open = false;\n\n if (emitEvent) {\n await this.updateComplete;\n this.emitClosed();\n }\n\n return true;\n }\n\n protected async _show(emitEvent = false) {\n if (this.open || (emitEvent && !this.emitOpening())) {\n return false;\n }\n\n this.open = true;\n\n if (emitEvent) {\n await this.updateComplete;\n this.emitOpened();\n }\n\n return true;\n }\n\n /** Shows the component. */\n public async show(): Promise<boolean> {\n return this._show();\n }\n\n /** Hides the component. */\n public async hide(): Promise<boolean> {\n return this._hide();\n }\n\n /** Toggles the open state of the component. */\n public async toggle(): Promise<boolean> {\n return this.open ? this.hide() : this.show();\n }\n}\n\nexport function getItems<T extends HTMLElement>(root: Node, tagName: string) {\n return iterNodes<T>(root, 'SHOW_ELEMENT', (item) => item.matches(tagName));\n}\n\nexport function getActiveItems<T extends HTMLElement & { disabled: boolean }>(\n root: Node,\n tagName: string\n) {\n return iterNodes<T>(\n root,\n 'SHOW_ELEMENT',\n (item) => item.matches(tagName) && !item.disabled\n );\n}\n\nexport function getNextActiveItem<\n T extends HTMLElement & { disabled: boolean },\n>(items: T[], from: T) {\n const current = items.indexOf(from);\n\n for (let i = current + 1; i < items.length; i++) {\n if (!items[i].disabled) {\n return items[i];\n }\n }\n\n return items[current];\n}\n\nexport function getPreviousActiveItem<\n T extends HTMLElement & { disabled: boolean },\n>(items: T[], from: T) {\n const current = items.indexOf(from);\n\n for (let i = current - 1; i >= 0; i--) {\n if (!items[i].disabled) {\n return items[i];\n }\n }\n\n return items[current];\n}\n\nexport function setInitialSelectionState<\n T extends HTMLElement & { selected: boolean },\n>(items: T[]) {\n const lastSelected = items.filter((item) => item.selected).at(-1) ?? null;\n\n for (const item of items) {\n if (item !== lastSelected) {\n item.selected = false;\n }\n }\n\n return lastSelected;\n}\n"]}
|
|
@@ -41,10 +41,6 @@ export function FormAssociatedMixin(superClass) {
|
|
|
41
41
|
this._disabled = false;
|
|
42
42
|
this._invalid = false;
|
|
43
43
|
this._dirty = false;
|
|
44
|
-
this.handleInvalid = (event) => {
|
|
45
|
-
event.preventDefault();
|
|
46
|
-
this.invalid = true;
|
|
47
|
-
};
|
|
48
44
|
this.__internals = this.attachInternals();
|
|
49
45
|
this.addEventListener('invalid', this.handleInvalid);
|
|
50
46
|
}
|
|
@@ -69,6 +65,10 @@ export function FormAssociatedMixin(superClass) {
|
|
|
69
65
|
this.value = this._defaultValue;
|
|
70
66
|
}
|
|
71
67
|
}
|
|
68
|
+
handleInvalid(event) {
|
|
69
|
+
event.preventDefault();
|
|
70
|
+
this.invalid = true;
|
|
71
|
+
}
|
|
72
72
|
setFormValue(value, state) {
|
|
73
73
|
this.__internals.setFormValue(value, state || value);
|
|
74
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-associated.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport type { Validator } from '../validators.js';\nimport type { Constructor } from './constructor.js';\n\nexport declare class FormAssociatedElementInterface {\n public static readonly formAssociated: boolean;\n\n private __internals: ElementInternals;\n protected get __validators(): Validator[];\n protected _disabled: boolean;\n protected _invalid: boolean;\n protected _dirty: boolean;\n\n /**\n * The default value of the control at \"creation\" time.\n *\n * @remarks\n * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n * respective property.\n *\n * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n */\n protected _defaultValue: unknown;\n\n /**\n * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n * if the element has completed the first update cycle or it has been interacted with by the user.\n *\n * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n */\n protected setInvalidState(): void;\n\n /**\n * Executes the component validators and updates the internal validity state.\n */\n protected updateValidity(message?: string): void;\n\n /**\n * Saves the initial value/checked state of the control.\n *\n * Called on connectedCallback.\n */\n protected setDefaultValue(): void;\n\n /**\n * Called when the parent form is reset.\n *\n * Restores the initially bound value/checked state of the control.\n */\n protected restoreDefaultValue(): void;\n\n protected setFormValue(\n value: string | File | FormData | null,\n state?: string | File | FormData | null | undefined\n ): void;\n protected setValidity(\n flags?: ValidityStateFlags | undefined,\n message?: string | undefined,\n anchor?: HTMLElement | undefined\n ): void;\n\n protected formResetCallback(): void;\n protected formDisabledCallback(state: boolean): void;\n protected formStateRestoreCallback(\n state: string | FormData | File,\n mode: 'autocomplete' | 'restore'\n ): void;\n\n /**\n * The disabled state of the component\n * @attr [disabled=false]\n */\n public disabled: boolean;\n\n /**\n * Control the validity of the control.\n * @attr\n */\n public invalid: boolean;\n\n /**\n * The name attribute of the control.\n * @attr\n */\n public name: string;\n\n /** Returns the HTMLFormElement associated with this element. */\n public get form(): HTMLFormElement | null;\n\n /**\n * Returns a ValidityState object which represents the different validity states\n * the element can be in, with respect to constraint validation.\n */\n public get validity(): ValidityState;\n\n /** A string containing the validation message of this element. */\n public get validationMessage(): string;\n\n /**\n * A boolean value which returns true if the element is a submittable element\n * that is a candidate for constraint validation.\n */\n public get willValidate(): boolean;\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public checkValidity(): boolean;\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity(): boolean;\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string): void;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n superClass: T\n) {\n class FormAssociatedElement extends superClass {\n public static readonly formAssociated = true;\n\n private __internals: ElementInternals;\n protected _disabled = false;\n protected _invalid = false;\n protected _dirty = false;\n\n protected get __validators(): Validator[] {\n return [];\n }\n\n /**\n * The default value of the control at \"creation\" time.\n *\n * @remarks\n * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n * respective property.\n *\n * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n */\n protected _defaultValue: unknown;\n\n /**\n * The name attribute of the control.\n * @attr\n */\n @property({ reflect: true })\n public name!: string;\n\n /** Returns the HTMLFormElement associated with this element. */\n public get form(): HTMLFormElement | null {\n return this.__internals.form;\n }\n\n /**\n * Returns a ValidityState object which represents the different validity states\n * the element can be in, with respect to constraint validation.\n */\n public get validity(): ValidityState {\n return this.__internals.validity;\n }\n\n /** A string containing the validation message of this element. */\n public get validationMessage(): string {\n return this.__internals.validationMessage;\n }\n\n /**\n * A boolean value which returns true if the element is a submittable element\n * that is a candidate for constraint validation.\n */\n public get willValidate(): boolean {\n return this.__internals.willValidate;\n }\n\n /**\n * The disabled state of the component\n *\n * @attr\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public set disabled(value: boolean) {\n this._disabled = value;\n this.toggleAttribute('disabled', Boolean(this._disabled));\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Control the validity of the control.\n *\n * @attr\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public set invalid(value: boolean) {\n this._invalid = value;\n this.toggleAttribute('invalid', Boolean(this._invalid));\n }\n\n public get invalid(): boolean {\n return this._invalid;\n }\n\n constructor(...args: any[]) {\n super(args);\n this.__internals = this.attachInternals();\n this.addEventListener('invalid', this.handleInvalid);\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this._dirty = false;\n this.setDefaultValue();\n }\n\n /**\n * Saves the initial value/checked state of the control.\n *\n * Called on connectedCallback.\n */\n protected setDefaultValue() {\n if ('checked' in this) {\n this._defaultValue = this.checked;\n } else if ('value' in this) {\n this._defaultValue = this.value;\n }\n }\n\n /**\n * Called when the parent form is reset.\n *\n * Restores the initially bound value/checked state of the control.\n */\n protected restoreDefaultValue() {\n if ('checked' in this) {\n this.checked = this._defaultValue;\n } else if ('value' in this) {\n this.value = this._defaultValue;\n }\n }\n\n protected handleInvalid = (event: Event) => {\n event.preventDefault();\n this.invalid = true;\n };\n\n protected setFormValue(\n value: string | File | FormData | null,\n state?: string | File | FormData | null | undefined\n ) {\n this.__internals.setFormValue(value, state || value);\n }\n\n protected setValidity(\n flags?: ValidityStateFlags | undefined,\n message?: string | undefined,\n anchor?: HTMLElement | undefined\n ) {\n this.__internals.setValidity(flags, message, anchor);\n }\n\n protected formResetCallback() {\n this.restoreDefaultValue();\n this._dirty = false;\n\n // Apply any changes happening during form reset synchronously\n this.performUpdate();\n\n this.invalid = false;\n }\n\n protected formDisabledCallback(state: boolean) {\n this._disabled = state;\n this.requestUpdate();\n }\n\n /**\n * Executes the component validators and updates the internal validity state.\n */\n protected updateValidity(message?: string) {\n const validity: ValidityStateFlags = {};\n let validationMessage = '';\n\n for (const validator of this.__validators) {\n const isValid = validator.isValid(this);\n\n validity[validator.key] = !isValid;\n\n if (!isValid) {\n validationMessage =\n typeof validator.message === 'function'\n ? validator.message(this)\n : validator.message;\n }\n }\n\n if (message) {\n validity.customError = true;\n validationMessage = message;\n }\n\n this.__internals.setValidity(validity, validationMessage);\n }\n\n /**\n * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n * if the element has completed the first update cycle or it has been interacted with by the user.\n *\n * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n */\n protected setInvalidState() {\n if (this.hasUpdated || this._dirty) {\n this.invalid = !this.checkValidity();\n }\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity() {\n return this.__internals.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public checkValidity() {\n return this.__internals.checkValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string) {\n this.updateValidity(message);\n this.invalid = !this.checkValidity();\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n T;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"form-associated.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport type { Validator } from '../validators.js';\nimport type { Constructor } from './constructor.js';\n\nexport declare class FormAssociatedElementInterface {\n public static readonly formAssociated: boolean;\n\n private __internals: ElementInternals;\n protected get __validators(): Validator[];\n protected _disabled: boolean;\n protected _invalid: boolean;\n protected _dirty: boolean;\n\n /**\n * The default value of the control at \"creation\" time.\n *\n * @remarks\n * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n * respective property.\n *\n * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n */\n protected _defaultValue: unknown;\n\n /**\n * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n * if the element has completed the first update cycle or it has been interacted with by the user.\n *\n * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n */\n protected setInvalidState(): void;\n\n /**\n * Executes the component validators and updates the internal validity state.\n */\n protected updateValidity(message?: string): void;\n\n /**\n * Saves the initial value/checked state of the control.\n *\n * Called on connectedCallback.\n */\n protected setDefaultValue(): void;\n\n /**\n * Called when the parent form is reset.\n *\n * Restores the initially bound value/checked state of the control.\n */\n protected restoreDefaultValue(): void;\n\n protected setFormValue(\n value: string | File | FormData | null,\n state?: string | File | FormData | null | undefined\n ): void;\n protected setValidity(\n flags?: ValidityStateFlags | undefined,\n message?: string | undefined,\n anchor?: HTMLElement | undefined\n ): void;\n\n protected formResetCallback(): void;\n protected formDisabledCallback(state: boolean): void;\n protected formStateRestoreCallback(\n state: string | FormData | File,\n mode: 'autocomplete' | 'restore'\n ): void;\n\n /**\n * The disabled state of the component\n * @attr [disabled=false]\n */\n public disabled: boolean;\n\n /**\n * Control the validity of the control.\n * @attr\n */\n public invalid: boolean;\n\n /**\n * The name attribute of the control.\n * @attr\n */\n public name: string;\n\n /** Returns the HTMLFormElement associated with this element. */\n public get form(): HTMLFormElement | null;\n\n /**\n * Returns a ValidityState object which represents the different validity states\n * the element can be in, with respect to constraint validation.\n */\n public get validity(): ValidityState;\n\n /** A string containing the validation message of this element. */\n public get validationMessage(): string;\n\n /**\n * A boolean value which returns true if the element is a submittable element\n * that is a candidate for constraint validation.\n */\n public get willValidate(): boolean;\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public checkValidity(): boolean;\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity(): boolean;\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string): void;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n superClass: T\n) {\n class FormAssociatedElement extends superClass {\n public static readonly formAssociated = true;\n\n private __internals: ElementInternals;\n protected _disabled = false;\n protected _invalid = false;\n protected _dirty = false;\n\n protected get __validators(): Validator[] {\n return [];\n }\n\n /**\n * The default value of the control at \"creation\" time.\n *\n * @remarks\n * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n * respective property.\n *\n * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n */\n protected _defaultValue: unknown;\n\n /**\n * The name attribute of the control.\n * @attr\n */\n @property({ reflect: true })\n public name!: string;\n\n /** Returns the HTMLFormElement associated with this element. */\n public get form(): HTMLFormElement | null {\n return this.__internals.form;\n }\n\n /**\n * Returns a ValidityState object which represents the different validity states\n * the element can be in, with respect to constraint validation.\n */\n public get validity(): ValidityState {\n return this.__internals.validity;\n }\n\n /** A string containing the validation message of this element. */\n public get validationMessage(): string {\n return this.__internals.validationMessage;\n }\n\n /**\n * A boolean value which returns true if the element is a submittable element\n * that is a candidate for constraint validation.\n */\n public get willValidate(): boolean {\n return this.__internals.willValidate;\n }\n\n /**\n * The disabled state of the component\n *\n * @attr\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public set disabled(value: boolean) {\n this._disabled = value;\n this.toggleAttribute('disabled', Boolean(this._disabled));\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Control the validity of the control.\n *\n * @attr\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n public set invalid(value: boolean) {\n this._invalid = value;\n this.toggleAttribute('invalid', Boolean(this._invalid));\n }\n\n public get invalid(): boolean {\n return this._invalid;\n }\n\n constructor(...args: any[]) {\n super(args);\n this.__internals = this.attachInternals();\n this.addEventListener('invalid', this.handleInvalid);\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this._dirty = false;\n this.setDefaultValue();\n }\n\n /**\n * Saves the initial value/checked state of the control.\n *\n * Called on connectedCallback.\n */\n protected setDefaultValue() {\n if ('checked' in this) {\n this._defaultValue = this.checked;\n } else if ('value' in this) {\n this._defaultValue = this.value;\n }\n }\n\n /**\n * Called when the parent form is reset.\n *\n * Restores the initially bound value/checked state of the control.\n */\n protected restoreDefaultValue() {\n if ('checked' in this) {\n this.checked = this._defaultValue;\n } else if ('value' in this) {\n this.value = this._defaultValue;\n }\n }\n\n protected handleInvalid(event: Event) {\n event.preventDefault();\n this.invalid = true;\n }\n\n protected setFormValue(\n value: string | File | FormData | null,\n state?: string | File | FormData | null | undefined\n ) {\n this.__internals.setFormValue(value, state || value);\n }\n\n protected setValidity(\n flags?: ValidityStateFlags | undefined,\n message?: string | undefined,\n anchor?: HTMLElement | undefined\n ) {\n this.__internals.setValidity(flags, message, anchor);\n }\n\n protected formResetCallback() {\n this.restoreDefaultValue();\n this._dirty = false;\n\n // Apply any changes happening during form reset synchronously\n this.performUpdate();\n\n this.invalid = false;\n }\n\n protected formDisabledCallback(state: boolean) {\n this._disabled = state;\n this.requestUpdate();\n }\n\n /**\n * Executes the component validators and updates the internal validity state.\n */\n protected updateValidity(message?: string) {\n const validity: ValidityStateFlags = {};\n let validationMessage = '';\n\n for (const validator of this.__validators) {\n const isValid = validator.isValid(this);\n\n validity[validator.key] = !isValid;\n\n if (!isValid) {\n validationMessage =\n typeof validator.message === 'function'\n ? validator.message(this)\n : validator.message;\n }\n }\n\n if (message) {\n validity.customError = true;\n validationMessage = message;\n }\n\n this.__internals.setValidity(validity, validationMessage);\n }\n\n /**\n * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n * if the element has completed the first update cycle or it has been interacted with by the user.\n *\n * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n */\n protected setInvalidState() {\n if (this.hasUpdated || this._dirty) {\n this.invalid = !this.checkValidity();\n }\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity() {\n return this.__internals.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public checkValidity() {\n return this.__internals.checkValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string) {\n this.updateValidity(message);\n this.invalid = !this.checkValidity();\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n T;\n}\n"]}
|