igniteui-angular 22.1.0-beta.2 → 22.1.0-beta.4
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/fesm2022/igniteui-angular-accordion.mjs +7 -7
- package/fesm2022/igniteui-angular-action-strip.mjs +10 -10
- package/fesm2022/igniteui-angular-avatar.mjs +7 -7
- package/fesm2022/igniteui-angular-badge.mjs +7 -7
- package/fesm2022/igniteui-angular-banner.mjs +11 -11
- package/fesm2022/igniteui-angular-banner.mjs.map +1 -1
- package/fesm2022/igniteui-angular-bottom-nav.mjs +27 -24
- package/fesm2022/igniteui-angular-bottom-nav.mjs.map +1 -1
- package/fesm2022/igniteui-angular-button-group.mjs +7 -7
- package/fesm2022/igniteui-angular-calendar.mjs +65 -65
- package/fesm2022/igniteui-angular-calendar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-card.mjs +39 -34
- package/fesm2022/igniteui-angular-card.mjs.map +1 -1
- package/fesm2022/igniteui-angular-carousel.mjs +22 -22
- package/fesm2022/igniteui-angular-chat-extras.mjs +6 -6
- package/fesm2022/igniteui-angular-chat.mjs +12 -12
- package/fesm2022/igniteui-angular-checkbox.mjs +7 -7
- package/fesm2022/igniteui-angular-chips.mjs +11 -11
- package/fesm2022/igniteui-angular-chips.mjs.map +1 -1
- package/fesm2022/igniteui-angular-combo.mjs +55 -55
- package/fesm2022/igniteui-angular-combo.mjs.map +1 -1
- package/fesm2022/igniteui-angular-core.mjs +54 -54
- package/fesm2022/igniteui-angular-date-picker.mjs +38 -38
- package/fesm2022/igniteui-angular-dialog.mjs +17 -15
- package/fesm2022/igniteui-angular-dialog.mjs.map +1 -1
- package/fesm2022/igniteui-angular-directives.mjs +219 -193
- package/fesm2022/igniteui-angular-directives.mjs.map +1 -1
- package/fesm2022/igniteui-angular-drop-down.mjs +30 -30
- package/fesm2022/igniteui-angular-drop-down.mjs.map +1 -1
- package/fesm2022/igniteui-angular-expansion-panel.mjs +34 -30
- package/fesm2022/igniteui-angular-expansion-panel.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-core.mjs +433 -431
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +58 -53
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +39 -39
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-lite.mjs +12 -12
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +82 -82
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +57 -57
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-icon.mjs +11 -11
- package/fesm2022/igniteui-angular-icon.mjs.map +1 -1
- package/fesm2022/igniteui-angular-input-group.mjs +26 -26
- package/fesm2022/igniteui-angular-input-group.mjs.map +1 -1
- package/fesm2022/igniteui-angular-list.mjs +46 -42
- package/fesm2022/igniteui-angular-list.mjs.map +1 -1
- package/fesm2022/igniteui-angular-navbar.mjs +18 -15
- package/fesm2022/igniteui-angular-navbar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-navigation-drawer.mjs +21 -18
- package/fesm2022/igniteui-angular-navigation-drawer.mjs.map +1 -1
- package/fesm2022/igniteui-angular-paginator.mjs +19 -19
- package/fesm2022/igniteui-angular-progressbar.mjs +19 -19
- package/fesm2022/igniteui-angular-query-builder.mjs +23 -23
- package/fesm2022/igniteui-angular-query-builder.mjs.map +1 -1
- package/fesm2022/igniteui-angular-radio.mjs +10 -10
- package/fesm2022/igniteui-angular-select.mjs +27 -27
- package/fesm2022/igniteui-angular-select.mjs.map +1 -1
- package/fesm2022/igniteui-angular-simple-combo.mjs +9 -9
- package/fesm2022/igniteui-angular-simple-combo.mjs.map +1 -1
- package/fesm2022/igniteui-angular-slider.mjs +28 -28
- package/fesm2022/igniteui-angular-snackbar.mjs +8 -8
- package/fesm2022/igniteui-angular-snackbar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-splitter.mjs +13 -13
- package/fesm2022/igniteui-angular-stepper.mjs +42 -39
- package/fesm2022/igniteui-angular-stepper.mjs.map +1 -1
- package/fesm2022/igniteui-angular-switch.mjs +7 -7
- package/fesm2022/igniteui-angular-tabs.mjs +39 -37
- package/fesm2022/igniteui-angular-tabs.mjs.map +1 -1
- package/fesm2022/igniteui-angular-time-picker.mjs +21 -21
- package/fesm2022/igniteui-angular-time-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-toast.mjs +10 -9
- package/fesm2022/igniteui-angular-toast.mjs.map +1 -1
- package/fesm2022/igniteui-angular-tree.mjs +30 -30
- package/fesm2022/igniteui-angular-tree.mjs.map +1 -1
- package/lib/core/styles/components/button/_button-theme.scss +13 -12
- package/lib/core/styles/components/highlight/highlight-theme.scss +1 -6
- package/lib/core/styles/components/icon-button/_icon-button-theme.scss +5 -7
- package/lib/core/styles/components/label/_label-theme.scss +1 -6
- package/lib/core/styles/components/rating/_rating-theme.scss +1 -6
- package/lib/core/styles/components/ripple/_ripple-theme.scss +1 -6
- package/lib/core/styles/components/tooltip/_tooltip-theme.scss +1 -6
- package/lib/core/styles/themes/generators/_base.scss +6 -2
- package/lib/core/styles/typography/_typography.scss +3 -5
- package/package.json +2 -2
- package/styles/igniteui-angular-dark.css +1 -1
- package/styles/igniteui-angular.css +1 -1
- package/styles/igniteui-bootstrap-dark.css +1 -1
- package/styles/igniteui-bootstrap-light.css +1 -1
- package/styles/igniteui-dark-green.css +1 -1
- package/styles/igniteui-fluent-dark-excel.css +1 -1
- package/styles/igniteui-fluent-dark-word.css +1 -1
- package/styles/igniteui-fluent-dark.css +1 -1
- package/styles/igniteui-fluent-light-excel.css +1 -1
- package/styles/igniteui-fluent-light-word.css +1 -1
- package/styles/igniteui-fluent-light.css +1 -1
- package/styles/igniteui-indigo-dark.css +1 -1
- package/styles/igniteui-indigo-light.css +1 -1
- package/styles/maps/igniteui-angular-dark.css.map +1 -1
- package/styles/maps/igniteui-angular.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
- package/styles/maps/igniteui-dark-green.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-light.css.map +1 -1
- package/styles/maps/igniteui-indigo-dark.css.map +1 -1
- package/styles/maps/igniteui-indigo-light.css.map +1 -1
- package/types/igniteui-angular-bottom-nav.d.ts +2 -1
- package/types/igniteui-angular-card.d.ts +4 -3
- package/types/igniteui-angular-dialog.d.ts +2 -1
- package/types/igniteui-angular-directives.d.ts +17 -1
- package/types/igniteui-angular-expansion-panel.d.ts +3 -2
- package/types/igniteui-angular-grids-core.d.ts +2 -1
- package/types/igniteui-angular-list.d.ts +3 -2
- package/types/igniteui-angular-navbar.d.ts +2 -1
- package/types/igniteui-angular-navigation-drawer.d.ts +2 -1
- package/types/igniteui-angular-stepper.d.ts +3 -2
- package/types/igniteui-angular-tabs.d.ts +2 -1
- package/types/igniteui-angular-toast.d.ts +2 -1
|
@@ -17,10 +17,10 @@ class IgxChatMarkdownService {
|
|
|
17
17
|
const renderer = await this._getRenderer();
|
|
18
18
|
return await renderer.parse(text);
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
21
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatMarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
21
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatMarkdownService, providedIn: 'root' }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatMarkdownService, decorators: [{
|
|
24
24
|
type: Injectable,
|
|
25
25
|
args: [{ providedIn: 'root' }]
|
|
26
26
|
}] });
|
|
@@ -33,10 +33,10 @@ class MarkdownPipe {
|
|
|
33
33
|
async transform(text) {
|
|
34
34
|
return this._sanitizer.bypassSecurityTrustHtml(await this._service.parse(text ?? ''));
|
|
35
35
|
}
|
|
36
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
37
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.
|
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
37
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: MarkdownPipe, isStandalone: true, name: "fromMarkdown" }); }
|
|
38
38
|
}
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MarkdownPipe, decorators: [{
|
|
40
40
|
type: Pipe,
|
|
41
41
|
args: [{ name: 'fromMarkdown' }]
|
|
42
42
|
}] });
|
|
@@ -145,10 +145,10 @@ class IgxChatComponent {
|
|
|
145
145
|
return viewRef.rootNodes;
|
|
146
146
|
};
|
|
147
147
|
}
|
|
148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: IgxChatComponent, isStandalone: true, selector: "igx-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, draftMessage: { classPropertyName: "draftMessage", publicName: "draftMessage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageCreated: "messageCreated", messageReact: "messageReact", attachmentClick: "attachmentClick", attachmentDrag: "attachmentDrag", attachmentDrop: "attachmentDrop", typingChange: "typingChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputChange: "inputChange" }, ngImport: i0, template: "<igc-chat\n [messages]=\"messages()\"\n [draftMessage]=\"draftMessage()\"\n [options]=\"_mergedOptions()\"\n (igcMessageCreated)=\"messageCreated.emit($event.detail)\"\n (igcMessageReact)=\"messageReact.emit($event.detail)\"\n (igcAttachmentClick)=\"attachmentClick.emit($event.detail)\"\n (igcAttachmentDrag)=\"attachmentDrag.emit()\"\n (igcAttachmentDrop)=\"attachmentDrop.emit()\"\n (igcTypingChange)=\"typingChange.emit($event.detail)\"\n (igcInputFocus)=\"inputFocus.emit()\"\n (igcInputBlur)=\"inputBlur.emit()\"\n (igcInputChange)=\"inputChange.emit($event.detail)\"\n>\n <ng-content></ng-content>\n</igc-chat>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
150
150
|
}
|
|
151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatComponent, decorators: [{
|
|
152
152
|
type: Component,
|
|
153
153
|
args: [{ selector: 'igx-chat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<igc-chat\n [messages]=\"messages()\"\n [draftMessage]=\"draftMessage()\"\n [options]=\"_mergedOptions()\"\n (igcMessageCreated)=\"messageCreated.emit($event.detail)\"\n (igcMessageReact)=\"messageReact.emit($event.detail)\"\n (igcAttachmentClick)=\"attachmentClick.emit($event.detail)\"\n (igcAttachmentDrag)=\"attachmentDrag.emit()\"\n (igcAttachmentDrop)=\"attachmentDrop.emit()\"\n (igcTypingChange)=\"typingChange.emit($event.detail)\"\n (igcInputFocus)=\"inputFocus.emit()\"\n (igcInputBlur)=\"inputBlur.emit()\"\n (igcInputChange)=\"inputChange.emit($event.detail)\"\n>\n <ng-content></ng-content>\n</igc-chat>\n" }]
|
|
154
154
|
}], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], draftMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftMessage", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], messageCreated: [{ type: i0.Output, args: ["messageCreated"] }], messageReact: [{ type: i0.Output, args: ["messageReact"] }], attachmentClick: [{ type: i0.Output, args: ["attachmentClick"] }], attachmentDrag: [{ type: i0.Output, args: ["attachmentDrag"] }], attachmentDrop: [{ type: i0.Output, args: ["attachmentDrop"] }], typingChange: [{ type: i0.Output, args: ["typingChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }] } });
|
|
@@ -168,10 +168,10 @@ class IgxChatMessageContextDirective {
|
|
|
168
168
|
static ngTemplateContextGuard(_, ctx) {
|
|
169
169
|
return true;
|
|
170
170
|
}
|
|
171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
172
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatMessageContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
172
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxChatMessageContextDirective, isStandalone: true, selector: "[igxChatMessageContext]", ngImport: i0 }); }
|
|
173
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatMessageContextDirective, decorators: [{
|
|
175
175
|
type: Directive,
|
|
176
176
|
args: [{ selector: '[igxChatMessageContext]', standalone: true }]
|
|
177
177
|
}] });
|
|
@@ -191,10 +191,10 @@ class IgxChatAttachmentContextDirective {
|
|
|
191
191
|
static ngTemplateContextGuard(_, ctx) {
|
|
192
192
|
return true;
|
|
193
193
|
}
|
|
194
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
195
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
194
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatAttachmentContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
195
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxChatAttachmentContextDirective, isStandalone: true, selector: "[igxChatAttachmentContext]", ngImport: i0 }); }
|
|
196
196
|
}
|
|
197
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatAttachmentContextDirective, decorators: [{
|
|
198
198
|
type: Directive,
|
|
199
199
|
args: [{ selector: '[igxChatAttachmentContext]', standalone: true }]
|
|
200
200
|
}] });
|
|
@@ -214,10 +214,10 @@ class IgxChatInputContextDirective {
|
|
|
214
214
|
static ngTemplateContextGuard(_, ctx) {
|
|
215
215
|
return true;
|
|
216
216
|
}
|
|
217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
218
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
217
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatInputContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
218
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxChatInputContextDirective, isStandalone: true, selector: "[igxChatInputContext]", ngImport: i0 }); }
|
|
219
219
|
}
|
|
220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChatInputContextDirective, decorators: [{
|
|
221
221
|
type: Directive,
|
|
222
222
|
args: [{ selector: '[igxChatInputContext]', standalone: true }]
|
|
223
223
|
}] });
|
|
@@ -179,8 +179,8 @@ class IgxCheckboxComponent extends CheckboxBaseDirective {
|
|
|
179
179
|
get checked() {
|
|
180
180
|
return super.checked;
|
|
181
181
|
}
|
|
182
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
182
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
183
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, host: { properties: { "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--material": "this.material", "class.igx-checkbox--indigo": "this.indigo", "class.igx-checkbox--bootstrap": "this.bootstrap", "class.igx-checkbox--fluent": "this.fluent", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [
|
|
184
184
|
{
|
|
185
185
|
provide: EDITOR_PROVIDER,
|
|
186
186
|
useExisting: IgxCheckboxComponent,
|
|
@@ -188,7 +188,7 @@ class IgxCheckboxComponent extends CheckboxBaseDirective {
|
|
|
188
188
|
},
|
|
189
189
|
], usesInheritance: true, ngImport: i0, template: "<input #checkbox class=\"igx-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [value]=\"value\"\n [tabindex]=\"tabindex\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n [attr.aria-label]=\"ariaLabel\"\n (change)=\"_onCheckboxChange($event)\"\n (blur)=\"onBlur()\" />\n\n<div\n igxRipple\n igxRippleTarget=\".igx-checkbox__ripple\"\n [igxRippleDisabled]=\"disableRipple\"\n [igxRippleCentered]=\"true\"\n [igxRippleDuration]=\"300\"\n class=\"igx-checkbox__composite-wrapper\"\n>\n <span #label class=\"igx-checkbox__composite\">\n @if (theme === 'indigo') {\n <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <rect width=\"18\" height=\"4\" x=\"2\" y=\"9\" rx=\"1.85\"/>\n <path 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 </svg>\n } @else {\n <svg class=\"igx-checkbox__composite-mark\" 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 </span>\n\n <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n [class]=\"labelClass\"\n [id]=\"labelId\">\n <ng-content></ng-content>\n</span>\n", styles: ["@layer ig.base{@keyframes scale-in-out{50%{transform:scale(.9);transform-origin:50% 50%}to{transform:scale(1);transform-origin:50% 50%}}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.igx-checkbox__label--before,.igx-checkbox__label{display:inline-block;margin-inline-start:var(--label-margin);margin-block:0;color:var(--label-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;word-wrap:break-all}.igx-checkbox__label--before:empty,.igx-checkbox__label:empty{display:none}.igx-checkbox--focused.igx-checkbox--indeterminate .igx-checkbox__ripple,.igx-checkbox--focused.igx-checkbox--checked .igx-checkbox__ripple,.igx-checkbox--focused:hover .igx-checkbox__ripple,.igx-checkbox--focused .igx-checkbox__ripple,.igx-checkbox--checked:active .igx-checkbox__ripple,.igx-checkbox--checked:hover .igx-checkbox__ripple,.igx-checkbox--indeterminate:active .igx-checkbox__ripple,.igx-checkbox--indeterminate:hover .igx-checkbox__ripple,.igx-checkbox--invalid:hover .igx-checkbox__ripple,.igx-checkbox:active .igx-checkbox__ripple,.igx-checkbox:hover .igx-checkbox__ripple{background:var(--empty-color);transition:background .2s cubic-bezier(.25,.46,.45,.94)}.igx-checkbox--checked:active .igx-checkbox__ripple,.igx-checkbox--checked:hover .igx-checkbox__ripple,.igx-checkbox--indeterminate:active .igx-checkbox__ripple,.igx-checkbox--indeterminate:hover .igx-checkbox__ripple,.igx-checkbox--invalid:hover .igx-checkbox__ripple,.igx-checkbox:active .igx-checkbox__ripple,.igx-checkbox:hover .igx-checkbox__ripple{opacity:.06}@container style(--ig-theme-variant: dark){.igx-checkbox--checked:active .igx-checkbox__ripple,.igx-checkbox--checked:hover .igx-checkbox__ripple,.igx-checkbox--indeterminate:active .igx-checkbox__ripple,.igx-checkbox--indeterminate:hover .igx-checkbox__ripple,.igx-checkbox--invalid:hover .igx-checkbox__ripple,.igx-checkbox:active .igx-checkbox__ripple,.igx-checkbox:hover .igx-checkbox__ripple{opacity:.12}}.igx-checkbox--checked:active .igx-checkbox__ripple,.igx-checkbox--indeterminate:active .igx-checkbox__ripple,.igx-checkbox:active .igx-checkbox__ripple,.igx-checkbox--focused.igx-checkbox--indeterminate .igx-checkbox__ripple,.igx-checkbox--focused.igx-checkbox--checked .igx-checkbox__ripple,.igx-checkbox--focused:hover .igx-checkbox__ripple,.igx-checkbox--focused .igx-checkbox__ripple{opacity:.12}@container style(--ig-theme-variant: dark){.igx-checkbox--checked:active .igx-checkbox__ripple,.igx-checkbox--indeterminate:active .igx-checkbox__ripple,.igx-checkbox:active .igx-checkbox__ripple,.igx-checkbox--focused.igx-checkbox--indeterminate .igx-checkbox__ripple,.igx-checkbox--focused.igx-checkbox--checked .igx-checkbox__ripple,.igx-checkbox--focused:hover .igx-checkbox__ripple,.igx-checkbox--focused .igx-checkbox__ripple{opacity:.24}}.igx-checkbox--focused.igx-checkbox--indeterminate .igx-checkbox__ripple,.igx-checkbox--focused.igx-checkbox--checked .igx-checkbox__ripple{background:var(--fill-color)}.igx-checkbox--focused.igx-checkbox--invalid .igx-checkbox__ripple{background:var(--error-color)}.igx-checkbox--checked:active .igx-checkbox__ripple,.igx-checkbox--checked:hover .igx-checkbox__ripple,.igx-checkbox--indeterminate:active .igx-checkbox__ripple,.igx-checkbox--indeterminate:hover .igx-checkbox__ripple{background:var(--fill-color-hover)}.igx-checkbox--invalid:active .igx-checkbox__ripple,.igx-checkbox--invalid:hover .igx-checkbox__ripple{background:var(--error-color-hover)}.igx-checkbox{--size: 1.25rem;--border-width: .125rem;--label-margin: .5rem;--mark-stroke: 3;--mark-length: 24;--mark-offset: 0;position:relative;display:inline-flex;flex-flow:row nowrap;align-items:center;outline-style:none;cursor:pointer;animation:enable-transitions 0s .1s forwards}.igx-checkbox:hover .igx-checkbox__label,.igx-checkbox:hover .igx-checkbox__label--before{color:var(--label-color-hover)}.igx-checkbox__input{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0,0,0,0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.igx-checkbox__label--before{margin-inline-end:var(--label-margin);order:-1}.igx-checkbox__composite-wrapper{align-items:center;justify-content:center;display:flex;position:relative;width:var(--size);height:var(--size);--ig-ripple-color: var(--empty-color)}.igx-checkbox__composite{position:relative;display:flex;justify-content:center;width:var(--size);height:var(--size);min-width:var(--size);background:var(--empty-fill-color);border-width:var(--border-width);border-style:solid;border-color:var(--empty-color);border-radius:var(--border-radius);-webkit-tap-highlight-color:rgba(0,0,0,0);transition:border-color .2s cubic-bezier(.25,.46,.45,.94),background .2s cubic-bezier(.25,.46,.45,.94);transition-delay:var(--_transition-delay);overflow:hidden}.igx-checkbox__composite-mark{width:100%;stroke:var(--tick-color);stroke-linecap:square;stroke-width:var(--tick-width);stroke-dasharray:var(--mark-length);stroke-dashoffset:var(--mark-length);fill:none;opacity:0;z-index:1}.igx-checkbox__ripple{--_ripple-size: 2.5rem;display:none;position:absolute;top:calc(50% - var(--_ripple-size)/2);width:var(--_ripple-size);aspect-ratio:1;border-radius:var(--border-radius-ripple);overflow:hidden;pointer-events:none;filter:opacity(1)}.igx-checkbox--invalid .igx-checkbox__composite{border-color:var(--error-color)}.igx-checkbox--invalid .igx-checkbox__composite-wrapper{--ig-ripple-color: var(--error-color)}.igx-checkbox--invalid .igx-checkbox__label,.igx-checkbox--invalid .igx-checkbox__label--before{color:var(--error-color)}.igx-checkbox--invalid:hover .igx-checkbox__composite{border-color:var(--error-color-hover)}.igx-checkbox--invalid:hover .igx-checkbox__label,.igx-checkbox--invalid:hover .igx-checkbox__label--before{color:var(--error-color)}.igx-checkbox--invalid.igx-checkbox--checked .igx-checkbox__composite{border-color:var(--error-color);background:var(--error-color)}.igx-checkbox--invalid.igx-checkbox--checked:hover .igx-checkbox__composite{border-color:var(--error-color-hover);background:var(--error-color-hover)}.igx-checkbox--indeterminate .igx-checkbox__composite{border-color:var(--fill-color);background:var(--fill-color)}.igx-checkbox--indeterminate .igx-checkbox__composite-mark{stroke-dashoffset:41;opacity:1;rotate:45deg;transform:translate(calc(var(--mark-stroke) / var(--mark-length) * -1em));margin-inline-start:var(--mark-offset);margin-block-start:var(--mark-offset)}.igx-checkbox--indeterminate:hover .igx-checkbox__composite{border-color:var(--fill-color-hover);background:var(--fill-color-hover)}.igx-checkbox--indeterminate:hover .igx-checkbox__composite:before{background:var(--fill-color-hover)}.igx-checkbox--indeterminate.igx-checkbox--checked .igx-checkbox__composite-mark{stroke-dashoffset:41}.igx-checkbox--invalid.igx-checkbox--indeterminate .igx-checkbox__composite{border-color:var(--error-color);background:var(--error-color)}.igx-checkbox--invalid.igx-checkbox--indeterminate:hover .igx-checkbox__composite{border-color:var(--error-color-hover);background:var(--error-color-hover)}.igx-checkbox--invalid.igx-checkbox--indeterminate.igx-checkbox--checked .igx-checkbox__composite{border-color:var(--error-color);background:var(--error-color)}.igx-checkbox--invalid.igx-checkbox--indeterminate.igx-checkbox--checked:hover .igx-checkbox__composite{border-color:var(--error-color-hover);background:var(--error-color-hover)}.igx-checkbox--checked .igx-checkbox__composite{border-color:var(--fill-color);background:var(--fill-color)}.igx-checkbox--checked .igx-checkbox__composite-mark{stroke-dashoffset:0;opacity:1;transition:all .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94);transition-delay:var(--_transition-delay)}.igx-checkbox--checked .igx-checkbox__composite-wrapper{--ig-ripple-color: var(--fill-color)}.igx-checkbox--checked:hover .igx-checkbox__composite{border-color:var(--fill-color-hover);background:var(--fill-color-hover)}.igx-checkbox--disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;cursor:initial}.igx-checkbox--disabled .igx-checkbox__label,.igx-checkbox--disabled .igx-checkbox__label--before{color:var(--disabled-color-label)}.igx-checkbox--disabled .igx-checkbox__composite{border-color:var(--disabled-color)}.igx-checkbox--checked.igx-checkbox--disabled .igx-checkbox__composite{background:var(--disabled-fill-color);border-color:#0000}.igx-checkbox--checked.igx-checkbox--disabled .igx-checkbox__composite-mark{stroke:var(--disabled-tick-color)}.igx-checkbox--indeterminate.igx-checkbox--disabled .igx-checkbox__composite{background:var(--disabled-indeterminate-color);border-color:#0000}.igx-checkbox--indeterminate.igx-checkbox--disabled .igx-checkbox__composite-mark{stroke:var(--disabled-tick-color)}.igx-checkbox--plain .igx-checkbox__composite{transition:none}.igx-checkbox--plain .igx-checkbox__composite:after{transition:none}.igx-checkbox--plain .igx-checkbox__composite-mark{transition:none}}@layer ig.material{@container style(--ig-theme: material){.igx-checkbox{--label-margin: .125rem;--composite-padding: 1.25rem}.igx-checkbox__label{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom)}.igx-checkbox__ripple{display:block}.igx-checkbox__composite-wrapper{padding:var(--composite-padding)}.igx-checkbox--invalid.igx-checkbox--disabled .igx-checkbox__composite{border-color:var(--disabled-color)}.igx-checkbox--invalid.igx-checkbox--disabled .igx-checkbox__composite-mark{stroke:var(--disabled-tick-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-checkbox{--size: 1rem;--border-width: .0625rem;--mark-offset: 1px}.igx-checkbox:hover .igx-checkbox__composite{border-color:var(--empty-color-hover)}.igx-checkbox__composite-mark{width:.6875rem;aspect-ratio:1;transition:none}.igx-checkbox__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}.igx-checkbox--checked:hover .igx-checkbox__composite,.igx-checkbox--indeterminate:hover .igx-checkbox__composite{border-color:#0000}.igx-checkbox--invalid:hover .igx-checkbox__composite{border-color:var(--error-color-hover)}.igx-checkbox--focused .igx-checkbox__composite{border-radius:var(--border-radius);border-color:var(--ig-primary-200);box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-checkbox--focused:hover .igx-checkbox__composite{border-color:var(--ig-primary-300)}.igx-checkbox--focused.igx-checkbox--checked .igx-checkbox__composite{border-color:#0000}.igx-checkbox--focused.igx-checkbox--invalid .igx-checkbox__composite{border-color:var(--error-color);box-shadow:0 0 0 .25rem var(--focus-outline-color-error)}.igx-checkbox--focused.igx-checkbox--invalid:hover .igx-checkbox__composite{border-color:var(--error-color-hover)}.igx-checkbox--focused.igx-checkbox--indeterminate .igx-checkbox__composite{border-color:#0000}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-checkbox{--border-width: .0625rem;--mark-stroke: 1.5;--mark-offset: -1px}.igx-checkbox:hover .igx-checkbox__composite{background:#0000}.igx-checkbox:hover .igx-checkbox__composite-mark{stroke-linecap:square;stroke-width:var(--mark-stroke);stroke-dasharray:var(--mark-length);stroke-dashoffset:0;fill:none;z-index:1;opacity:1;transition:none;stroke:var(--tick-color-hover)}.igx-checkbox__composite-mark{width:1rem;aspect-ratio:1}.igx-checkbox__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}.igx-checkbox--focused{position:relative}.igx-checkbox--focused:after{content:\"\";position:absolute;inset:-.125rem;box-shadow:0 0 0 .0625rem var(--focus-outline-color)}.igx-checkbox--indeterminate .igx-checkbox__composite{background:#0000}.igx-checkbox--indeterminate .igx-checkbox__composite:before{content:\"\";position:absolute;top:calc(var(--size)/2 - .375rem);inset-inline-start:calc(var(--size)/2 - .375rem);width:.625rem;height:.625rem;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * .125rem),.125rem);background:var(--fill-color);z-index:1}.igx-checkbox--indeterminate .igx-checkbox__composite-mark{stroke:#0000}.igx-checkbox--indeterminate:hover .igx-checkbox__composite{background:#0000}.igx-checkbox--indeterminate:hover .igx-checkbox__composite:before{background:var(--fill-color-hover)}.igx-checkbox--indeterminate:hover .igx-checkbox__composite-mark{stroke:#0000}.igx-checkbox--invalid:hover .igx-checkbox__composite-mark{stroke:var(--error-color)}.igx-checkbox--checked:hover .igx-checkbox__composite{background:var(--fill-color-hover)}.igx-checkbox--checked:hover .igx-checkbox__composite-mark{stroke:var(--tick-color);transition:none}.igx-checkbox--indeterminate.igx-checkbox--checked .igx-checkbox__composite{background:#0000}.igx-checkbox--indeterminate.igx-checkbox--checked .igx-checkbox__composite-mark{stroke:#0000}.igx-checkbox--invalid.igx-checkbox--checked:hover .igx-checkbox__composite{background:var(--error-color-hover)}.igx-checkbox--indeterminate.igx-checkbox--invalid .igx-checkbox__composite{border-color:var(--error-color)}.igx-checkbox--indeterminate.igx-checkbox--invalid .igx-checkbox__composite:before{background:var(--error-color)}.igx-checkbox--indeterminate.igx-checkbox--invalid:hover .igx-checkbox__composite{background:#0000;border-color:var(--error-color-hover)}.igx-checkbox--indeterminate.igx-checkbox--invalid:hover .igx-checkbox__composite:before{background:var(--error-color-hover)}.igx-checkbox--indeterminate.igx-checkbox--invalid:hover .igx-checkbox__composite-mark{stroke:#0000}.igx-checkbox--invalid.igx-checkbox--disabled .igx-checkbox__composite{border-color:var(--disabled-color)}.igx-checkbox--invalid.igx-checkbox--checked .igx-checkbox__composite{background:#0000}.igx-checkbox--disabled.igx-checkbox--indeterminate .igx-checkbox__composite{border-color:var(--disabled-indeterminate-color)}.igx-checkbox--disabled.igx-checkbox--indeterminate .igx-checkbox__composite:before{background:var(--disabled-indeterminate-color)}.igx-checkbox--disabled.igx-checkbox--indeterminate .igx-checkbox__composite-mark{stroke:#0000}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-checkbox{--size: 1rem;--mark-offset: 1px}.igx-checkbox:hover .igx-checkbox__composite{border-color:var(--empty-color-hover)}.igx-checkbox__composite-mark{stroke:unset;stroke-linecap:unset;stroke-width:unset;stroke-dasharray:unset;stroke-dashoffset:unset;fill:var(--tick-color);transition:none}.igx-checkbox__composite-mark rect{fill:none}.igx-checkbox__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;transition:color .2s cubic-bezier(.25,.46,.45,.94);transition-delay:var(--_transition-delay)}.igx-checkbox--checked:hover .igx-checkbox__composite{border-color:#0000}.igx-checkbox--focused .igx-checkbox__composite{border-radius:var(--border-radius);box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-checkbox--invalid .igx-checkbox__label,.igx-checkbox--invalid .igx-checkbox__label--before{color:var(--label-color)}.igx-checkbox--invalid:hover .igx-checkbox__composite{border-color:var(--error-color-hover)}.igx-checkbox--invalid:hover .igx-checkbox__label,.igx-checkbox--invalid:hover .igx-checkbox__label--before{color:var(--label-color-hover)}.igx-checkbox--indeterminate:hover .igx-checkbox__composite{border-color:#0000}.igx-checkbox--indeterminate .igx-checkbox__composite-mark{fill:none;stroke-dashoffset:unset;rotate:none;transform:none}.igx-checkbox--indeterminate .igx-checkbox__composite-mark rect{fill:var(--tick-color);opacity:1}.igx-checkbox--disabled .igx-checkbox__label,.igx-checkbox--disabled .igx-checkbox__label--before{color:var(--disabled-color-label)}.igx-checkbox--focused.igx-checkbox--checked .igx-checkbox__composite{border-radius:var(--border-radius);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}.igx-checkbox--focused.igx-checkbox--invalid .igx-checkbox__composite{box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}.igx-checkbox--indeterminate.igx-checkbox--invalid .igx-checkbox__composite{background:var(--error-color)}.igx-checkbox--indeterminate.igx-checkbox--invalid:hover .igx-checkbox__composite{background:var(--error-color-hover)}.igx-checkbox--focused.igx-checkbox--invalid.igx-checkbox--indeterminate .igx-checkbox__composite{box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}.igx-checkbox--focused.igx-checkbox--indeterminate .igx-checkbox__composite{border-radius:var(--border-radius);box-shadow:0 0 0 .1875rem var(--focus-outline-color-focused)}.igx-checkbox--disabled.igx-checkbox--checked .igx-checkbox__composite-mark{fill:var(--disabled-tick-color)}.igx-checkbox--disabled.igx-checkbox--indeterminate .igx-checkbox__composite-mark{stroke:unset;fill:none}.igx-checkbox--disabled.igx-checkbox--indeterminate .igx-checkbox__composite-mark rect{fill:var(--disabled-tick-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-checkbox--invalid:hover .igx-checkbox__composite-mark{stroke:var(--ig-error-500)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-checkbox--invalid .igx-checkbox__composite-mark{stroke:#000}.igx-checkbox--disabled .igx-checkbox__composite{background:var(--ig-surface-500)}.igx-checkbox--disabled .igx-checkbox__composite-mark{stroke:var(--disabled-tick-color)}}}\n"], dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
190
190
|
}
|
|
191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCheckboxComponent, decorators: [{
|
|
192
192
|
type: Component,
|
|
193
193
|
args: [{ selector: 'igx-checkbox', providers: [
|
|
194
194
|
{
|
|
@@ -255,11 +255,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
255
255
|
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
|
|
256
256
|
*/
|
|
257
257
|
class IgxCheckboxModule {
|
|
258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
259
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.
|
|
260
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.
|
|
258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
259
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxCheckboxModule, imports: [IgxCheckboxComponent], exports: [IgxCheckboxComponent] }); }
|
|
260
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCheckboxModule }); }
|
|
261
261
|
}
|
|
262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCheckboxModule, decorators: [{
|
|
263
263
|
type: NgModule,
|
|
264
264
|
args: [{
|
|
265
265
|
imports: [IgxCheckboxComponent],
|
|
@@ -674,12 +674,12 @@ class IgxChipComponent {
|
|
|
674
674
|
this.destroy$.next();
|
|
675
675
|
this.destroy$.complete();
|
|
676
676
|
}
|
|
677
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background);border-color:var(--focus-border-color)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background);border-color:var(--focus-selected-border-color)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background);border-color:var(--hover-border-color)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background);border-color:var(--selected-border-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800);border-color:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600);border-color:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800);border-color:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600);border-color:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600);border-color:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800);border-color:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600);border-color:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800);border-color:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background);border-color:var(--disabled-border-color)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-outline-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-600-contrast)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success .igx-chip__item{color:var(--ig-success-600-contrast)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-600-contrast)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400);border-color:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400);border-color:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700);border-color:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400);border-color:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4);border-color:#0000}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);border-color:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600);opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}}}\n"], dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
677
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n data-no-typography\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background);border-color:var(--focus-border-color)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background);border-color:var(--focus-selected-border-color)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background);border-color:var(--hover-border-color)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background);border-color:var(--selected-border-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800);border-color:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600);border-color:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800);border-color:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600);border-color:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600);border-color:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800);border-color:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600);border-color:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800);border-color:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background);border-color:var(--disabled-border-color)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-outline-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-600-contrast)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success .igx-chip__item{color:var(--ig-success-600-contrast)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-600-contrast)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400);border-color:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400);border-color:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700);border-color:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400);border-color:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4);border-color:#0000}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);border-color:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600);opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}}}\n"], dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
679
679
|
}
|
|
680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipComponent, decorators: [{
|
|
681
681
|
type: Component,
|
|
682
|
-
args: [{ selector: 'igx-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background);border-color:var(--focus-border-color)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background);border-color:var(--focus-selected-border-color)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background);border-color:var(--hover-border-color)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background);border-color:var(--selected-border-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800);border-color:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600);border-color:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800);border-color:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600);border-color:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600);border-color:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800);border-color:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600);border-color:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800);border-color:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background);border-color:var(--disabled-border-color)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-outline-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-600-contrast)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success .igx-chip__item{color:var(--ig-success-600-contrast)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-600-contrast)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400);border-color:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400);border-color:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700);border-color:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400);border-color:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4);border-color:#0000}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);border-color:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600);opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}}}\n"] }]
|
|
682
|
+
args: [{ selector: 'igx-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n data-no-typography\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background);border-color:var(--focus-border-color)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background);border-color:var(--focus-selected-border-color)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background);border-color:var(--hover-border-color)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background);border-color:var(--selected-border-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800);border-color:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600);border-color:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800);border-color:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600);border-color:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600);border-color:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800);border-color:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600);border-color:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800);border-color:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background);border-color:var(--disabled-border-color)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-outline-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-600-contrast)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success .igx-chip__item{color:var(--ig-success-600-contrast)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-600-contrast)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400);border-color:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400);border-color:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700);border-color:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400);border-color:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4);border-color:#0000}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);border-color:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600);opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}}}\n"] }]
|
|
683
683
|
}], ctorParameters: () => [], propDecorators: { variant: [{
|
|
684
684
|
type: Input
|
|
685
685
|
}], id: [{
|
|
@@ -1075,10 +1075,10 @@ class IgxChipsAreaComponent {
|
|
|
1075
1075
|
owner: this
|
|
1076
1076
|
});
|
|
1077
1077
|
}
|
|
1078
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.
|
|
1078
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-chip-area{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:100%}.igx-chip-area:empty{display:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip-area{padding:.25rem;gap:.5rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1080
1080
|
}
|
|
1081
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1081
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
|
|
1082
1082
|
type: Component,
|
|
1083
1083
|
args: [{ selector: 'igx-chips-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-chip-area{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:100%}.igx-chip-area:empty{display:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip-area{padding:.25rem;gap:.5rem}}}\n"] }]
|
|
1084
1084
|
}], ctorParameters: () => [], propDecorators: { role: [{
|
|
@@ -1126,11 +1126,11 @@ const IGX_CHIPS_DIRECTIVES = [
|
|
|
1126
1126
|
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
|
|
1127
1127
|
*/
|
|
1128
1128
|
class IgxChipsModule {
|
|
1129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1130
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.
|
|
1131
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.
|
|
1129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1130
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
|
|
1131
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
|
|
1132
1132
|
}
|
|
1133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipsModule, decorators: [{
|
|
1134
1134
|
type: NgModule,
|
|
1135
1135
|
args: [{
|
|
1136
1136
|
exports: [
|