igniteui-webcomponents 4.3.0-alpha.0 → 4.3.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/animations/player.js +10 -6
- package/animations/player.js.map +1 -1
- package/animations/presets/fade/index.d.ts +3 -0
- package/animations/presets/fade/index.js +12 -0
- package/animations/presets/fade/index.js.map +1 -0
- package/animations/presets/index.d.ts +1 -0
- package/animations/presets/index.js +1 -0
- package/animations/presets/index.js.map +1 -1
- package/components/avatar/themes/dark/avatar.base.bootstrap.css.js +5 -3
- package/components/avatar/themes/dark/avatar.base.bootstrap.css.js.map +1 -1
- package/components/avatar/themes/light/avatar.base.css.js +5 -3
- package/components/avatar/themes/light/avatar.base.css.js.map +1 -1
- package/components/avatar/themes/light/avatar.bootstrap.css.js +5 -3
- package/components/avatar/themes/light/avatar.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/dark/button.bootstrap.css.js +5 -3
- package/components/button/themes/button/dark/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/dark/button.fluent.css.js +5 -3
- package/components/button/themes/button/dark/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/dark/button.indigo.css.js +5 -3
- package/components/button/themes/button/dark/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/dark/button.material.css.js +5 -3
- package/components/button/themes/button/dark/button.material.css.js.map +1 -1
- package/components/button/themes/button/light/button.bootstrap.css.js +5 -3
- package/components/button/themes/button/light/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/light/button.fluent.css.js +5 -3
- package/components/button/themes/button/light/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/light/button.indigo.css.js +5 -3
- package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/light/button.material.css.js +5 -3
- package/components/button/themes/button/light/button.material.css.js.map +1 -1
- package/components/checkbox/themes/dark/checkbox.bootstrap.css.js +5 -3
- package/components/checkbox/themes/dark/checkbox.bootstrap.css.js.map +1 -1
- package/components/checkbox/themes/dark/checkbox.fluent.css.js +5 -3
- package/components/checkbox/themes/dark/checkbox.fluent.css.js.map +1 -1
- package/components/checkbox/themes/dark/checkbox.indigo.css.js +5 -3
- package/components/checkbox/themes/dark/checkbox.indigo.css.js.map +1 -1
- package/components/checkbox/themes/dark/checkbox.material.css.js +5 -3
- package/components/checkbox/themes/dark/checkbox.material.css.js.map +1 -1
- package/components/checkbox/themes/dark/switch.bootstrap.css.js +5 -3
- package/components/checkbox/themes/dark/switch.bootstrap.css.js.map +1 -1
- package/components/checkbox/themes/dark/switch.fluent.css.js +5 -3
- package/components/checkbox/themes/dark/switch.fluent.css.js.map +1 -1
- package/components/checkbox/themes/dark/switch.indigo.css.js +5 -3
- package/components/checkbox/themes/dark/switch.indigo.css.js.map +1 -1
- package/components/checkbox/themes/dark/switch.material.css.js +5 -3
- package/components/checkbox/themes/dark/switch.material.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.base.css.js +5 -3
- package/components/checkbox/themes/light/checkbox.base.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.bootstrap.css.js +5 -3
- package/components/checkbox/themes/light/checkbox.bootstrap.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.fluent.css.js +5 -3
- package/components/checkbox/themes/light/checkbox.fluent.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.indigo.css.js +5 -3
- package/components/checkbox/themes/light/checkbox.indigo.css.js.map +1 -1
- package/components/checkbox/themes/light/checkbox.material.css.js +5 -3
- package/components/checkbox/themes/light/checkbox.material.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.base.css.js +5 -3
- package/components/checkbox/themes/light/switch.base.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.bootstrap.css.js +5 -3
- package/components/checkbox/themes/light/switch.bootstrap.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.fluent.css.js +5 -3
- package/components/checkbox/themes/light/switch.fluent.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.indigo.css.js +5 -3
- package/components/checkbox/themes/light/switch.indigo.css.js.map +1 -1
- package/components/checkbox/themes/light/switch.material.css.js +5 -3
- package/components/checkbox/themes/light/switch.material.css.js.map +1 -1
- package/components/combo/combo.d.ts +2 -2
- package/components/combo/combo.js +1 -0
- package/components/combo/combo.js.map +1 -1
- package/components/combo/controllers/selection.js +4 -5
- package/components/combo/controllers/selection.js.map +1 -1
- package/components/combo/types.d.ts +3 -1
- package/components/combo/types.js.map +1 -1
- package/components/dialog/dialog.d.ts +8 -1
- package/components/dialog/dialog.js +34 -7
- package/components/dialog/dialog.js.map +1 -1
- package/components/dialog/themes/light/dialog.base.css.js +18 -1
- package/components/dialog/themes/light/dialog.base.css.js.map +1 -1
- package/components/icon/dark/icon.bootstrap.css.js +5 -3
- package/components/icon/dark/icon.bootstrap.css.js.map +1 -1
- package/components/icon/dark/icon.fluent.css.js +5 -3
- package/components/icon/dark/icon.fluent.css.js.map +1 -1
- package/components/icon/dark/icon.indigo.css.js +5 -3
- package/components/icon/dark/icon.indigo.css.js.map +1 -1
- package/components/icon/dark/icon.material.css.js +5 -3
- package/components/icon/dark/icon.material.css.js.map +1 -1
- package/components/icon/light/icon.bootstrap.css.js +7 -5
- package/components/icon/light/icon.bootstrap.css.js.map +1 -1
- package/components/icon/light/icon.fluent.css.js +7 -5
- package/components/icon/light/icon.fluent.css.js.map +1 -1
- package/components/icon/light/icon.indigo.css.js +6 -4
- package/components/icon/light/icon.indigo.css.js.map +1 -1
- package/components/icon/light/icon.material.css.js +7 -5
- package/components/icon/light/icon.material.css.js.map +1 -1
- package/components/navbar/themes/dark/navbar.bootstrap.css.js +5 -3
- package/components/navbar/themes/dark/navbar.bootstrap.css.js.map +1 -1
- package/components/navbar/themes/dark/navbar.fluent.css.js +5 -3
- package/components/navbar/themes/dark/navbar.fluent.css.js.map +1 -1
- package/components/navbar/themes/dark/navbar.indigo.css.js +5 -3
- package/components/navbar/themes/dark/navbar.indigo.css.js.map +1 -1
- package/components/navbar/themes/dark/navbar.material.css.js +5 -3
- package/components/navbar/themes/dark/navbar.material.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.bootstrap.css.js +5 -3
- package/components/navbar/themes/light/navbar.bootstrap.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.fluent.css.js +5 -3
- package/components/navbar/themes/light/navbar.fluent.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.indigo.css.js +5 -3
- package/components/navbar/themes/light/navbar.indigo.css.js.map +1 -1
- package/components/navbar/themes/light/navbar.material.css.js +5 -3
- package/components/navbar/themes/light/navbar.material.css.js.map +1 -1
- package/components/radio/themes/dark/radio.bootstrap.css.js +5 -3
- package/components/radio/themes/dark/radio.bootstrap.css.js.map +1 -1
- package/components/radio/themes/dark/radio.fluent.css.js +5 -3
- package/components/radio/themes/dark/radio.fluent.css.js.map +1 -1
- package/components/radio/themes/dark/radio.indigo.css.js +5 -3
- package/components/radio/themes/dark/radio.indigo.css.js.map +1 -1
- package/components/radio/themes/dark/radio.material.css.js +5 -3
- package/components/radio/themes/dark/radio.material.css.js.map +1 -1
- package/components/radio/themes/light/radio.base.css.js +5 -3
- package/components/radio/themes/light/radio.base.css.js.map +1 -1
- package/components/radio/themes/light/radio.bootstrap.css.js +5 -3
- package/components/radio/themes/light/radio.bootstrap.css.js.map +1 -1
- package/components/radio/themes/light/radio.fluent.css.js +5 -3
- package/components/radio/themes/light/radio.fluent.css.js.map +1 -1
- package/components/radio/themes/light/radio.indigo.css.js +5 -3
- package/components/radio/themes/light/radio.indigo.css.js.map +1 -1
- package/components/radio/themes/light/radio.material.css.js +5 -3
- package/components/radio/themes/light/radio.material.css.js.map +1 -1
- package/components/select/select.d.ts +6 -0
- package/components/select/select.js +2 -0
- package/components/select/select.js.map +1 -1
- package/components/snackbar/snackbar.d.ts +5 -1
- package/components/snackbar/snackbar.js +19 -2
- package/components/snackbar/snackbar.js.map +1 -1
- package/components/toast/toast.d.ts +4 -1
- package/components/toast/toast.js +17 -2
- package/components/toast/toast.js.map +1 -1
- package/components/toggle/toggle.directive.d.ts +9 -3
- package/components/toggle/toggle.directive.js +54 -38
- package/components/toggle/toggle.directive.js.map +1 -1
- package/custom-elements.json +8 -4
- package/package.json +6 -4
- package/themes/dark/bootstrap.css +7 -5
- package/themes/dark/fluent.css +6 -4
- package/themes/dark/indigo.css +6 -4
- package/themes/dark/material.css +7 -5
- package/vscode-html-custom-data.json +4 -4
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactiveControllerHost, TemplateResult } from 'lit';
|
|
2
2
|
import IgcComboComponent from './combo.js';
|
|
3
|
+
import type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';
|
|
3
4
|
export type Keys<T> = keyof T;
|
|
4
5
|
export type Values<T> = T[keyof T];
|
|
5
6
|
export type Item<T extends object> = T | Values<T>;
|
|
@@ -11,6 +12,7 @@ export type ComboRecord<T extends object> = {
|
|
|
11
12
|
export type ComboHost<T extends object> = ReactiveControllerHost & IgcComboComponent<T>;
|
|
12
13
|
export type GroupingDirection = 'asc' | 'desc';
|
|
13
14
|
export type ComboChangeType = 'selection' | 'deselection' | 'addition';
|
|
15
|
+
export type ComboRenderFunction<T extends object> = RenderItemFunction<ComboRecord<T>>;
|
|
14
16
|
export interface FilteringOptions<T extends object> {
|
|
15
17
|
filterKey: Keys<T> | undefined;
|
|
16
18
|
caseSensitive?: boolean;
|
|
@@ -23,7 +25,7 @@ export interface GroupingOptions<T extends object> {
|
|
|
23
25
|
direction: GroupingDirection;
|
|
24
26
|
}
|
|
25
27
|
export interface IgcComboChangeEventArgs {
|
|
26
|
-
newValue: string;
|
|
28
|
+
newValue: string[];
|
|
27
29
|
items: object;
|
|
28
30
|
type: ComboChangeType;
|
|
29
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/combo/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactiveControllerHost, TemplateResult } from 'lit';\nimport IgcComboComponent from './combo.js';\n\nexport type Keys<T> = keyof T;\nexport type Values<T> = T[keyof T];\nexport type Item<T extends object> = T | Values<T>;\n\nexport type ComboRecord<T extends object> = {\n value: T;\n header: boolean;\n dataIndex: number;\n};\n\nexport type ComboHost<T extends object> = ReactiveControllerHost &\n IgcComboComponent<T>;\n\nexport type GroupingDirection = 'asc' | 'desc';\nexport type ComboChangeType = 'selection' | 'deselection' | 'addition';\n\nexport interface FilteringOptions<T extends object> {\n filterKey: Keys<T> | undefined;\n caseSensitive?: boolean;\n matchDiacritics?: boolean;\n}\n\nexport interface GroupingOptions<T extends object> {\n groupKey?: Keys<T>;\n valueKey?: Keys<T>;\n displayKey?: Keys<T>;\n direction: GroupingDirection;\n}\n\n/* marshalByValue */\nexport interface IgcComboChangeEventArgs {\n newValue: string;\n /* primitiveValue */\n items: object;\n /* blazorAlternateName: changeType */\n type: ComboChangeType;\n}\n\nexport interface IgcComboEventMap {\n igcChange: CustomEvent<IgcComboChangeEventArgs>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport type ComboItemTemplate<T extends object> = (\n props: ComboTemplateProps<T>\n) => TemplateResult;\nexport interface ComboTemplateProps<T extends object> {\n item: T;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/combo/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactiveControllerHost, TemplateResult } from 'lit';\nimport IgcComboComponent from './combo.js';\nimport type { RenderItemFunction } from '@lit-labs/virtualizer/virtualize.js';\n\nexport type Keys<T> = keyof T;\nexport type Values<T> = T[keyof T];\nexport type Item<T extends object> = T | Values<T>;\n\nexport type ComboRecord<T extends object> = {\n value: T;\n header: boolean;\n dataIndex: number;\n};\n\nexport type ComboHost<T extends object> = ReactiveControllerHost &\n IgcComboComponent<T>;\n\nexport type GroupingDirection = 'asc' | 'desc';\nexport type ComboChangeType = 'selection' | 'deselection' | 'addition';\nexport type ComboRenderFunction<T extends object> = RenderItemFunction<\n ComboRecord<T>\n>;\n\nexport interface FilteringOptions<T extends object> {\n filterKey: Keys<T> | undefined;\n caseSensitive?: boolean;\n matchDiacritics?: boolean;\n}\n\nexport interface GroupingOptions<T extends object> {\n groupKey?: Keys<T>;\n valueKey?: Keys<T>;\n displayKey?: Keys<T>;\n direction: GroupingDirection;\n}\n\n/* marshalByValue */\nexport interface IgcComboChangeEventArgs {\n newValue: string[];\n /* primitiveValue */\n items: object;\n /* blazorAlternateName: changeType */\n type: ComboChangeType;\n}\n\nexport interface IgcComboEventMap {\n igcChange: CustomEvent<IgcComboChangeEventArgs>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n igcOpening: CustomEvent<void>;\n igcOpened: CustomEvent<void>;\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\nexport type ComboItemTemplate<T extends object> = (\n props: ComboTemplateProps<T>\n) => TemplateResult;\nexport interface ComboTemplateProps<T extends object> {\n item: T;\n}\n"]}
|
|
@@ -27,6 +27,7 @@ export default class IgcDialogComponent extends IgcDialogComponent_base {
|
|
|
27
27
|
static styles: import("lit").CSSResult[];
|
|
28
28
|
private static readonly increment;
|
|
29
29
|
private titleId;
|
|
30
|
+
private animationPlayer;
|
|
30
31
|
private dialog;
|
|
31
32
|
/**
|
|
32
33
|
* Whether the dialog should be closed when pressing the 'ESCAPE' button.
|
|
@@ -58,6 +59,11 @@ export default class IgcDialogComponent extends IgcDialogComponent_base {
|
|
|
58
59
|
* @attr
|
|
59
60
|
*/
|
|
60
61
|
open: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Backdrop animation helper.
|
|
64
|
+
* @hidden @internal
|
|
65
|
+
*/
|
|
66
|
+
private animating;
|
|
61
67
|
/**
|
|
62
68
|
* Sets the title of the dialog.
|
|
63
69
|
* @attr
|
|
@@ -67,10 +73,11 @@ export default class IgcDialogComponent extends IgcDialogComponent_base {
|
|
|
67
73
|
returnValue: string;
|
|
68
74
|
protected handleOpenState(): void;
|
|
69
75
|
protected firstUpdated(): Promise<void>;
|
|
76
|
+
private toggleAnimation;
|
|
70
77
|
/** Opens the dialog. */
|
|
71
78
|
show(): void;
|
|
72
79
|
/** Closes the dialog. */
|
|
73
|
-
hide(): void
|
|
80
|
+
hide(): Promise<void>;
|
|
74
81
|
/** Toggles the open state of the dialog. */
|
|
75
82
|
toggle(): void;
|
|
76
83
|
protected hideWithEvent(): Promise<void>;
|
|
@@ -6,12 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
var IgcDialogComponent_1;
|
|
8
8
|
import { html, LitElement, nothing } from 'lit';
|
|
9
|
-
import { property, query } from 'lit/decorators.js';
|
|
9
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
10
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
11
|
import { watch } from '../common/decorators/watch.js';
|
|
12
12
|
import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
|
|
13
13
|
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
|
|
14
|
-
import { createCounter } from '../common/util.js';
|
|
14
|
+
import { createCounter, partNameMap } from '../common/util.js';
|
|
15
15
|
import { styles } from './themes/light/dialog.base.css.js';
|
|
16
16
|
import { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';
|
|
17
17
|
import { styles as fluent } from './themes/light/dialog.fluent.css.js';
|
|
@@ -20,6 +20,7 @@ import { styles as material } from './themes/light/dialog.material.css.js';
|
|
|
20
20
|
import { themes } from '../../theming/theming-decorator.js';
|
|
21
21
|
import { defineComponents } from '../common/definitions/defineComponents.js';
|
|
22
22
|
import IgcButtonComponent from '../button/button.js';
|
|
23
|
+
import { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';
|
|
23
24
|
defineComponents(IgcButtonComponent);
|
|
24
25
|
let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends EventEmitterMixin(LitElement) {
|
|
25
26
|
constructor() {
|
|
@@ -29,6 +30,7 @@ let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends
|
|
|
29
30
|
this.closeOnOutsideClick = false;
|
|
30
31
|
this.hideDefaultAction = false;
|
|
31
32
|
this.open = false;
|
|
33
|
+
this.animating = false;
|
|
32
34
|
this.formSubmitHandler = (e) => {
|
|
33
35
|
var _a;
|
|
34
36
|
if (e instanceof SubmitEvent && e.submitter) {
|
|
@@ -49,22 +51,36 @@ let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends
|
|
|
49
51
|
this.open ? this.dialog.showModal() : this.dialog.close();
|
|
50
52
|
}
|
|
51
53
|
async firstUpdated() {
|
|
54
|
+
this.animationPlayer = new AnimationPlayer(this.dialog);
|
|
52
55
|
await this.updateComplete;
|
|
53
56
|
if (this.open) {
|
|
54
57
|
this.dialog.showModal();
|
|
55
58
|
}
|
|
56
59
|
}
|
|
60
|
+
async toggleAnimation(dir) {
|
|
61
|
+
const animation = dir === 'open' ? fadeIn : fadeOut;
|
|
62
|
+
const [_, event] = await Promise.all([
|
|
63
|
+
this.animationPlayer.stopAll(),
|
|
64
|
+
this.animationPlayer.play(animation),
|
|
65
|
+
]);
|
|
66
|
+
return event.type === 'finish';
|
|
67
|
+
}
|
|
57
68
|
show() {
|
|
58
69
|
if (this.open) {
|
|
59
70
|
return;
|
|
60
71
|
}
|
|
72
|
+
this.toggleAnimation('open');
|
|
61
73
|
this.open = true;
|
|
62
74
|
}
|
|
63
|
-
hide() {
|
|
75
|
+
async hide() {
|
|
64
76
|
if (!this.open) {
|
|
65
77
|
return;
|
|
66
78
|
}
|
|
67
|
-
this.
|
|
79
|
+
this.animating = true;
|
|
80
|
+
if (await this.toggleAnimation('close')) {
|
|
81
|
+
this.animating = false;
|
|
82
|
+
this.open = false;
|
|
83
|
+
}
|
|
68
84
|
}
|
|
69
85
|
toggle() {
|
|
70
86
|
this.open ? this.hide() : this.show();
|
|
@@ -76,9 +92,13 @@ let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends
|
|
|
76
92
|
if (!this.handleClosing()) {
|
|
77
93
|
return;
|
|
78
94
|
}
|
|
79
|
-
this.
|
|
95
|
+
this.animating = true;
|
|
96
|
+
if (await this.toggleAnimation('close')) {
|
|
97
|
+
this.open = false;
|
|
98
|
+
this.animating = false;
|
|
99
|
+
this.emitEvent('igcClosed');
|
|
100
|
+
}
|
|
80
101
|
await this.updateComplete;
|
|
81
|
-
this.emitEvent('igcClosed');
|
|
82
102
|
}
|
|
83
103
|
handleCancel(event) {
|
|
84
104
|
event.preventDefault();
|
|
@@ -110,8 +130,12 @@ let IgcDialogComponent = IgcDialogComponent_1 = class IgcDialogComponent extends
|
|
|
110
130
|
render() {
|
|
111
131
|
const label = this.ariaLabel ? this.ariaLabel : undefined;
|
|
112
132
|
const labelledby = label ? undefined : this.titleId;
|
|
133
|
+
const backdropParts = partNameMap({
|
|
134
|
+
backdrop: true,
|
|
135
|
+
animating: this.animating,
|
|
136
|
+
});
|
|
113
137
|
return html `
|
|
114
|
-
<div part
|
|
138
|
+
<div part=${backdropParts} aria-hidden=${!this.open}></div>
|
|
115
139
|
<dialog
|
|
116
140
|
part="base"
|
|
117
141
|
role="dialog"
|
|
@@ -160,6 +184,9 @@ __decorate([
|
|
|
160
184
|
__decorate([
|
|
161
185
|
property({ type: Boolean, reflect: true })
|
|
162
186
|
], IgcDialogComponent.prototype, "open", void 0);
|
|
187
|
+
__decorate([
|
|
188
|
+
state()
|
|
189
|
+
], IgcDialogComponent.prototype, "animating", void 0);
|
|
163
190
|
__decorate([
|
|
164
191
|
property()
|
|
165
192
|
], IgcDialogComponent.prototype, "title", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { createCounter } from '../common/util.js';\nimport { styles } from './themes/light/dialog.base.css.js';\nimport { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dialog.fluent.css.js';\nimport { styles as indigo } from './themes/light/dialog.indigo.css.js';\nimport { styles as material } from './themes/light/dialog.material.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcDialogEventMap {\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\n/**\n * Represents a Dialog component.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitter just before the dialog is closed.\n * @fires igcClosed - Emitted after closing the dialog.\n *\n * @slot - Renders content inside the default slot.\n * @slot title - Renders the title of the dialog header.\n * @slot footer - Renders the dialog footer.\n *\n * @csspart base - The base wrapper of the dialog.\n * @csspart title - The title container.\n * @csspart footer - The footer container.\n * @csspart overlay - The overlay.\n */\n@themes({ bootstrap, material, fluent, indigo })\n@blazorAdditionalDependencies('IgcButtonComponent')\nexport default class IgcDialogComponent extends EventEmitterMixin<\n IgcDialogEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-dialog';\n public static styles = [styles];\n\n private static readonly increment = createCounter();\n private titleId = `title-${IgcDialogComponent.increment()}`;\n\n @query('dialog', true)\n private dialog!: HTMLDialogElement;\n\n /* blazorSuppress */\n /**\n * Whether the dialog should be closed when pressing the 'ESCAPE' button.\n * @deprecated since version 4.2.3. Use `keepOpenOnEscape` instead.\n * @attr close-on-escape\n */\n @property({ type: Boolean, attribute: 'close-on-escape' })\n public set closeOnEscape(value: boolean) {\n this.keepOpenOnEscape = !value;\n }\n public get closeOnEscape(): boolean {\n return !this.keepOpenOnEscape;\n }\n\n /**\n * Whether the dialog should be kept open when pressing the 'ESCAPE' button.\n * @attr keep-open-on-escape\n */\n @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n public keepOpenOnEscape = false;\n\n /**\n * Whether the dialog should be closed when clicking outside of it.\n * @attr close-on-outside-click\n */\n @property({ type: Boolean, attribute: 'close-on-outside-click' })\n public closeOnOutsideClick = false;\n\n /**\n * Whether to hide the default action button for the dialog.\n *\n * When there is projected content in the `footer` slot this property\n * has no effect.\n * @attr hide-default-action\n */\n @property({ type: Boolean, attribute: 'hide-default-action' })\n public hideDefaultAction = false;\n\n /**\n * Whether the dialog is opened.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * Sets the title of the dialog.\n * @attr\n */\n @property()\n public override title!: string;\n\n /** Sets the return value for the dialog. */\n @property({ attribute: false })\n public returnValue!: string;\n\n @watch('open', { waitUntilFirstUpdate: true })\n protected handleOpenState() {\n this.open ? this.dialog.showModal() : this.dialog.close();\n }\n\n protected override async firstUpdated() {\n await this.updateComplete;\n if (this.open) {\n this.dialog.showModal();\n }\n }\n\n /** Opens the dialog. */\n public show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n }\n\n /** Closes the dialog. */\n public hide() {\n if (!this.open) {\n return;\n }\n\n this.open = false;\n }\n\n /** Toggles the open state of the dialog. */\n public toggle() {\n this.open ? this.hide() : this.show();\n }\n\n protected async hideWithEvent() {\n if (!this.open) {\n return;\n }\n\n if (!this.handleClosing()) {\n return;\n }\n\n this.open = false;\n await this.updateComplete;\n this.emitEvent('igcClosed');\n }\n\n private handleCancel(event: Event) {\n event.preventDefault();\n\n if (!this.keepOpenOnEscape) {\n this.hideWithEvent();\n }\n }\n\n private handleClick({ clientX, clientY, target }: MouseEvent) {\n if (this.closeOnOutsideClick && this.dialog.isSameNode(target as Node)) {\n const { left, top, right, bottom } = this.dialog.getBoundingClientRect();\n const between = (x: number, low: number, high: number) =>\n x >= low && x <= high;\n if (!(between(clientX, left, right) && between(clientY, top, bottom))) {\n this.hideWithEvent();\n }\n }\n }\n\n private handleClosing(): boolean {\n return this.emitEvent('igcClosing', { cancelable: true });\n }\n\n protected formSubmitHandler = (e: Event) => {\n if (e instanceof SubmitEvent && e.submitter) {\n this.returnValue = (e.submitter as any)?.value || '';\n }\n if (!e.defaultPrevented) {\n this.hideWithEvent();\n }\n };\n\n private handleSlotChange() {\n // Setup submit handling for supported forms\n Array.from(this.querySelectorAll('igc-form, form'))\n .filter((each) => each.getAttribute('method') === 'dialog')\n .forEach((form) => {\n const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';\n form.removeEventListener(event, this.formSubmitHandler);\n form.addEventListener(event, this.formSubmitHandler);\n });\n }\n\n protected override render() {\n const label = this.ariaLabel ? this.ariaLabel : undefined;\n const labelledby = label ? undefined : this.titleId;\n\n return html`\n <div part=\"backdrop\" aria-hidden=\"true\" ?hidden=${!this.open}></div>\n <dialog\n part=\"base\"\n role=\"dialog\"\n @click=${this.handleClick}\n @cancel=${this.handleCancel}\n aria-label=${ifDefined(label)}\n aria-labelledby=${ifDefined(labelledby)}\n >\n <header part=\"title\" id=${this.titleId}>\n <slot name=\"title\"><span>${this.title}</span></slot>\n </header>\n <section part=\"content\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </section>\n <footer part=\"footer\">\n <slot name=\"footer\">\n ${this.hideDefaultAction\n ? nothing\n : html`<igc-button variant=\"flat\" @click=${this.hideWithEvent}\n >OK</igc-button\n >`}\n </slot>\n </footer>\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-dialog': IgcDialogComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { createCounter, partNameMap } from '../common/util.js';\nimport { styles } from './themes/light/dialog.base.css.js';\nimport { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dialog.fluent.css.js';\nimport { styles as indigo } from './themes/light/dialog.indigo.css.js';\nimport { styles as material } from './themes/light/dialog.material.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcDialogEventMap {\n igcClosing: CustomEvent<void>;\n igcClosed: CustomEvent<void>;\n}\n\n/**\n * Represents a Dialog component.\n *\n * @element igc-dialog\n *\n * @fires igcClosing - Emitter just before the dialog is closed.\n * @fires igcClosed - Emitted after closing the dialog.\n *\n * @slot - Renders content inside the default slot.\n * @slot title - Renders the title of the dialog header.\n * @slot footer - Renders the dialog footer.\n *\n * @csspart base - The base wrapper of the dialog.\n * @csspart title - The title container.\n * @csspart footer - The footer container.\n * @csspart overlay - The overlay.\n */\n@themes({ bootstrap, material, fluent, indigo })\n@blazorAdditionalDependencies('IgcButtonComponent')\nexport default class IgcDialogComponent extends EventEmitterMixin<\n IgcDialogEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-dialog';\n public static styles = [styles];\n\n private static readonly increment = createCounter();\n private titleId = `title-${IgcDialogComponent.increment()}`;\n private animationPlayer!: AnimationPlayer;\n\n @query('dialog', true)\n private dialog!: HTMLDialogElement;\n\n /* blazorSuppress */\n /**\n * Whether the dialog should be closed when pressing the 'ESCAPE' button.\n * @deprecated since version 4.2.3. Use `keepOpenOnEscape` instead.\n * @attr close-on-escape\n */\n @property({ type: Boolean, attribute: 'close-on-escape' })\n public set closeOnEscape(value: boolean) {\n this.keepOpenOnEscape = !value;\n }\n public get closeOnEscape(): boolean {\n return !this.keepOpenOnEscape;\n }\n\n /**\n * Whether the dialog should be kept open when pressing the 'ESCAPE' button.\n * @attr keep-open-on-escape\n */\n @property({ type: Boolean, attribute: 'keep-open-on-escape' })\n public keepOpenOnEscape = false;\n\n /**\n * Whether the dialog should be closed when clicking outside of it.\n * @attr close-on-outside-click\n */\n @property({ type: Boolean, attribute: 'close-on-outside-click' })\n public closeOnOutsideClick = false;\n\n /**\n * Whether to hide the default action button for the dialog.\n *\n * When there is projected content in the `footer` slot this property\n * has no effect.\n * @attr hide-default-action\n */\n @property({ type: Boolean, attribute: 'hide-default-action' })\n public hideDefaultAction = false;\n\n /**\n * Whether the dialog is opened.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * Backdrop animation helper.\n * @hidden @internal\n */\n @state()\n private animating = false;\n\n /**\n * Sets the title of the dialog.\n * @attr\n */\n @property()\n public override title!: string;\n\n /** Sets the return value for the dialog. */\n @property({ attribute: false })\n public returnValue!: string;\n\n @watch('open', { waitUntilFirstUpdate: true })\n protected handleOpenState() {\n this.open ? this.dialog.showModal() : this.dialog.close();\n }\n\n protected override async firstUpdated() {\n this.animationPlayer = new AnimationPlayer(this.dialog);\n await this.updateComplete;\n if (this.open) {\n this.dialog.showModal();\n }\n }\n\n private async toggleAnimation(dir: 'open' | 'close') {\n const animation = dir === 'open' ? fadeIn : fadeOut;\n\n const [_, event] = await Promise.all([\n this.animationPlayer.stopAll(),\n this.animationPlayer.play(animation),\n ]);\n\n return event.type === 'finish';\n }\n\n /** Opens the dialog. */\n public show() {\n if (this.open) {\n return;\n }\n\n this.toggleAnimation('open');\n this.open = true;\n }\n\n /** Closes the dialog. */\n public async hide() {\n if (!this.open) {\n return;\n }\n\n this.animating = true;\n\n if (await this.toggleAnimation('close')) {\n this.animating = false;\n this.open = false;\n }\n }\n\n /** Toggles the open state of the dialog. */\n public toggle() {\n this.open ? this.hide() : this.show();\n }\n\n protected async hideWithEvent() {\n if (!this.open) {\n return;\n }\n\n if (!this.handleClosing()) {\n return;\n }\n\n this.animating = true;\n\n if (await this.toggleAnimation('close')) {\n this.open = false;\n this.animating = false;\n this.emitEvent('igcClosed');\n }\n\n await this.updateComplete;\n }\n\n private handleCancel(event: Event) {\n event.preventDefault();\n\n if (!this.keepOpenOnEscape) {\n this.hideWithEvent();\n }\n }\n\n private handleClick({ clientX, clientY, target }: MouseEvent) {\n if (this.closeOnOutsideClick && this.dialog.isSameNode(target as Node)) {\n const { left, top, right, bottom } = this.dialog.getBoundingClientRect();\n const between = (x: number, low: number, high: number) =>\n x >= low && x <= high;\n if (!(between(clientX, left, right) && between(clientY, top, bottom))) {\n this.hideWithEvent();\n }\n }\n }\n\n private handleClosing(): boolean {\n return this.emitEvent('igcClosing', { cancelable: true });\n }\n\n protected formSubmitHandler = (e: Event) => {\n if (e instanceof SubmitEvent && e.submitter) {\n this.returnValue = (e.submitter as any)?.value || '';\n }\n if (!e.defaultPrevented) {\n this.hideWithEvent();\n }\n };\n\n private handleSlotChange() {\n // Setup submit handling for supported forms\n Array.from(this.querySelectorAll('igc-form, form'))\n .filter((each) => each.getAttribute('method') === 'dialog')\n .forEach((form) => {\n const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';\n form.removeEventListener(event, this.formSubmitHandler);\n form.addEventListener(event, this.formSubmitHandler);\n });\n }\n\n protected override render() {\n const label = this.ariaLabel ? this.ariaLabel : undefined;\n const labelledby = label ? undefined : this.titleId;\n const backdropParts = partNameMap({\n backdrop: true,\n animating: this.animating,\n });\n\n return html`\n <div part=${backdropParts} aria-hidden=${!this.open}></div>\n <dialog\n part=\"base\"\n role=\"dialog\"\n @click=${this.handleClick}\n @cancel=${this.handleCancel}\n aria-label=${ifDefined(label)}\n aria-labelledby=${ifDefined(labelledby)}\n >\n <header part=\"title\" id=${this.titleId}>\n <slot name=\"title\"><span>${this.title}</span></slot>\n </header>\n <section part=\"content\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </section>\n <footer part=\"footer\">\n <slot name=\"footer\">\n ${this.hideDefaultAction\n ? nothing\n : html`<igc-button variant=\"flat\" @click=${this.hideWithEvent}\n >OK</igc-button\n >`}\n </slot>\n </footer>\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-dialog': IgcDialogComponent;\n }\n}\n"]}
|
|
@@ -109,10 +109,27 @@ slot[name=footer]::slotted(:not(:last-child)) {
|
|
|
109
109
|
margin-inline-end: 0.5rem;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
dialog::-webkit-backdrop {
|
|
113
|
+
opacity: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
dialog::backdrop {
|
|
117
|
+
opacity: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
[part~=backdrop] {
|
|
113
121
|
position: fixed;
|
|
114
122
|
inset: 0;
|
|
115
123
|
background: hsla(var(--ig-gray-500), 0.54);
|
|
116
124
|
z-index: 10005;
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
opacity: 0;
|
|
127
|
+
-webkit-transition: opacity 350ms ease-out;
|
|
128
|
+
-o-transition: opacity 350ms ease-out;
|
|
129
|
+
transition: opacity 350ms ease-out;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([open]) [part=backdrop] {
|
|
133
|
+
opacity: 1;
|
|
117
134
|
}`;
|
|
118
135
|
//# sourceMappingURL=dialog.base.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"dialog.base.css.js","sourceRoot":"","sources":["../../../../../src/components/dialog/themes/light/dialog.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 2px), 2px);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n border-style: none;\n padding: unset;\n}\n\n[part=base] {\n background: inherit;\n color: inherit;\n border-style: inherit;\n padding: inherit;\n border: inherit;\n border-radius: inherit;\n min-width: inherit;\n -webkit-box-shadow: var(--ig-elevation-24);\n box-shadow: var(--ig-elevation-24);\n}\n\n[part=content] {\n color: var(--content-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n font-family: var(--ig-body-1-font-family, var(--ig-font-family));\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n margin: 0;\n}\n\n[part=title],\n[part=footer] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n font-family: var(--ig-h6-font-family, var(--ig-font-family));\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n margin: 0;\n}\n\n[part=footer] {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n::slotted(*) {\n font: inherit;\n letter-spacing: inherit;\n line-height: inherit;\n text-transform: inherit;\n margin: 0;\n}\n\nslot[name=title]::slotted(:not(:last-child)),\nslot[name=footer]::slotted(:not(:last-child)) {\n -webkit-margin-end: 0.5rem;\n margin-inline-end: 0.5rem;\n}\n\ndialog::-webkit-backdrop {\n opacity: 0;\n}\n\ndialog::backdrop {\n opacity: 0;\n}\n\n[part~=backdrop] {\n position: fixed;\n inset: 0;\n background: hsla(var(--ig-gray-500), 0.54);\n z-index: 10005;\n pointer-events: none;\n opacity: 0;\n -webkit-transition: opacity 350ms ease-out;\n -o-transition: opacity 350ms ease-out;\n transition: opacity 350ms ease-out;\n}\n\n:host([open]) [part=backdrop] {\n opacity: 1;\n}`;\n"]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
3
3
|
/* stylelint-disable max-line-length */
|
|
4
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
4
5
|
/* stylelint-disable max-line-length */
|
|
5
6
|
/* stylelint-disable max-line-length */
|
|
6
7
|
/* stylelint-disable max-line-length */
|
|
7
|
-
/* stylelint-disable max-line-length */
|
|
8
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
8
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
9
9
|
/* stylelint-disable max-line-length */
|
|
10
10
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
11
|
+
/* stylelint-disable max-line-length */
|
|
11
12
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
12
|
-
/* stylelint-disable max-line-length */
|
|
13
|
+
/* stylelint-disable max-line-length */
|
|
14
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;
|
|
13
15
|
//# sourceMappingURL=icon.bootstrap.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wMAY+K,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;\n"]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
3
3
|
/* stylelint-disable max-line-length */
|
|
4
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
4
5
|
/* stylelint-disable max-line-length */
|
|
5
6
|
/* stylelint-disable max-line-length */
|
|
6
7
|
/* stylelint-disable max-line-length */
|
|
7
|
-
/* stylelint-disable max-line-length */
|
|
8
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
8
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
9
9
|
/* stylelint-disable max-line-length */
|
|
10
10
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
11
|
+
/* stylelint-disable max-line-length */
|
|
11
12
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
12
|
-
/* stylelint-disable max-line-length */
|
|
13
|
+
/* stylelint-disable max-line-length */
|
|
14
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;
|
|
13
15
|
//# sourceMappingURL=icon.fluent.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.fluent.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.fluent.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wMAY+K,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;\n"]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
3
3
|
/* stylelint-disable max-line-length */
|
|
4
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
4
5
|
/* stylelint-disable max-line-length */
|
|
5
6
|
/* stylelint-disable max-line-length */
|
|
6
7
|
/* stylelint-disable max-line-length */
|
|
7
|
-
/* stylelint-disable max-line-length */
|
|
8
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
8
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
9
9
|
/* stylelint-disable max-line-length */
|
|
10
10
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
11
|
+
/* stylelint-disable max-line-length */
|
|
11
12
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
12
|
-
/* stylelint-disable max-line-length */
|
|
13
|
+
/* stylelint-disable max-line-length */
|
|
14
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;
|
|
13
15
|
//# sourceMappingURL=icon.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.indigo.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.indigo.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wMAY+K,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;\n"]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
3
3
|
/* stylelint-disable max-line-length */
|
|
4
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
4
5
|
/* stylelint-disable max-line-length */
|
|
5
6
|
/* stylelint-disable max-line-length */
|
|
6
7
|
/* stylelint-disable max-line-length */
|
|
7
|
-
/* stylelint-disable max-line-length */
|
|
8
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
8
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
9
9
|
/* stylelint-disable max-line-length */
|
|
10
10
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
11
|
+
/* stylelint-disable max-line-length */
|
|
11
12
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
12
|
-
/* stylelint-disable max-line-length */
|
|
13
|
+
/* stylelint-disable max-line-length */
|
|
14
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;
|
|
13
15
|
//# sourceMappingURL=icon.material.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.material.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.material.css.js","sourceRoot":"","sources":["../../../../src/components/icon/dark/icon.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wMAY+K,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */`;\n"]}
|
|
@@ -33,23 +33,25 @@ export const styles = css `:host {
|
|
|
33
33
|
|
|
34
34
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
35
35
|
/* stylelint-disable max-line-length */
|
|
36
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
36
37
|
/* stylelint-disable max-line-length */
|
|
37
38
|
/* stylelint-disable max-line-length */
|
|
38
39
|
/* stylelint-disable max-line-length */
|
|
39
|
-
/* stylelint-disable max-line-length */
|
|
40
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
40
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
41
41
|
/* stylelint-disable max-line-length */
|
|
42
42
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
43
|
+
/* stylelint-disable max-line-length */
|
|
43
44
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
44
|
-
/* stylelint-disable max-line-length */
|
|
45
|
+
/* stylelint-disable max-line-length */
|
|
46
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
45
47
|
:host {
|
|
46
48
|
color: var(--color);
|
|
47
49
|
}
|
|
48
50
|
:host,
|
|
49
51
|
:host ig-icon {
|
|
50
|
-
--color: var(--ig-icon-color,
|
|
52
|
+
--color: var(--ig-icon-color, 'currentColor');
|
|
51
53
|
--size: var(--ig-icon-size, 1.5rem);
|
|
52
|
-
--disabled-color: var(--ig-icon-disabled-color,
|
|
54
|
+
--disabled-color: var(--ig-icon-disabled-color, 'currentColor');
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
svg {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/icon/light/icon.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/icon/light/icon.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n color: var(--color);\n}\n:host,\n:host ig-icon {\n --color: var(--ig-icon-color, 'currentColor');\n --size: var(--ig-icon-size, 1.5rem);\n --disabled-color: var(--ig-icon-disabled-color, 'currentColor');\n}\n\nsvg {\n fill: currentcolor;\n}`;\n"]}
|
|
@@ -33,23 +33,25 @@ export const styles = css `:host {
|
|
|
33
33
|
|
|
34
34
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
35
35
|
/* stylelint-disable max-line-length */
|
|
36
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
36
37
|
/* stylelint-disable max-line-length */
|
|
37
38
|
/* stylelint-disable max-line-length */
|
|
38
39
|
/* stylelint-disable max-line-length */
|
|
39
|
-
/* stylelint-disable max-line-length */
|
|
40
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
40
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
41
41
|
/* stylelint-disable max-line-length */
|
|
42
42
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
43
|
+
/* stylelint-disable max-line-length */
|
|
43
44
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
44
|
-
/* stylelint-disable max-line-length */
|
|
45
|
+
/* stylelint-disable max-line-length */
|
|
46
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
45
47
|
:host {
|
|
46
48
|
color: var(--color);
|
|
47
49
|
}
|
|
48
50
|
:host,
|
|
49
51
|
:host ig-icon {
|
|
50
|
-
--color: var(--ig-icon-color,
|
|
52
|
+
--color: var(--ig-icon-color, 'currentColor');
|
|
51
53
|
--size: var(--ig-icon-size, 1.5rem);
|
|
52
|
-
--disabled-color: var(--ig-icon-disabled-color,
|
|
54
|
+
--disabled-color: var(--ig-icon-disabled-color, 'currentColor');
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
svg {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.fluent.css.js","sourceRoot":"","sources":["../../../../src/components/icon/light/icon.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.fluent.css.js","sourceRoot":"","sources":["../../../../src/components/icon/light/icon.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium: min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n color: var(--color);\n}\n:host,\n:host ig-icon {\n --color: var(--ig-icon-color, 'currentColor');\n --size: var(--ig-icon-size, 1.5rem);\n --disabled-color: var(--ig-icon-disabled-color, 'currentColor');\n}\n\nsvg {\n fill: currentcolor;\n}`;\n"]}
|
|
@@ -33,21 +33,23 @@ export const styles = css `:host {
|
|
|
33
33
|
|
|
34
34
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
35
35
|
/* stylelint-disable max-line-length */
|
|
36
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
36
37
|
/* stylelint-disable max-line-length */
|
|
37
38
|
/* stylelint-disable max-line-length */
|
|
38
39
|
/* stylelint-disable max-line-length */
|
|
39
|
-
/* stylelint-disable max-line-length */
|
|
40
|
-
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
40
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
41
41
|
/* stylelint-disable max-line-length */
|
|
42
42
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
43
|
+
/* stylelint-disable max-line-length */
|
|
43
44
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
44
|
-
/* stylelint-disable max-line-length */
|
|
45
|
+
/* stylelint-disable max-line-length */
|
|
46
|
+
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
45
47
|
:host {
|
|
46
48
|
color: var(--color);
|
|
47
49
|
}
|
|
48
50
|
:host,
|
|
49
51
|
:host ig-icon {
|
|
50
|
-
--color: var(--ig-icon-color,
|
|
52
|
+
--color: var(--ig-icon-color, 'currentColor');
|
|
51
53
|
--size: var(--ig-icon-size, 1.5rem);
|
|
52
54
|
--disabled-color: var(--ig-icon-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
|
|
53
55
|
}
|