igniteui-webcomponents 7.3.0-beta.0 → 7.3.0-beta.1
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 +20 -0
- package/animations/player.d.ts +7 -2
- package/animations/player.js +1 -2
- package/animations/player.js.map +1 -1
- package/components/accordion/accordion.js +4 -16
- package/components/accordion/accordion.js.map +1 -1
- package/components/avatar/avatar.d.ts +0 -1
- package/components/avatar/avatar.js +5 -9
- package/components/avatar/avatar.js.map +1 -1
- package/components/badge/badge.d.ts +1 -3
- package/components/badge/badge.js +4 -8
- package/components/badge/badge.js.map +1 -1
- package/components/banner/banner.d.ts +6 -5
- package/components/banner/banner.js +19 -17
- package/components/banner/banner.js.map +1 -1
- package/components/button/button-base.d.ts +1 -1
- package/components/button/button-base.js.map +1 -1
- package/components/button-group/button-group.d.ts +0 -1
- package/components/button-group/button-group.js +12 -17
- package/components/button-group/button-group.js.map +1 -1
- package/components/calendar/base.d.ts +3 -13
- package/components/calendar/base.js +10 -31
- package/components/calendar/base.js.map +1 -1
- package/components/calendar/calendar.d.ts +2 -2
- package/components/calendar/months-view/months-view.d.ts +1 -1
- package/components/calendar/months-view/months-view.js.map +1 -1
- package/components/carousel/carousel-indicator.d.ts +1 -1
- package/components/carousel/carousel-indicator.js +13 -13
- package/components/carousel/carousel-indicator.js.map +1 -1
- package/components/carousel/carousel-slide.d.ts +0 -2
- package/components/carousel/carousel-slide.js +7 -9
- package/components/carousel/carousel-slide.js.map +1 -1
- package/components/carousel/carousel.d.ts +52 -35
- package/components/carousel/carousel.js +136 -122
- package/components/carousel/carousel.js.map +1 -1
- package/components/carousel/themes/carousel.base.css.js +1 -1
- package/components/carousel/themes/carousel.base.css.js.map +1 -1
- package/components/chat/chat-input.d.ts +1 -1
- package/components/chat/chat-input.js +21 -21
- package/components/chat/chat-input.js.map +1 -1
- package/components/chat/chat.d.ts +0 -2
- package/components/chat/chat.js +6 -12
- package/components/chat/chat.js.map +1 -1
- package/components/checkbox/checkbox-base.d.ts +1 -1
- package/components/checkbox/checkbox.d.ts +3 -5
- package/components/checkbox/checkbox.js +33 -44
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/switch.d.ts +1 -1
- package/components/checkbox/switch.js +23 -34
- package/components/checkbox/switch.js.map +1 -1
- package/components/chip/chip.d.ts +1 -14
- package/components/chip/chip.js +12 -33
- package/components/chip/chip.js.map +1 -1
- package/components/combo/combo-item.d.ts +1 -3
- package/components/combo/combo-item.js +5 -12
- package/components/combo/combo-item.js.map +1 -1
- package/components/combo/combo.d.ts +7 -20
- package/components/combo/combo.js +59 -81
- package/components/combo/combo.js.map +1 -1
- package/components/date-picker/date-picker.base.d.ts +12 -9
- package/components/date-picker/date-picker.base.js +24 -31
- package/components/date-picker/date-picker.base.js.map +1 -1
- package/components/date-picker/date-picker.d.ts +1 -1
- package/components/date-picker/date-picker.js +3 -5
- package/components/date-picker/date-picker.js.map +1 -1
- package/components/date-range-picker/date-range-input.d.ts +2 -4
- package/components/date-range-picker/date-range-input.js +6 -37
- package/components/date-range-picker/date-range-input.js.map +1 -1
- package/components/date-range-picker/date-range-picker.d.ts +2 -5
- package/components/date-range-picker/date-range-picker.js +15 -28
- package/components/date-range-picker/date-range-picker.js.map +1 -1
- package/components/date-range-picker/predefined-ranges-area.d.ts +2 -2
- package/components/date-range-picker/predefined-ranges-area.js +4 -6
- package/components/date-range-picker/predefined-ranges-area.js.map +1 -1
- package/components/date-range-picker/validators.d.ts +1 -1
- package/components/date-range-picker/validators.js +5 -18
- package/components/date-range-picker/validators.js.map +1 -1
- package/components/date-time-input/date-part.d.ts +2 -1
- package/components/date-time-input/date-part.js +38 -75
- package/components/date-time-input/date-part.js.map +1 -1
- package/components/date-time-input/date-time-input.base.d.ts +31 -12
- package/components/date-time-input/date-time-input.base.js +43 -11
- package/components/date-time-input/date-time-input.base.js.map +1 -1
- package/components/date-time-input/date-time-input.d.ts +1 -3
- package/components/date-time-input/date-time-input.js +7 -40
- package/components/date-time-input/date-time-input.js.map +1 -1
- package/components/date-time-input/datetime-mask-parser.d.ts +8 -0
- package/components/date-time-input/datetime-mask-parser.js +8 -8
- package/components/date-time-input/datetime-mask-parser.js.map +1 -1
- package/components/date-time-input/validators.js +3 -14
- package/components/date-time-input/validators.js.map +1 -1
- package/components/dialog/dialog.d.ts +6 -7
- package/components/dialog/dialog.js +21 -26
- package/components/dialog/dialog.js.map +1 -1
- package/components/divider/divider.d.ts +1 -4
- package/components/divider/divider.js +8 -17
- package/components/divider/divider.js.map +1 -1
- package/components/dropdown/dropdown-group.js +1 -6
- package/components/dropdown/dropdown-group.js.map +1 -1
- package/components/expansion-panel/expansion-panel.d.ts +15 -5
- package/components/expansion-panel/expansion-panel.js +23 -34
- package/components/expansion-panel/expansion-panel.js.map +1 -1
- package/components/file-input/file-input.d.ts +2 -14
- package/components/file-input/file-input.js +5 -23
- package/components/file-input/file-input.js.map +1 -1
- package/components/highlight/highlight.d.ts +6 -8
- package/components/highlight/highlight.js +12 -20
- package/components/highlight/highlight.js.map +1 -1
- package/components/icon/icon.d.ts +1 -1
- package/components/icon/registry/types.d.ts +1 -1
- package/components/icon/registry/types.js.map +1 -1
- package/components/input/input.d.ts +9 -19
- package/components/input/input.js +30 -60
- package/components/input/input.js.map +1 -1
- package/components/mask-input/mask-input.d.ts +1 -1
- package/components/mask-input/mask-input.js +2 -4
- package/components/mask-input/mask-input.js.map +1 -1
- package/components/nav-drawer/nav-drawer.d.ts +7 -7
- package/components/nav-drawer/nav-drawer.js +12 -23
- package/components/nav-drawer/nav-drawer.js.map +1 -1
- package/components/progress/base.d.ts +4 -7
- package/components/progress/base.js +21 -45
- package/components/progress/base.js.map +1 -1
- package/components/qr-code/qr-code.d.ts +1 -1
- package/components/qr-code/qr-code.js +3 -2
- package/components/qr-code/qr-code.js.map +1 -1
- package/components/qr-code/types.d.ts +1 -1
- package/components/qr-code/types.js.map +1 -1
- package/components/radio/controller.d.ts +2 -30
- package/components/radio/controller.js +8 -94
- package/components/radio/controller.js.map +1 -1
- package/components/radio/radio.d.ts +5 -5
- package/components/radio/radio.js +48 -58
- package/components/radio/radio.js.map +1 -1
- package/components/radio-group/radio-group.d.ts +1 -2
- package/components/radio-group/radio-group.js +2 -9
- package/components/radio-group/radio-group.js.map +1 -1
- package/components/rating/rating.d.ts +24 -12
- package/components/rating/rating.js +79 -73
- package/components/rating/rating.js.map +1 -1
- package/components/resize-container/default-ghost.js +4 -3
- package/components/resize-container/default-ghost.js.map +1 -1
- package/components/resize-container/resize-container.d.ts +1 -1
- package/components/resize-container/resize-container.js +5 -3
- package/components/resize-container/resize-container.js.map +1 -1
- package/components/resize-container/resize-controller.js +4 -3
- package/components/resize-container/resize-controller.js.map +1 -1
- package/components/select/select-group.d.ts +2 -1
- package/components/select/select-group.js +7 -11
- package/components/select/select-group.js.map +1 -1
- package/components/select/select.d.ts +3 -4
- package/components/select/select.js +23 -28
- package/components/select/select.js.map +1 -1
- package/components/slider/range-slider.d.ts +3 -2
- package/components/slider/range-slider.js +22 -70
- package/components/slider/range-slider.js.map +1 -1
- package/components/slider/slider-base.d.ts +9 -6
- package/components/slider/slider-base.js +27 -28
- package/components/slider/slider-base.js.map +1 -1
- package/components/slider/slider.js +9 -5
- package/components/slider/slider.js.map +1 -1
- package/components/splitter/splitter.d.ts +1 -1
- package/components/splitter/splitter.js.map +1 -1
- package/components/stepper/step.d.ts +3 -0
- package/components/stepper/step.js +9 -5
- package/components/stepper/step.js.map +1 -1
- package/components/stepper/stepper.d.ts +0 -11
- package/components/stepper/stepper.js +21 -86
- package/components/stepper/stepper.js.map +1 -1
- package/components/tabs/tab.d.ts +1 -1
- package/components/tabs/tab.js +6 -5
- package/components/tabs/tab.js.map +1 -1
- package/components/tabs/tabs.d.ts +1 -5
- package/components/tabs/tabs.js +12 -34
- package/components/tabs/tabs.js.map +1 -1
- package/components/textarea/textarea.d.ts +6 -7
- package/components/textarea/textarea.js +3 -10
- package/components/textarea/textarea.js.map +1 -1
- package/components/theme-provider/theme-provider.d.ts +2 -4
- package/components/theme-provider/theme-provider.js +11 -21
- package/components/theme-provider/theme-provider.js.map +1 -1
- package/components/tile-manager/tile-manager.d.ts +10 -21
- package/components/tile-manager/tile-manager.js +43 -74
- package/components/tile-manager/tile-manager.js.map +1 -1
- package/components/tile-manager/tile.d.ts +10 -18
- package/components/tile-manager/tile.js +50 -67
- package/components/tile-manager/tile.js.map +1 -1
- package/components/tooltip/tooltip.d.ts +4 -7
- package/components/tooltip/tooltip.js +20 -28
- package/components/tooltip/tooltip.js.map +1 -1
- package/components/tree/tree.d.ts +1 -14
- package/components/tree/tree.js +5 -23
- package/components/tree/tree.js.map +1 -1
- package/components/tree/tree.navigation.d.ts +1 -1
- package/components/tree/tree.navigation.js.map +1 -1
- package/components/validation-container/validation-container.d.ts +1 -2
- package/components/validation-container/validation-container.js.map +1 -1
- package/components/virtualization/engine.d.ts +40 -38
- package/components/virtualization/engine.js.map +1 -1
- package/components/virtualization/types.d.ts +6 -5
- package/components/virtualization/types.js.map +1 -1
- package/components/virtualization/virtualization.d.ts +94 -80
- package/components/virtualization/virtualization.js +10 -2
- package/components/virtualization/virtualization.js.map +1 -1
- package/custom-elements.json +9940 -7738
- package/igniteui-webcomponents.css-data.json +1 -1
- package/igniteui-webcomponents.html-data.json +1 -1
- package/internals/controllers/aria-projection.d.ts +6 -6
- package/internals/controllers/aria-projection.js.map +1 -1
- package/internals/controllers/context-provider.d.ts +48 -0
- package/internals/controllers/context-provider.js +29 -0
- package/internals/controllers/context-provider.js.map +1 -0
- package/internals/controllers/drag.js +6 -6
- package/internals/controllers/drag.js.map +1 -1
- package/internals/controllers/gestures.js +3 -0
- package/internals/controllers/gestures.js.map +1 -1
- package/internals/controllers/group.d.ts +64 -0
- package/internals/controllers/group.js +104 -0
- package/internals/controllers/group.js.map +1 -0
- package/internals/controllers/internals.d.ts +16 -3
- package/internals/controllers/internals.js +10 -3
- package/internals/controllers/internals.js.map +1 -1
- package/internals/controllers/key-bindings.d.ts +6 -0
- package/internals/controllers/key-bindings.js +3 -0
- package/internals/controllers/key-bindings.js.map +1 -1
- package/internals/controllers/roving-focus.d.ts +72 -0
- package/internals/controllers/roving-focus.js +61 -0
- package/internals/controllers/roving-focus.js.map +1 -0
- package/internals/controllers/slot.d.ts +8 -0
- package/internals/controllers/slot.js +4 -0
- package/internals/controllers/slot.js.map +1 -1
- package/internals/controllers/toggle.d.ts +96 -0
- package/internals/controllers/toggle.js +65 -0
- package/internals/controllers/toggle.js.map +1 -0
- package/internals/date/converters.js +2 -5
- package/internals/date/converters.js.map +1 -1
- package/internals/date/model.d.ts +4 -0
- package/internals/date/model.js +6 -0
- package/internals/date/model.js.map +1 -1
- package/internals/decorators/coerced-property.d.ts +47 -0
- package/internals/decorators/coerced-property.js +36 -0
- package/internals/decorators/coerced-property.js.map +1 -0
- package/internals/i18n/i18n-controller.d.ts +22 -3
- package/internals/i18n/i18n-controller.js +28 -6
- package/internals/i18n/i18n-controller.js.map +1 -1
- package/internals/mixins/alert.d.ts +1 -1
- package/internals/mixins/alert.js +5 -3
- package/internals/mixins/alert.js.map +1 -1
- package/internals/mixins/combo-box.d.ts +3 -12
- package/internals/mixins/combo-box.js +6 -32
- package/internals/mixins/combo-box.js.map +1 -1
- package/internals/mixins/forms/associated.js +18 -0
- package/internals/mixins/forms/associated.js.map +1 -1
- package/internals/mixins/forms/types.d.ts +20 -1
- package/internals/mixins/forms/types.js.map +1 -1
- package/internals/mixins/i18n.d.ts +31 -0
- package/internals/mixins/i18n.js +36 -0
- package/internals/mixins/i18n.js.map +1 -0
- package/internals/mixins/mask-behavior.d.ts +6 -5
- package/internals/mixins/mask-behavior.js +1 -2
- package/internals/mixins/mask-behavior.js.map +1 -1
- package/internals/mixins/option.js +4 -2
- package/internals/mixins/option.js.map +1 -1
- package/internals/templates/masked-input.d.ts +1 -1
- package/internals/templates/masked-input.js.map +1 -1
- package/internals/templates/slotted-icon.d.ts +32 -0
- package/internals/templates/slotted-icon.js +19 -0
- package/internals/templates/slotted-icon.js.map +1 -0
- package/internals/templates/toggle-shell.d.ts +46 -0
- package/internals/templates/toggle-shell.js +38 -0
- package/internals/templates/toggle-shell.js.map +1 -0
- package/internals/timing.d.ts +32 -0
- package/internals/timing.js +20 -0
- package/internals/timing.js.map +1 -0
- package/internals/utils/arrays.d.ts +2 -2
- package/internals/utils/arrays.js.map +1 -1
- package/internals/utils/dom.d.ts +22 -0
- package/internals/utils/dom.js +15 -1
- package/internals/utils/dom.js.map +1 -1
- package/internals/utils/math.d.ts +1 -1
- package/internals/utils/math.js.map +1 -1
- package/internals/utils/types.d.ts +1 -1
- package/internals/utils/types.js.map +1 -1
- package/internals/validators.d.ts +23 -0
- package/internals/validators.js +21 -0
- package/internals/validators.js.map +1 -1
- package/package.json +1 -1
- package/theming/theming-controller.d.ts +3 -3
- package/theming/theming-controller.js.map +1 -1
- package/web-types.json +2 -2
- package/internals/decorators/watch.d.ts +0 -5
- package/internals/decorators/watch.js +0 -19
- package/internals/decorators/watch.js.map +0 -1
|
@@ -58,11 +58,10 @@ export default class IgcTileComponent extends IgcTileComponent_base {
|
|
|
58
58
|
private readonly _fullscreenController;
|
|
59
59
|
private readonly _resizeState;
|
|
60
60
|
private readonly _dragStack;
|
|
61
|
-
|
|
62
|
-
private
|
|
63
|
-
|
|
64
|
-
private
|
|
65
|
-
private _position;
|
|
61
|
+
/** Shared config for the span properties - a value below 1 is coerced to 1. */
|
|
62
|
+
private static _spanVariable;
|
|
63
|
+
/** Shared config for the start properties - a non-positive value removes the explicit placement. */
|
|
64
|
+
private static _startVariable;
|
|
66
65
|
/**
|
|
67
66
|
* Context consumer callback that sets the updated configuration of the internal drag controller
|
|
68
67
|
* based on the passed tile manager properties.
|
|
@@ -79,7 +78,6 @@ export default class IgcTileComponent extends IgcTileComponent_base {
|
|
|
79
78
|
protected readonly _headerRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
|
|
80
79
|
protected readonly _resizeContainer?: IgcResizeContainerComponent;
|
|
81
80
|
_tileContent: HTMLElement;
|
|
82
|
-
private _maximized;
|
|
83
81
|
private _isDragging;
|
|
84
82
|
private _isResizing;
|
|
85
83
|
/** Whether to render the resize container based on tile and tile manager configuration. */
|
|
@@ -94,8 +92,7 @@ export default class IgcTileComponent extends IgcTileComponent_base {
|
|
|
94
92
|
* @attr col-span
|
|
95
93
|
* @default 1
|
|
96
94
|
*/
|
|
97
|
-
|
|
98
|
-
get colSpan(): number;
|
|
95
|
+
colSpan: number;
|
|
99
96
|
/**
|
|
100
97
|
* The number of rows the tile will span.
|
|
101
98
|
*
|
|
@@ -106,22 +103,19 @@ export default class IgcTileComponent extends IgcTileComponent_base {
|
|
|
106
103
|
* @attr row-span
|
|
107
104
|
* @default 1
|
|
108
105
|
*/
|
|
109
|
-
|
|
110
|
-
get rowSpan(): number;
|
|
106
|
+
rowSpan: number;
|
|
111
107
|
/**
|
|
112
108
|
* The starting column for the tile.
|
|
113
109
|
*
|
|
114
110
|
* @attr col-start
|
|
115
111
|
*/
|
|
116
|
-
|
|
117
|
-
get colStart(): number | null;
|
|
112
|
+
colStart: number | null;
|
|
118
113
|
/**
|
|
119
114
|
* The starting row for the tile.
|
|
120
115
|
*
|
|
121
116
|
* @attr row-start
|
|
122
117
|
*/
|
|
123
|
-
|
|
124
|
-
get rowStart(): number | null;
|
|
118
|
+
rowStart: number | null;
|
|
125
119
|
/**
|
|
126
120
|
* Indicates whether the tile occupies the whole screen.
|
|
127
121
|
*
|
|
@@ -133,8 +127,7 @@ export default class IgcTileComponent extends IgcTileComponent_base {
|
|
|
133
127
|
*
|
|
134
128
|
* @attr maximized
|
|
135
129
|
*/
|
|
136
|
-
|
|
137
|
-
get maximized(): boolean;
|
|
130
|
+
maximized: boolean;
|
|
138
131
|
/**
|
|
139
132
|
* Indicates whether to disable tile resize behavior regardless
|
|
140
133
|
* of its tile manager parent settings.
|
|
@@ -165,8 +158,7 @@ export default class IgcTileComponent extends IgcTileComponent_base {
|
|
|
165
158
|
*
|
|
166
159
|
* @attr position
|
|
167
160
|
*/
|
|
168
|
-
|
|
169
|
-
get position(): number;
|
|
161
|
+
position: number;
|
|
170
162
|
constructor();
|
|
171
163
|
/** @internal */
|
|
172
164
|
connectedCallback(): void;
|
|
@@ -13,6 +13,7 @@ import { createAsyncContext } from '#internals/controllers/async-consumer.js';
|
|
|
13
13
|
import { addDragController, } from '#internals/controllers/drag.js';
|
|
14
14
|
import { addFullscreenController } from '#internals/controllers/fullscreen.js';
|
|
15
15
|
import { addSlotController, setSlots } from '#internals/controllers/slot.js';
|
|
16
|
+
import { coercedProperty, } from '#internals/decorators/coerced-property.js';
|
|
16
17
|
import { registerComponent } from '#internals/definitions/register.js';
|
|
17
18
|
import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
|
|
18
19
|
import { partMap } from '#internals/part-map.js';
|
|
@@ -38,6 +39,22 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
38
39
|
static register() {
|
|
39
40
|
registerComponent(IgcTileComponent, IgcIconButtonComponent, IgcDividerComponent, IgcResizeContainerComponent);
|
|
40
41
|
}
|
|
42
|
+
static _spanVariable(name) {
|
|
43
|
+
return {
|
|
44
|
+
transform: ({ value }) => Math.max(1, asNumber(value)),
|
|
45
|
+
onChange: ({ value, host }) => {
|
|
46
|
+
host.style.setProperty(name, value.toString());
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
static _startVariable(name) {
|
|
51
|
+
return {
|
|
52
|
+
transform: ({ value }) => Math.max(0, asNumber(value)) || null,
|
|
53
|
+
onChange: ({ value, host }) => {
|
|
54
|
+
host.style.setProperty(name, value ? value.toString() : null);
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
}
|
|
41
58
|
get _tileManagerCtx() {
|
|
42
59
|
return this._context.value;
|
|
43
60
|
}
|
|
@@ -56,53 +73,9 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
56
73
|
this.fullscreen ||
|
|
57
74
|
this._resizeMode === 'none');
|
|
58
75
|
}
|
|
59
|
-
set colSpan(value) {
|
|
60
|
-
this._colSpan = Math.max(1, asNumber(value));
|
|
61
|
-
this.style.setProperty('--ig-col-span', this._colSpan.toString());
|
|
62
|
-
}
|
|
63
|
-
get colSpan() {
|
|
64
|
-
return this._colSpan;
|
|
65
|
-
}
|
|
66
|
-
set rowSpan(value) {
|
|
67
|
-
this._rowSpan = Math.max(1, asNumber(value));
|
|
68
|
-
this.style.setProperty('--ig-row-span', this._rowSpan.toString());
|
|
69
|
-
}
|
|
70
|
-
get rowSpan() {
|
|
71
|
-
return this._rowSpan;
|
|
72
|
-
}
|
|
73
|
-
set colStart(value) {
|
|
74
|
-
this._colStart = Math.max(0, asNumber(value)) || null;
|
|
75
|
-
this.style.setProperty('--ig-col-start', this._colStart ? this._colStart.toString() : null);
|
|
76
|
-
}
|
|
77
|
-
get colStart() {
|
|
78
|
-
return this._colStart;
|
|
79
|
-
}
|
|
80
|
-
set rowStart(value) {
|
|
81
|
-
this._rowStart = Math.max(0, asNumber(value)) || null;
|
|
82
|
-
this.style.setProperty('--ig-row-start', this._rowStart ? this._rowStart.toString() : null);
|
|
83
|
-
}
|
|
84
|
-
get rowStart() {
|
|
85
|
-
return this._rowStart;
|
|
86
|
-
}
|
|
87
76
|
get fullscreen() {
|
|
88
77
|
return this._fullscreenController.fullscreen;
|
|
89
78
|
}
|
|
90
|
-
set maximized(value) {
|
|
91
|
-
this._maximized = value;
|
|
92
|
-
if (this._tileManagerCtx) {
|
|
93
|
-
this._tileManagerCtx.setMaximizedState();
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
get maximized() {
|
|
97
|
-
return this._maximized;
|
|
98
|
-
}
|
|
99
|
-
set position(value) {
|
|
100
|
-
this._position = asNumber(value);
|
|
101
|
-
this.style.order = this._position.toString();
|
|
102
|
-
}
|
|
103
|
-
get position() {
|
|
104
|
-
return this._position;
|
|
105
|
-
}
|
|
106
79
|
constructor() {
|
|
107
80
|
super();
|
|
108
81
|
this._slots = addSlotController(this, { slots: Slots });
|
|
@@ -121,11 +94,6 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
121
94
|
});
|
|
122
95
|
this._resizeState = createTileResizeState();
|
|
123
96
|
this._dragStack = createTileDragStack();
|
|
124
|
-
this._colSpan = 1;
|
|
125
|
-
this._rowSpan = 1;
|
|
126
|
-
this._colStart = null;
|
|
127
|
-
this._rowStart = null;
|
|
128
|
-
this._position = -1;
|
|
129
97
|
this._setDragConfiguration = ({ instance: { dragMode }, }) => {
|
|
130
98
|
this._dragController.set({
|
|
131
99
|
enabled: dragMode !== 'none',
|
|
@@ -134,12 +102,17 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
134
102
|
};
|
|
135
103
|
this._context = createAsyncContext(this, tileManagerContext, this._setDragConfiguration);
|
|
136
104
|
this._headerRef = createRef();
|
|
137
|
-
this._maximized = false;
|
|
138
105
|
this._isDragging = false;
|
|
139
106
|
this._isResizing = false;
|
|
107
|
+
this.colSpan = 1;
|
|
108
|
+
this.rowSpan = 1;
|
|
109
|
+
this.colStart = null;
|
|
110
|
+
this.rowStart = null;
|
|
111
|
+
this.maximized = false;
|
|
140
112
|
this.disableResize = false;
|
|
141
113
|
this.disableFullscreen = false;
|
|
142
114
|
this.disableMaximize = false;
|
|
115
|
+
this.position = -1;
|
|
143
116
|
this._createResizeGhost = () => {
|
|
144
117
|
return createTileGhost(this);
|
|
145
118
|
};
|
|
@@ -218,7 +191,7 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
218
191
|
}
|
|
219
192
|
}
|
|
220
193
|
_skipDrag(event) {
|
|
221
|
-
if (this.
|
|
194
|
+
if (this.maximized || this.fullscreen) {
|
|
222
195
|
return true;
|
|
223
196
|
}
|
|
224
197
|
return Boolean(getElementFromPath((e) => e.matches('[part*=trigger]') || e.matches('#tile-actions'), event));
|
|
@@ -313,7 +286,7 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
313
286
|
this._handleFullscreen,
|
|
314
287
|
]
|
|
315
288
|
: [
|
|
316
|
-
this.
|
|
289
|
+
this.maximized ? 'collapse_content' : 'expand_content',
|
|
317
290
|
this._handleMaximize,
|
|
318
291
|
];
|
|
319
292
|
return html `
|
|
@@ -419,9 +392,6 @@ __decorate([
|
|
|
419
392
|
__decorate([
|
|
420
393
|
query('[part~="base"]', true)
|
|
421
394
|
], IgcTileComponent.prototype, "_tileContent", void 0);
|
|
422
|
-
__decorate([
|
|
423
|
-
state()
|
|
424
|
-
], IgcTileComponent.prototype, "_maximized", void 0);
|
|
425
395
|
__decorate([
|
|
426
396
|
state()
|
|
427
397
|
], IgcTileComponent.prototype, "_isDragging", void 0);
|
|
@@ -429,20 +399,27 @@ __decorate([
|
|
|
429
399
|
state()
|
|
430
400
|
], IgcTileComponent.prototype, "_isResizing", void 0);
|
|
431
401
|
__decorate([
|
|
432
|
-
property({ type: Number, attribute: 'col-span' })
|
|
433
|
-
|
|
402
|
+
property({ type: Number, attribute: 'col-span' }),
|
|
403
|
+
coercedProperty(IgcTileComponent._spanVariable('--ig-col-span'))
|
|
404
|
+
], IgcTileComponent.prototype, "colSpan", void 0);
|
|
434
405
|
__decorate([
|
|
435
|
-
property({ type: Number, attribute: 'row-span' })
|
|
436
|
-
|
|
406
|
+
property({ type: Number, attribute: 'row-span' }),
|
|
407
|
+
coercedProperty(IgcTileComponent._spanVariable('--ig-row-span'))
|
|
408
|
+
], IgcTileComponent.prototype, "rowSpan", void 0);
|
|
437
409
|
__decorate([
|
|
438
|
-
property({ type: Number, attribute: 'col-start' })
|
|
439
|
-
|
|
410
|
+
property({ type: Number, attribute: 'col-start' }),
|
|
411
|
+
coercedProperty(IgcTileComponent._startVariable('--ig-col-start'))
|
|
412
|
+
], IgcTileComponent.prototype, "colStart", void 0);
|
|
440
413
|
__decorate([
|
|
441
|
-
property({ type: Number, attribute: 'row-start' })
|
|
442
|
-
|
|
414
|
+
property({ type: Number, attribute: 'row-start' }),
|
|
415
|
+
coercedProperty(IgcTileComponent._startVariable('--ig-row-start'))
|
|
416
|
+
], IgcTileComponent.prototype, "rowStart", void 0);
|
|
443
417
|
__decorate([
|
|
444
|
-
property({ type: Boolean, reflect: true })
|
|
445
|
-
|
|
418
|
+
property({ type: Boolean, reflect: true }),
|
|
419
|
+
coercedProperty({
|
|
420
|
+
onChange: ({ host }) => host._tileManagerCtx?.setMaximizedState(),
|
|
421
|
+
})
|
|
422
|
+
], IgcTileComponent.prototype, "maximized", void 0);
|
|
446
423
|
__decorate([
|
|
447
424
|
property({ type: Boolean, reflect: true, attribute: 'disable-resize' })
|
|
448
425
|
], IgcTileComponent.prototype, "disableResize", void 0);
|
|
@@ -453,6 +430,12 @@ __decorate([
|
|
|
453
430
|
property({ type: Boolean, reflect: true, attribute: 'disable-maximize' })
|
|
454
431
|
], IgcTileComponent.prototype, "disableMaximize", void 0);
|
|
455
432
|
__decorate([
|
|
456
|
-
property({ type: Number })
|
|
457
|
-
|
|
433
|
+
property({ type: Number }),
|
|
434
|
+
coercedProperty({
|
|
435
|
+
transform: ({ value }) => asNumber(value),
|
|
436
|
+
onChange: ({ value, host }) => {
|
|
437
|
+
host.style.order = value.toString();
|
|
438
|
+
},
|
|
439
|
+
})
|
|
440
|
+
], IgcTileComponent.prototype, "position", void 0);
|
|
458
441
|
//# sourceMappingURL=tile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport {\n setTransitionName,\n startViewTransition,\n} from '#animations/view-transition.js';\nimport {\n type TileManagerContext,\n tileManagerContext,\n} from '#internals/context.js';\nimport { createAsyncContext } from '#internals/controllers/async-consumer.js';\nimport {\n addDragController,\n type DragCallbackParameters,\n} from '#internals/controllers/drag.js';\nimport { addFullscreenController } from '#internals/controllers/fullscreen.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isLTR } from '#internals/utils/dom.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcDividerComponent from '../divider/divider.js';\nimport IgcResizeContainerComponent from '../resize-container/resize-container.js';\nimport type { ResizeCallbackParams } from '../resize-container/types.js';\nimport type { TileManagerResizeMode } from '../types.js';\nimport { createTileDragStack, swapTiles } from './position.js';\nimport { createTileResizeState } from './resize-state.js';\nimport { styles as shared } from './themes/shared/tile/tile.common.css.js';\nimport { styles } from './themes/tile.base.css.js';\nimport { all } from './themes/tile.js';\nimport { createTileDragGhost, createTileGhost } from './tile-ghost-util.js';\nimport type IgcTileManagerComponent from './tile-manager.js';\n\nexport interface IgcTileChangeStateEventArgs {\n tile: IgcTileComponent;\n state: boolean;\n}\n\ntype AdornerType = 'side' | 'corner' | 'bottom';\n\nexport interface IgcTileComponentEventMap {\n igcTileFullscreen: CustomEvent<IgcTileChangeStateEventArgs>;\n igcTileMaximize: CustomEvent<IgcTileChangeStateEventArgs>;\n igcTileDragStart: CustomEvent<IgcTileComponent>;\n igcTileDragEnd: CustomEvent<IgcTileComponent>;\n igcTileDragCancel: CustomEvent<IgcTileComponent>;\n igcTileResizeStart: CustomEvent<IgcTileComponent>;\n igcTileResizeEnd: CustomEvent<IgcTileComponent>;\n igcTileResizeCancel: CustomEvent<IgcTileComponent>;\n}\n\nconst nextId = createIdGenerator('tile');\nconst Slots = setSlots(\n 'title',\n 'maximize-action',\n 'fullscreen-action',\n 'actions',\n 'side-adorner',\n 'corner-adorner',\n 'bottom-adorner'\n);\n\n/**\n * The tile component is used within the tile manager as a container\n * for displaying various types of information.\n *\n * @element igc-tile\n *\n * @fires igcTileFullscreen - Fired when tile the fullscreen state changes.\n * @fires igcTileMaximize - Fired when tile the maximize state changes.\n * @fires igcTileDragStart - Fired when a drag operation on a tile is about to begin. Cancelable.\n * @fires igcTileDragEnd - Fired when a drag operation with a tile is successfully completed.\n * @fires igcTileDragCancel - Fired when a tile drag operation is canceled by the user.\n * @fires igcTileResizeStart - Fired when a resize operation on a tile is about to begin. Cancelable.\n * @fires igcTileResizeEnd - Fired when a resize operation on a tile is successfully completed.\n * @fires igcTileResizeCancel - Fired when a resize operation on a tile is canceled by the user.\n *\n * @slot - Default slot for the tile's content.\n * @slot title - Renders the title of the tile header.\n * @slot maximize-action - Renders the maximize action element of the tile header.\n * @slot fullscreen-action - Renders the fullscreen action element of the tile header.\n * @slot actions - Renders items after the default actions in the tile header.\n * @slot side-adorner - Renders the side resize handle of the tile.\n * @slot corner-adorner - Renders the corner resize handle of the tile.\n * @slot bottom-adorner - Renders the bottom resize handle of the tile.\n *\n * @csspart base - The wrapper for the entire tile content, header and content.\n * @csspart header - The container for the tile header, including title and actions.\n * @csspart title - The title container of the tile.\n * @csspart actions - The actions container of the tile header.\n * @csspart content-container - The container wrapping the tile’s main content.\n * @csspart trigger-side - The part for the side adorner of the encapsulated resize element in the tile.\n * @csspart trigger - The part for the corner adorner of the encapsulated resize element in the tile.\n * @csspart trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile.\n */\nexport default class IgcTileComponent extends EventEmitterMixin<\n IgcTileComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-tile';\n public static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcTileComponent,\n IgcIconButtonComponent,\n IgcDividerComponent,\n IgcResizeContainerComponent\n );\n }\n\n private readonly _slots = addSlotController(this, { slots: Slots });\n\n private readonly _dragController = addDragController(this, {\n skip: this._skipDrag,\n matchTarget: this._match,\n ghost: this._createDragGhost,\n start: this._handleDragStart,\n over: this._handleDragOver,\n end: this._handleDragEnd,\n cancel: this._handleDragCancel,\n });\n\n private readonly _fullscreenController = addFullscreenController(this, {\n enter: this._emitFullScreenEvent,\n exit: this._emitFullScreenEvent,\n });\n\n private readonly _resizeState = createTileResizeState();\n private readonly _dragStack = createTileDragStack();\n\n private _colSpan = 1;\n private _rowSpan = 1;\n private _colStart: number | null = null;\n private _rowStart: number | null = null;\n private _position = -1;\n\n // Tile manager context properties and helpers\n\n /**\n * Context consumer callback that sets the updated configuration of the internal drag controller\n * based on the passed tile manager properties.\n */\n private _setDragConfiguration = ({\n instance: { dragMode },\n }: TileManagerContext) => {\n this._dragController.set({\n enabled: dragMode !== 'none',\n trigger:\n dragMode === 'tile-header' ? () => this._headerRef.value! : undefined,\n });\n };\n\n private readonly _context = createAsyncContext(\n this,\n tileManagerContext,\n this._setDragConfiguration\n );\n\n /** Returns the parent tile manager context. */\n private get _tileManagerCtx(): TileManagerContext | undefined {\n return this._context.value;\n }\n\n private get _tileManager(): IgcTileManagerComponent | undefined {\n return this._tileManagerCtx?.instance;\n }\n\n /** Returns the tile manager internal CSS grid container. */\n private get _cssContainer(): HTMLElement | undefined {\n return this._tileManagerCtx?.grid.value;\n }\n\n /** Returns the tile manager current resize mode. */\n private get _resizeMode(): TileManagerResizeMode {\n return this._tileManager?.resizeMode ?? 'none';\n }\n\n protected readonly _headerRef = createRef<HTMLElement>();\n\n @query(IgcResizeContainerComponent.tagName)\n protected readonly _resizeContainer?: IgcResizeContainerComponent;\n\n @query('[part~=\"base\"]', true)\n public _tileContent!: HTMLElement;\n\n @state()\n private _maximized = false;\n\n @state()\n private _isDragging = false;\n\n @state()\n private _isResizing = false;\n\n /** Whether to render the resize container based on tile and tile manager configuration. */\n private get _resizeDisabled(): boolean {\n return (\n this.disableResize ||\n this.maximized ||\n this.fullscreen ||\n this._resizeMode === 'none'\n );\n }\n\n /**\n * The number of columns the tile will span.\n *\n * @remarks\n * When setting a value that is less than 1, it will be\n * coerced to 1.\n *\n * @attr col-span\n * @default 1\n */\n @property({ type: Number, attribute: 'col-span' })\n public set colSpan(value: number) {\n this._colSpan = Math.max(1, asNumber(value));\n this.style.setProperty('--ig-col-span', this._colSpan.toString());\n }\n\n public get colSpan(): number {\n return this._colSpan;\n }\n\n /**\n * The number of rows the tile will span.\n *\n * @remarks\n * When setting a value that is less than 1, it will be\n * coerced to 1.\n *\n * @attr row-span\n * @default 1\n */\n @property({ type: Number, attribute: 'row-span' })\n public set rowSpan(value: number) {\n this._rowSpan = Math.max(1, asNumber(value));\n this.style.setProperty('--ig-row-span', this._rowSpan.toString());\n }\n\n public get rowSpan(): number {\n return this._rowSpan;\n }\n\n /**\n * The starting column for the tile.\n *\n * @attr col-start\n */\n @property({ type: Number, attribute: 'col-start' })\n public set colStart(value: number | null) {\n this._colStart = Math.max(0, asNumber(value)) || null;\n this.style.setProperty(\n '--ig-col-start',\n this._colStart ? this._colStart.toString() : null\n );\n }\n\n public get colStart(): number | null {\n return this._colStart;\n }\n\n /**\n * The starting row for the tile.\n *\n * @attr row-start\n */\n @property({ type: Number, attribute: 'row-start' })\n public set rowStart(value: number | null) {\n this._rowStart = Math.max(0, asNumber(value)) || null;\n this.style.setProperty(\n '--ig-row-start',\n this._rowStart ? this._rowStart.toString() : null\n );\n }\n\n public get rowStart(): number | null {\n return this._rowStart;\n }\n\n /**\n * Indicates whether the tile occupies the whole screen.\n *\n * @property\n */\n public get fullscreen(): boolean {\n return this._fullscreenController.fullscreen;\n }\n\n /**\n * Indicates whether the tile occupies all available space within the layout.\n *\n * @attr maximized\n */\n @property({ type: Boolean, reflect: true })\n public set maximized(value: boolean) {\n this._maximized = value;\n\n if (this._tileManagerCtx) {\n this._tileManagerCtx.setMaximizedState();\n }\n }\n\n public get maximized(): boolean {\n return this._maximized;\n }\n\n /**\n * Indicates whether to disable tile resize behavior regardless\n * of its tile manager parent settings.\n *\n * @attr disable-resize\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'disable-resize' })\n public disableResize = false;\n\n /**\n * Whether to disable the rendering of the tile `fullscreen-action` slot and its\n * default fullscreen action button.\n *\n * @attr disable-fullscreen\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'disable-fullscreen' })\n public disableFullscreen = false;\n\n /**\n * Whether to disable the rendering of the tile `maximize-action` slot and its\n * default maximize action button.\n *\n * @attr disable-maximize\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'disable-maximize' })\n public disableMaximize = false;\n\n /**\n * Gets/sets the tile's visual position in the layout.\n * Corresponds to the CSS `order` property.\n *\n * @attr position\n */\n @property({ type: Number })\n public set position(value: number) {\n this._position = asNumber(value);\n this.style.order = this._position.toString();\n }\n\n public get position(): number {\n return this._position;\n }\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.id = this.id || nextId();\n if (!this.style.viewTransitionName) {\n setTransitionName(this, `tile-transition-${this.id}`);\n }\n }\n\n private _setDragState(state = true) {\n this._isDragging = state;\n this._tileContent.style.opacity = state ? '0' : '';\n this.style.pointerEvents = state ? 'none' : '';\n this.part.toggle('dragging', state);\n }\n\n private _handleDragStart() {\n if (!this._emitTileDragStart()) {\n return false;\n }\n\n this._setDragState();\n this._dragStack.push(this);\n return true;\n }\n\n private _handleDragOver({ event, state }: DragCallbackParameters): void {\n const match = state.element as IgcTileComponent;\n\n if (this._dragStack.peek() === match) {\n if (this._shouldSwap(event, state, match)) {\n this._dragStack.pop();\n this._dragStack.push(match);\n this._performSwap(match);\n }\n return;\n }\n\n this._dragStack.push(match);\n this._performSwap(match);\n }\n\n private _handleDragCancel() {\n startViewTransition(() => {\n this._dragStack.restore();\n this._dragStack.reset();\n });\n\n this._dragController.dispose();\n this._setDragState(false);\n this.emitEvent('igcTileDragCancel', { detail: this });\n }\n\n private _handleDragEnd() {\n this._setDragState(false);\n this._dragStack.reset();\n this.emitEvent('igcTileDragEnd', { detail: this });\n }\n\n private _performSwap(match: IgcTileComponent): void {\n startViewTransition(() => swapTiles(this, match));\n }\n\n private _shouldSwap(\n { clientX, clientY }: PointerEvent,\n state: DragCallbackParameters['state'],\n match: IgcTileComponent\n ): boolean {\n const LTR = isLTR(this);\n const direction = state.pointerState.direction;\n\n const { left, top, width, height } = match.getBoundingClientRect();\n const relativeX = (clientX - left) / width;\n const relativeY = (clientY - top) / height;\n\n switch (direction) {\n case 'start':\n return (\n this.position > match.position &&\n (LTR ? relativeX <= 0.25 : relativeX >= 0.75)\n );\n case 'end':\n return (\n this.position < match.position &&\n (LTR ? relativeX >= 0.75 : relativeX <= 0.25)\n );\n case 'top':\n return this.position > match.position && relativeY <= 0.25;\n case 'bottom':\n return this.position < match.position && relativeY >= 0.75;\n default:\n return false;\n }\n }\n\n private _skipDrag(event: PointerEvent): boolean {\n if (this._maximized || this.fullscreen) {\n return true;\n }\n\n return Boolean(\n getElementFromPath(\n (e) => e.matches('[part*=trigger]') || e.matches('#tile-actions'),\n event\n )\n );\n }\n\n private _match(element: Element): element is IgcTileComponent {\n return element !== this && IgcTileComponent.tagName === element.localName;\n }\n\n private _createDragGhost(): IgcTileComponent {\n return createTileDragGhost(this);\n }\n\n private _createResizeGhost = (): HTMLElement => {\n return createTileGhost(this);\n };\n\n private _setResizeState(state = true) {\n this._isResizing = state;\n this.style.zIndex = state ? '1' : '';\n this.part.toggle('resizing', state);\n }\n\n private _handleResizeStart(event: CustomEvent<ResizeCallbackParams>) {\n if (!this._emitTileResizeStart()) {\n event.preventDefault();\n return;\n }\n\n this._resizeState.updateState(\n event.detail.state.initial,\n this,\n this._cssContainer!\n );\n this._setResizeState();\n }\n\n private _handleResize({\n detail: { state },\n }: CustomEvent<ResizeCallbackParams>) {\n const trigger = state.trigger!;\n\n const isWidthResize = trigger.matches('[part*=\"side\"], [part=\"trigger\"]');\n const isHeightResize = trigger.matches(\n '[part*=\"bottom\"], [part=\"trigger\"]'\n );\n\n if (isWidthResize) {\n state.current.width = this._resizeState.calculateSnappedWidth(state);\n }\n\n if (isHeightResize) {\n state.current.height = this._resizeState.calculateSnappedHeight(state);\n }\n }\n\n private _handleResizeEnd({\n detail: { state },\n }: CustomEvent<ResizeCallbackParams>) {\n const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(\n state.current\n );\n\n state.commit = async () => {\n await startViewTransition(() => {\n this.colSpan = colSpan;\n this.rowSpan = rowSpan;\n }).updateCallbackDone;\n\n this._setResizeState(false);\n this.emitEvent('igcTileResizeEnd', { detail: this });\n };\n }\n\n private _handleResizeCancel() {\n this._setResizeState(false);\n this.emitEvent('igcTileResizeCancel', { detail: this });\n }\n\n private _handleFullscreen() {\n this._fullscreenController.setState(!this.fullscreen);\n }\n\n private async _handleMaximize() {\n if (!this._emitMaximizedEvent()) {\n return;\n }\n\n this.style.zIndex = '1';\n\n await startViewTransition(() => {\n this.maximized = !this.maximized;\n }).finished;\n\n this.style.zIndex = '';\n }\n\n private _emitFullScreenEvent(state: boolean) {\n this.requestUpdate();\n\n return this.emitEvent('igcTileFullscreen', {\n detail: { tile: this, state },\n cancelable: true,\n });\n }\n\n private _emitMaximizedEvent() {\n return this.emitEvent('igcTileMaximize', {\n detail: { tile: this, state: !this.maximized },\n cancelable: true,\n });\n }\n\n private _emitTileDragStart() {\n return this.emitEvent('igcTileDragStart', {\n detail: this,\n cancelable: true,\n });\n }\n\n private _emitTileResizeStart() {\n return this.emitEvent('igcTileResizeStart', {\n detail: this,\n cancelable: true,\n });\n }\n\n protected _renderDefaultAction(type: 'maximize' | 'fullscreen') {\n const [icon, listener] =\n type === 'fullscreen'\n ? [\n this.fullscreen ? 'fullscreen_exit' : 'fullscreen',\n this._handleFullscreen,\n ]\n : [\n this._maximized ? 'collapse_content' : 'expand_content',\n this._handleMaximize,\n ];\n\n return html`\n <igc-icon-button\n variant=\"flat\"\n collection=\"default\"\n exportparts=\"icon\"\n name=${icon}\n aria-label=${icon}\n @click=${listener}\n ></igc-icon-button>\n `;\n }\n\n protected _renderHeader() {\n const hasTitle = this._slots.hasAssignedElements('title');\n const hasActions = this._slots.hasAssignedElements('actions');\n\n const hideHeader =\n !hasTitle &&\n !hasActions &&\n this.disableMaximize &&\n this.disableFullscreen;\n\n const hasMaximizeSlot = !(this.disableMaximize || this.fullscreen);\n const hasFullscreenSlot = !this.disableFullscreen;\n\n return html`\n <section part=\"header\" ?hidden=${hideHeader} ${ref(this._headerRef)}>\n <header part=\"title\">\n <slot name=\"title\"></slot>\n </header>\n <section id=\"tile-actions\" part=\"actions\">\n ${\n hasMaximizeSlot\n ? html`\n <slot name=\"maximize-action\">\n ${this._renderDefaultAction('maximize')}\n </slot>\n `\n : nothing\n }\n ${\n hasFullscreenSlot\n ? html`\n <slot name=\"fullscreen-action\">\n ${this._renderDefaultAction('fullscreen')}\n </slot>\n `\n : nothing\n }\n\n <slot name=\"actions\"></slot>\n </section>\n </section>\n <igc-divider></igc-divider>\n `;\n }\n\n protected _renderContent() {\n const parts = {\n base: true,\n draggable: this._tileManager?.dragMode !== 'none',\n fullscreen: this.fullscreen,\n dragging: this._isDragging,\n resizable:\n !this.disableResize && this._tileManager?.resizeMode !== 'none',\n resizing: this._isResizing,\n maximized: this.maximized,\n };\n\n return html`\n <div part=${partMap(parts)}>\n ${this._renderHeader()}\n <div part=\"content-container\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _renderAdornerSlot(name: AdornerType) {\n return html`<slot name=\"${name}-adorner\" slot=\"${name}-adorner\"></slot>`;\n }\n\n protected override render() {\n const isActive = this._resizeMode === 'always';\n\n return this._resizeDisabled\n ? this._renderContent()\n : html`\n <igc-resize\n part=${partMap({\n resize: true,\n 'side-adorner': this._slots.hasAssignedElements('side-adorner'),\n 'corner-adorner':\n this._slots.hasAssignedElements('corner-adorner'),\n 'bottom-adorner':\n this._slots.hasAssignedElements('bottom-adorner'),\n })}\n exportparts=\"trigger-side, trigger, trigger-bottom\"\n mode=\"deferred\"\n ?active=${isActive}\n .ghostFactory=${this._createResizeGhost}\n @igcResizeStart=${this._handleResizeStart}\n @igcResize=${this._handleResize}\n @igcResizeEnd=${this._handleResizeEnd}\n @igcResizeCancel=${this._handleResizeCancel}\n >\n ${this._renderContent()} ${this._renderAdornerSlot('side')}\n ${this._renderAdornerSlot('corner')}\n ${this._renderAdornerSlot('bottom')}\n </igc-resize>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-tile': IgcTileComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EACL,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAEL,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EACL,iBAAiB,GAElB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EACL,eAAe,GAEhB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,2BAA2B,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAqB5E,MAAM,MAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACzC,MAAM,KAAK,GAAG,QAAQ,CACpB,OAAO,EACP,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,gBAAgB,CACjB,CAAC;AAmCF,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,iBAAiB,CAG7D,UAAU,CAAC;aACY,YAAO,GAAG,UAAU,AAAb,CAAc;aAC9B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAGjC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,gBAAgB,EAChB,sBAAsB,EACtB,mBAAmB,EACnB,2BAA2B,CAC5B,CAAC;IACJ,CAAC;IAuBO,MAAM,CAAC,aAAa,CAC1B,IAAY;QAEZ,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;YACtD,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC5B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YACjD,CAAC;SACF,CAAC;IACJ,CAAC;IAGO,MAAM,CAAC,cAAc,CAC3B,IAAY;QAEZ,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI;YAC9D,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC5B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YAChE,CAAC;SACF,CAAC;IACJ,CAAC;IAyBD,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC7B,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACxC,CAAC;IAGD,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC;IAC1C,CAAC;IAGD,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,YAAY,EAAE,UAAU,IAAI,MAAM,CAAC;IACjD,CAAC;IAiBD,IAAY,eAAe;QACzB,OAAO,CACL,IAAI,CAAC,aAAa;YAClB,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,WAAW,KAAK,MAAM,CAC5B,CAAC;IACJ,CAAC;IAqDD,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC;IAC/C,CAAC;IA0DD;QACE,KAAK,EAAE,CAAC;QA7NO,WAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAEnD,oBAAe,GAAG,iBAAiB,CAAC,IAAI,EAAE;YACzD,IAAI,EAAE,IAAI,CAAC,SAAS;YACpB,WAAW,EAAE,IAAI,CAAC,MAAM;YACxB,KAAK,EAAE,IAAI,CAAC,gBAAgB;YAC5B,KAAK,EAAE,IAAI,CAAC,gBAAgB;YAC5B,IAAI,EAAE,IAAI,CAAC,eAAe;YAC1B,GAAG,EAAE,IAAI,CAAC,cAAc;YACxB,MAAM,EAAE,IAAI,CAAC,iBAAiB;SAC/B,CAAC,CAAC;QAEc,0BAAqB,GAAG,uBAAuB,CAAC,IAAI,EAAE;YACrE,KAAK,EAAE,IAAI,CAAC,oBAAoB;YAChC,IAAI,EAAE,IAAI,CAAC,oBAAoB;SAChC,CAAC,CAAC;QAEc,iBAAY,GAAG,qBAAqB,EAAE,CAAC;QACvC,eAAU,GAAG,mBAAmB,EAAE,CAAC;QAgC5C,0BAAqB,GAAG,CAAC,EAC/B,QAAQ,EAAE,EAAE,QAAQ,EAAE,GACH,EAAE,EAAE;YACvB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC;gBACvB,OAAO,EAAE,QAAQ,KAAK,MAAM;gBAC5B,OAAO,EACL,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAM,CAAC,CAAC,CAAC,SAAS;aACxE,CAAC,CAAC;QACL,CAAC,CAAC;QAEe,aAAQ,GAAG,kBAAkB,CAC5C,IAAI,EACJ,kBAAkB,EAClB,IAAI,CAAC,qBAAqB,CAC3B,CAAC;QAqBiB,eAAU,GAAG,SAAS,EAAe,CAAC;QASjD,gBAAW,GAAG,KAAK,CAAC;QAGpB,gBAAW,GAAG,KAAK,CAAC;QAwBrB,YAAO,GAAG,CAAC,CAAC;QAcZ,YAAO,GAAG,CAAC,CAAC;QASZ,aAAQ,GAAkB,IAAI,CAAC;QAS/B,aAAQ,GAAkB,IAAI,CAAC;QAoB/B,cAAS,GAAG,KAAK,CAAC;QAUlB,kBAAa,GAAG,KAAK,CAAC;QAUtB,sBAAiB,GAAG,KAAK,CAAC;QAU1B,oBAAe,GAAG,KAAK,CAAC;QAexB,aAAQ,GAAG,CAAC,CAAC,CAAC;QA2Hb,uBAAkB,GAAG,GAAgB,EAAE;YAC7C,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC;QAzHA,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAGe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC;YACnC,iBAAiB,CAAC,IAAI,EAAE,mBAAmB,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAK,GAAG,IAAI;QAChC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAA0B;QAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,OAA2B,CAAC;QAEhD,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,KAAK,EAAE,CAAC;YACrC,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC5B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,mBAAmB,CAAC,GAAG,EAAE;YACvB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACrD,CAAC;IAEO,YAAY,CAAC,KAAuB;QAC1C,mBAAmB,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,CAAC;IAEO,WAAW,CACjB,EAAE,OAAO,EAAE,OAAO,EAAgB,EAClC,KAAsC,EACtC,KAAuB;QAEvB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QACxB,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC;QAE/C,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QACnE,MAAM,SAAS,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC;QAC3C,MAAM,SAAS,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;QAE3C,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,CACL,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ;oBAC9B,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAC9C,CAAC;YACJ,KAAK,KAAK;gBACR,OAAO,CACL,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ;oBAC9B,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAC9C,CAAC;YACJ,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,SAAS,IAAI,IAAI,CAAC;YAC7D,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,SAAS,IAAI,IAAI,CAAC;YAC7D;gBACE,OAAO,KAAK,CAAC;QACjB,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,KAAmB;QACnC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,OAAO,CACZ,kBAAkB,CAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,EACjE,KAAK,CACN,CACF,CAAC;IACJ,CAAC;IAEO,MAAM,CAAC,OAAgB;QAC7B,OAAO,OAAO,KAAK,IAAI,IAAI,gBAAgB,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC;IAC5E,CAAC;IAEO,gBAAgB;QACtB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAMO,eAAe,CAAC,KAAK,GAAG,IAAI;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC;IAEO,kBAAkB,CAAC,KAAwC;QACjE,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,WAAW,CAC3B,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAC1B,IAAI,EACJ,IAAI,CAAC,aAAc,CACpB,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,aAAa,CAAC,EACpB,MAAM,EAAE,EAAE,KAAK,EAAE,GACiB;QAClC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAQ,CAAC;QAE/B,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;QAC1E,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CACpC,oCAAoC,CACrC,CAAC;QAEF,IAAI,aAAa,EAAE,CAAC;YAClB,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QACvE,CAAC;QAED,IAAI,cAAc,EAAE,CAAC;YACnB,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACzE,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,EACvB,MAAM,EAAE,EAAE,KAAK,EAAE,GACiB;QAClC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,4BAA4B,CACzE,KAAK,CAAC,OAAO,CACd,CAAC;QAEF,KAAK,CAAC,MAAM,GAAG,KAAK,IAAI,EAAE;YACxB,MAAM,mBAAmB,CAAC,GAAG,EAAE;gBAC7B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;gBACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACzB,CAAC,CAAC,CAAC,kBAAkB,CAAC;YAEtB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxD,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;QAExB,MAAM,mBAAmB,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEZ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;IACzB,CAAC;IAEO,oBAAoB,CAAC,KAAc;QACzC,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE;YACzC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;YAC7B,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE;YACvC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;YAC9C,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;YACxC,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAC,oBAAoB,EAAE;YAC1C,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAES,oBAAoB,CAAC,IAA+B;QAC5D,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,GACpB,IAAI,KAAK,YAAY;YACnB,CAAC,CAAC;gBACE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAY;gBAClD,IAAI,CAAC,iBAAiB;aACvB;YACH,CAAC,CAAC;gBACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB;gBACtD,IAAI,CAAC,eAAe;aACrB,CAAC;QAER,OAAO,IAAI,CAAA;;;;;eAKA,IAAI;qBACE,IAAI;iBACR,QAAQ;;KAEpB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC1D,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;QAE9D,MAAM,UAAU,GACd,CAAC,QAAQ;YACT,CAAC,UAAU;YACX,IAAI,CAAC,eAAe;YACpB,IAAI,CAAC,iBAAiB,CAAC;QAEzB,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;QACnE,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;QAElD,OAAO,IAAI,CAAA;uCACwB,UAAU,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;;;;;YAM7D,eAAe;YACb,CAAC,CAAC,IAAI,CAAA;;sBAEE,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC;;iBAE1C;YACH,CAAC,CAAC,OACN;YAEE,iBAAiB;YACf,CAAC,CAAC,IAAI,CAAA;;sBAEE,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;;iBAE5C;YACH,CAAC,CAAC,OACN;;;;;;KAML,CAAC;IACJ,CAAC;IAES,cAAc;QACtB,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,KAAK,MAAM;YACjD,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,QAAQ,EAAE,IAAI,CAAC,WAAW;YAC1B,SAAS,EACP,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,EAAE,UAAU,KAAK,MAAM;YACjE,QAAQ,EAAE,IAAI,CAAC,WAAW;YAC1B,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;QAEF,OAAO,IAAI,CAAA;kBACG,OAAO,CAAC,KAAK,CAAC;UACtB,IAAI,CAAC,aAAa,EAAE;;;;;KAKzB,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,IAAiB;QAC1C,OAAO,IAAI,CAAA,eAAe,IAAI,mBAAmB,IAAI,mBAAmB,CAAC;IAC3E,CAAC;IAEkB,MAAM;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;QAE/C,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;YACvB,CAAC,CAAC,IAAI,CAAA;;mBAEO,OAAO,CAAC;gBACb,MAAM,EAAE,IAAI;gBACZ,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,cAAc,CAAC;gBAC/D,gBAAgB,EACd,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;gBACnD,gBAAgB,EACd,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;aACpD,CAAC;;;sBAGQ,QAAQ;4BACF,IAAI,CAAC,kBAAkB;8BACrB,IAAI,CAAC,kBAAkB;yBAC5B,IAAI,CAAC,aAAa;4BACf,IAAI,CAAC,gBAAgB;+BAClB,IAAI,CAAC,mBAAmB;;cAEzC,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;cACxD,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;cACjC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;;SAEtC,CAAC;IACR,CAAC;;AA3ekB;IADlB,KAAK,CAAC,2BAA2B,CAAC,OAAO,CAAC;0DACuB;AAG3D;IADN,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;sDACI;AAG1B;IADP,KAAK,EAAE;qDACoB;AAGpB;IADP,KAAK,EAAE;qDACoB;AAwBrB;IAFN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;IACjD,eAAe,CAAC,gBAAgB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;iDAC9C;AAcZ;IAFN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;IACjD,eAAe,CAAC,gBAAgB,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;iDAC9C;AASZ;IAFN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;IAClD,eAAe,CAAC,gBAAgB,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;kDAC7B;AAS/B;IAFN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;IAClD,eAAe,CAAC,gBAAgB,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;kDAC7B;AAoB/B;IAJN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC1C,eAAe,CAA4B;QAC1C,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,iBAAiB,EAAE;KAClE,CAAC;mDACuB;AAUlB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;uDAC3C;AAUtB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DAC3C;AAU1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDAC3C;AAexB;IAPN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,CAA2B;QACzC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;QACzC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;YAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtC,CAAC;KACF,CAAC;kDACmB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport {\n setTransitionName,\n startViewTransition,\n} from '#animations/view-transition.js';\nimport {\n type TileManagerContext,\n tileManagerContext,\n} from '#internals/context.js';\nimport { createAsyncContext } from '#internals/controllers/async-consumer.js';\nimport {\n addDragController,\n type DragCallbackParameters,\n} from '#internals/controllers/drag.js';\nimport { addFullscreenController } from '#internals/controllers/fullscreen.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport {\n coercedProperty,\n type CoercedPropertyConfig,\n} from '#internals/decorators/coerced-property.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isLTR } from '#internals/utils/dom.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcDividerComponent from '../divider/divider.js';\nimport IgcResizeContainerComponent from '../resize-container/resize-container.js';\nimport type { ResizeCallbackParams } from '../resize-container/types.js';\nimport type { TileManagerResizeMode } from '../types.js';\nimport { createTileDragStack, swapTiles } from './position.js';\nimport { createTileResizeState } from './resize-state.js';\nimport { styles as shared } from './themes/shared/tile/tile.common.css.js';\nimport { styles } from './themes/tile.base.css.js';\nimport { all } from './themes/tile.js';\nimport { createTileDragGhost, createTileGhost } from './tile-ghost-util.js';\nimport type IgcTileManagerComponent from './tile-manager.js';\n\nexport interface IgcTileChangeStateEventArgs {\n tile: IgcTileComponent;\n state: boolean;\n}\n\ntype AdornerType = 'side' | 'corner' | 'bottom';\n\nexport interface IgcTileComponentEventMap {\n igcTileFullscreen: CustomEvent<IgcTileChangeStateEventArgs>;\n igcTileMaximize: CustomEvent<IgcTileChangeStateEventArgs>;\n igcTileDragStart: CustomEvent<IgcTileComponent>;\n igcTileDragEnd: CustomEvent<IgcTileComponent>;\n igcTileDragCancel: CustomEvent<IgcTileComponent>;\n igcTileResizeStart: CustomEvent<IgcTileComponent>;\n igcTileResizeEnd: CustomEvent<IgcTileComponent>;\n igcTileResizeCancel: CustomEvent<IgcTileComponent>;\n}\n\nconst nextId = createIdGenerator('tile');\nconst Slots = setSlots(\n 'title',\n 'maximize-action',\n 'fullscreen-action',\n 'actions',\n 'side-adorner',\n 'corner-adorner',\n 'bottom-adorner'\n);\n\n/**\n * The tile component is used within the tile manager as a container\n * for displaying various types of information.\n *\n * @element igc-tile\n *\n * @fires igcTileFullscreen - Fired when tile the fullscreen state changes.\n * @fires igcTileMaximize - Fired when tile the maximize state changes.\n * @fires igcTileDragStart - Fired when a drag operation on a tile is about to begin. Cancelable.\n * @fires igcTileDragEnd - Fired when a drag operation with a tile is successfully completed.\n * @fires igcTileDragCancel - Fired when a tile drag operation is canceled by the user.\n * @fires igcTileResizeStart - Fired when a resize operation on a tile is about to begin. Cancelable.\n * @fires igcTileResizeEnd - Fired when a resize operation on a tile is successfully completed.\n * @fires igcTileResizeCancel - Fired when a resize operation on a tile is canceled by the user.\n *\n * @slot - Default slot for the tile's content.\n * @slot title - Renders the title of the tile header.\n * @slot maximize-action - Renders the maximize action element of the tile header.\n * @slot fullscreen-action - Renders the fullscreen action element of the tile header.\n * @slot actions - Renders items after the default actions in the tile header.\n * @slot side-adorner - Renders the side resize handle of the tile.\n * @slot corner-adorner - Renders the corner resize handle of the tile.\n * @slot bottom-adorner - Renders the bottom resize handle of the tile.\n *\n * @csspart base - The wrapper for the entire tile content, header and content.\n * @csspart header - The container for the tile header, including title and actions.\n * @csspart title - The title container of the tile.\n * @csspart actions - The actions container of the tile header.\n * @csspart content-container - The container wrapping the tile’s main content.\n * @csspart trigger-side - The part for the side adorner of the encapsulated resize element in the tile.\n * @csspart trigger - The part for the corner adorner of the encapsulated resize element in the tile.\n * @csspart trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile.\n */\nexport default class IgcTileComponent extends EventEmitterMixin<\n IgcTileComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-tile';\n public static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcTileComponent,\n IgcIconButtonComponent,\n IgcDividerComponent,\n IgcResizeContainerComponent\n );\n }\n\n private readonly _slots = addSlotController(this, { slots: Slots });\n\n private readonly _dragController = addDragController(this, {\n skip: this._skipDrag,\n matchTarget: this._match,\n ghost: this._createDragGhost,\n start: this._handleDragStart,\n over: this._handleDragOver,\n end: this._handleDragEnd,\n cancel: this._handleDragCancel,\n });\n\n private readonly _fullscreenController = addFullscreenController(this, {\n enter: this._emitFullScreenEvent,\n exit: this._emitFullScreenEvent,\n });\n\n private readonly _resizeState = createTileResizeState();\n private readonly _dragStack = createTileDragStack();\n\n /** Shared config for the span properties - a value below 1 is coerced to 1. */\n private static _spanVariable(\n name: string\n ): CoercedPropertyConfig<number, IgcTileComponent> {\n return {\n transform: ({ value }) => Math.max(1, asNumber(value)),\n onChange: ({ value, host }) => {\n host.style.setProperty(name, value.toString());\n },\n };\n }\n\n /** Shared config for the start properties - a non-positive value removes the explicit placement. */\n private static _startVariable(\n name: string\n ): CoercedPropertyConfig<number | null, IgcTileComponent> {\n return {\n transform: ({ value }) => Math.max(0, asNumber(value)) || null,\n onChange: ({ value, host }) => {\n host.style.setProperty(name, value ? value.toString() : null);\n },\n };\n }\n\n // Tile manager context properties and helpers\n\n /**\n * Context consumer callback that sets the updated configuration of the internal drag controller\n * based on the passed tile manager properties.\n */\n private _setDragConfiguration = ({\n instance: { dragMode },\n }: TileManagerContext) => {\n this._dragController.set({\n enabled: dragMode !== 'none',\n trigger:\n dragMode === 'tile-header' ? () => this._headerRef.value! : undefined,\n });\n };\n\n private readonly _context = createAsyncContext(\n this,\n tileManagerContext,\n this._setDragConfiguration\n );\n\n /** Returns the parent tile manager context. */\n private get _tileManagerCtx(): TileManagerContext | undefined {\n return this._context.value;\n }\n\n private get _tileManager(): IgcTileManagerComponent | undefined {\n return this._tileManagerCtx?.instance;\n }\n\n /** Returns the tile manager internal CSS grid container. */\n private get _cssContainer(): HTMLElement | undefined {\n return this._tileManagerCtx?.grid.value;\n }\n\n /** Returns the tile manager current resize mode. */\n private get _resizeMode(): TileManagerResizeMode {\n return this._tileManager?.resizeMode ?? 'none';\n }\n\n protected readonly _headerRef = createRef<HTMLElement>();\n\n @query(IgcResizeContainerComponent.tagName)\n protected readonly _resizeContainer?: IgcResizeContainerComponent;\n\n @query('[part~=\"base\"]', true)\n public _tileContent!: HTMLElement;\n\n @state()\n private _isDragging = false;\n\n @state()\n private _isResizing = false;\n\n /** Whether to render the resize container based on tile and tile manager configuration. */\n private get _resizeDisabled(): boolean {\n return (\n this.disableResize ||\n this.maximized ||\n this.fullscreen ||\n this._resizeMode === 'none'\n );\n }\n\n /**\n * The number of columns the tile will span.\n *\n * @remarks\n * When setting a value that is less than 1, it will be\n * coerced to 1.\n *\n * @attr col-span\n * @default 1\n */\n @property({ type: Number, attribute: 'col-span' })\n @coercedProperty(IgcTileComponent._spanVariable('--ig-col-span'))\n public colSpan = 1;\n\n /**\n * The number of rows the tile will span.\n *\n * @remarks\n * When setting a value that is less than 1, it will be\n * coerced to 1.\n *\n * @attr row-span\n * @default 1\n */\n @property({ type: Number, attribute: 'row-span' })\n @coercedProperty(IgcTileComponent._spanVariable('--ig-row-span'))\n public rowSpan = 1;\n\n /**\n * The starting column for the tile.\n *\n * @attr col-start\n */\n @property({ type: Number, attribute: 'col-start' })\n @coercedProperty(IgcTileComponent._startVariable('--ig-col-start'))\n public colStart: number | null = null;\n\n /**\n * The starting row for the tile.\n *\n * @attr row-start\n */\n @property({ type: Number, attribute: 'row-start' })\n @coercedProperty(IgcTileComponent._startVariable('--ig-row-start'))\n public rowStart: number | null = null;\n\n /**\n * Indicates whether the tile occupies the whole screen.\n *\n * @property\n */\n public get fullscreen(): boolean {\n return this._fullscreenController.fullscreen;\n }\n\n /**\n * Indicates whether the tile occupies all available space within the layout.\n *\n * @attr maximized\n */\n @property({ type: Boolean, reflect: true })\n @coercedProperty<boolean, IgcTileComponent>({\n onChange: ({ host }) => host._tileManagerCtx?.setMaximizedState(),\n })\n public maximized = false;\n\n /**\n * Indicates whether to disable tile resize behavior regardless\n * of its tile manager parent settings.\n *\n * @attr disable-resize\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'disable-resize' })\n public disableResize = false;\n\n /**\n * Whether to disable the rendering of the tile `fullscreen-action` slot and its\n * default fullscreen action button.\n *\n * @attr disable-fullscreen\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'disable-fullscreen' })\n public disableFullscreen = false;\n\n /**\n * Whether to disable the rendering of the tile `maximize-action` slot and its\n * default maximize action button.\n *\n * @attr disable-maximize\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'disable-maximize' })\n public disableMaximize = false;\n\n /**\n * Gets/sets the tile's visual position in the layout.\n * Corresponds to the CSS `order` property.\n *\n * @attr position\n */\n @property({ type: Number })\n @coercedProperty<number, IgcTileComponent>({\n transform: ({ value }) => asNumber(value),\n onChange: ({ value, host }) => {\n host.style.order = value.toString();\n },\n })\n public position = -1;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.id = this.id || nextId();\n if (!this.style.viewTransitionName) {\n setTransitionName(this, `tile-transition-${this.id}`);\n }\n }\n\n private _setDragState(state = true) {\n this._isDragging = state;\n this._tileContent.style.opacity = state ? '0' : '';\n this.style.pointerEvents = state ? 'none' : '';\n this.part.toggle('dragging', state);\n }\n\n private _handleDragStart() {\n if (!this._emitTileDragStart()) {\n return false;\n }\n\n this._setDragState();\n this._dragStack.push(this);\n return true;\n }\n\n private _handleDragOver({ event, state }: DragCallbackParameters): void {\n const match = state.element as IgcTileComponent;\n\n if (this._dragStack.peek() === match) {\n if (this._shouldSwap(event, state, match)) {\n this._dragStack.pop();\n this._dragStack.push(match);\n this._performSwap(match);\n }\n return;\n }\n\n this._dragStack.push(match);\n this._performSwap(match);\n }\n\n private _handleDragCancel() {\n startViewTransition(() => {\n this._dragStack.restore();\n this._dragStack.reset();\n });\n\n this._dragController.dispose();\n this._setDragState(false);\n this.emitEvent('igcTileDragCancel', { detail: this });\n }\n\n private _handleDragEnd() {\n this._setDragState(false);\n this._dragStack.reset();\n this.emitEvent('igcTileDragEnd', { detail: this });\n }\n\n private _performSwap(match: IgcTileComponent): void {\n startViewTransition(() => swapTiles(this, match));\n }\n\n private _shouldSwap(\n { clientX, clientY }: PointerEvent,\n state: DragCallbackParameters['state'],\n match: IgcTileComponent\n ): boolean {\n const LTR = isLTR(this);\n const direction = state.pointerState.direction;\n\n const { left, top, width, height } = match.getBoundingClientRect();\n const relativeX = (clientX - left) / width;\n const relativeY = (clientY - top) / height;\n\n switch (direction) {\n case 'start':\n return (\n this.position > match.position &&\n (LTR ? relativeX <= 0.25 : relativeX >= 0.75)\n );\n case 'end':\n return (\n this.position < match.position &&\n (LTR ? relativeX >= 0.75 : relativeX <= 0.25)\n );\n case 'top':\n return this.position > match.position && relativeY <= 0.25;\n case 'bottom':\n return this.position < match.position && relativeY >= 0.75;\n default:\n return false;\n }\n }\n\n private _skipDrag(event: PointerEvent): boolean {\n if (this.maximized || this.fullscreen) {\n return true;\n }\n\n return Boolean(\n getElementFromPath(\n (e) => e.matches('[part*=trigger]') || e.matches('#tile-actions'),\n event\n )\n );\n }\n\n private _match(element: Element): element is IgcTileComponent {\n return element !== this && IgcTileComponent.tagName === element.localName;\n }\n\n private _createDragGhost(): IgcTileComponent {\n return createTileDragGhost(this);\n }\n\n private _createResizeGhost = (): HTMLElement => {\n return createTileGhost(this);\n };\n\n private _setResizeState(state = true) {\n this._isResizing = state;\n this.style.zIndex = state ? '1' : '';\n this.part.toggle('resizing', state);\n }\n\n private _handleResizeStart(event: CustomEvent<ResizeCallbackParams>) {\n if (!this._emitTileResizeStart()) {\n event.preventDefault();\n return;\n }\n\n this._resizeState.updateState(\n event.detail.state.initial,\n this,\n this._cssContainer!\n );\n this._setResizeState();\n }\n\n private _handleResize({\n detail: { state },\n }: CustomEvent<ResizeCallbackParams>) {\n const trigger = state.trigger!;\n\n const isWidthResize = trigger.matches('[part*=\"side\"], [part=\"trigger\"]');\n const isHeightResize = trigger.matches(\n '[part*=\"bottom\"], [part=\"trigger\"]'\n );\n\n if (isWidthResize) {\n state.current.width = this._resizeState.calculateSnappedWidth(state);\n }\n\n if (isHeightResize) {\n state.current.height = this._resizeState.calculateSnappedHeight(state);\n }\n }\n\n private _handleResizeEnd({\n detail: { state },\n }: CustomEvent<ResizeCallbackParams>) {\n const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(\n state.current\n );\n\n state.commit = async () => {\n await startViewTransition(() => {\n this.colSpan = colSpan;\n this.rowSpan = rowSpan;\n }).updateCallbackDone;\n\n this._setResizeState(false);\n this.emitEvent('igcTileResizeEnd', { detail: this });\n };\n }\n\n private _handleResizeCancel() {\n this._setResizeState(false);\n this.emitEvent('igcTileResizeCancel', { detail: this });\n }\n\n private _handleFullscreen() {\n this._fullscreenController.setState(!this.fullscreen);\n }\n\n private async _handleMaximize() {\n if (!this._emitMaximizedEvent()) {\n return;\n }\n\n this.style.zIndex = '1';\n\n await startViewTransition(() => {\n this.maximized = !this.maximized;\n }).finished;\n\n this.style.zIndex = '';\n }\n\n private _emitFullScreenEvent(state: boolean) {\n this.requestUpdate();\n\n return this.emitEvent('igcTileFullscreen', {\n detail: { tile: this, state },\n cancelable: true,\n });\n }\n\n private _emitMaximizedEvent() {\n return this.emitEvent('igcTileMaximize', {\n detail: { tile: this, state: !this.maximized },\n cancelable: true,\n });\n }\n\n private _emitTileDragStart() {\n return this.emitEvent('igcTileDragStart', {\n detail: this,\n cancelable: true,\n });\n }\n\n private _emitTileResizeStart() {\n return this.emitEvent('igcTileResizeStart', {\n detail: this,\n cancelable: true,\n });\n }\n\n protected _renderDefaultAction(type: 'maximize' | 'fullscreen') {\n const [icon, listener] =\n type === 'fullscreen'\n ? [\n this.fullscreen ? 'fullscreen_exit' : 'fullscreen',\n this._handleFullscreen,\n ]\n : [\n this.maximized ? 'collapse_content' : 'expand_content',\n this._handleMaximize,\n ];\n\n return html`\n <igc-icon-button\n variant=\"flat\"\n collection=\"default\"\n exportparts=\"icon\"\n name=${icon}\n aria-label=${icon}\n @click=${listener}\n ></igc-icon-button>\n `;\n }\n\n protected _renderHeader() {\n const hasTitle = this._slots.hasAssignedElements('title');\n const hasActions = this._slots.hasAssignedElements('actions');\n\n const hideHeader =\n !hasTitle &&\n !hasActions &&\n this.disableMaximize &&\n this.disableFullscreen;\n\n const hasMaximizeSlot = !(this.disableMaximize || this.fullscreen);\n const hasFullscreenSlot = !this.disableFullscreen;\n\n return html`\n <section part=\"header\" ?hidden=${hideHeader} ${ref(this._headerRef)}>\n <header part=\"title\">\n <slot name=\"title\"></slot>\n </header>\n <section id=\"tile-actions\" part=\"actions\">\n ${\n hasMaximizeSlot\n ? html`\n <slot name=\"maximize-action\">\n ${this._renderDefaultAction('maximize')}\n </slot>\n `\n : nothing\n }\n ${\n hasFullscreenSlot\n ? html`\n <slot name=\"fullscreen-action\">\n ${this._renderDefaultAction('fullscreen')}\n </slot>\n `\n : nothing\n }\n\n <slot name=\"actions\"></slot>\n </section>\n </section>\n <igc-divider></igc-divider>\n `;\n }\n\n protected _renderContent() {\n const parts = {\n base: true,\n draggable: this._tileManager?.dragMode !== 'none',\n fullscreen: this.fullscreen,\n dragging: this._isDragging,\n resizable:\n !this.disableResize && this._tileManager?.resizeMode !== 'none',\n resizing: this._isResizing,\n maximized: this.maximized,\n };\n\n return html`\n <div part=${partMap(parts)}>\n ${this._renderHeader()}\n <div part=\"content-container\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _renderAdornerSlot(name: AdornerType) {\n return html`<slot name=\"${name}-adorner\" slot=\"${name}-adorner\"></slot>`;\n }\n\n protected override render() {\n const isActive = this._resizeMode === 'always';\n\n return this._resizeDisabled\n ? this._renderContent()\n : html`\n <igc-resize\n part=${partMap({\n resize: true,\n 'side-adorner': this._slots.hasAssignedElements('side-adorner'),\n 'corner-adorner':\n this._slots.hasAssignedElements('corner-adorner'),\n 'bottom-adorner':\n this._slots.hasAssignedElements('bottom-adorner'),\n })}\n exportparts=\"trigger-side, trigger, trigger-bottom\"\n mode=\"deferred\"\n ?active=${isActive}\n .ghostFactory=${this._createResizeGhost}\n @igcResizeStart=${this._handleResizeStart}\n @igcResize=${this._handleResize}\n @igcResizeEnd=${this._handleResizeEnd}\n @igcResizeCancel=${this._handleResizeCancel}\n >\n ${this._renderContent()} ${this._renderAdornerSlot('side')}\n ${this._renderAdornerSlot('corner')}\n ${this._renderAdornerSlot('bottom')}\n </igc-resize>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-tile': IgcTileComponent;\n }\n}\n"]}
|
|
@@ -29,8 +29,9 @@ declare const IgcTooltipComponent_base: Constructor<import("#internals/mixins/ev
|
|
|
29
29
|
export default class IgcTooltipComponent extends IgcTooltipComponent_base {
|
|
30
30
|
static readonly tagName = "igc-tooltip";
|
|
31
31
|
static styles: import("lit").CSSResult[];
|
|
32
|
+
/** Shared config for the delay properties - a negative delay is no delay. */
|
|
33
|
+
private static readonly _delay;
|
|
32
34
|
static register(): void;
|
|
33
|
-
private readonly _internals;
|
|
34
35
|
private readonly _controller;
|
|
35
36
|
private readonly _containerRef;
|
|
36
37
|
private readonly _player;
|
|
@@ -47,8 +48,6 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
|
|
|
47
48
|
* popover renders; a hide commits it only once its animation is done.
|
|
48
49
|
*/
|
|
49
50
|
private _requestedState;
|
|
50
|
-
private _showDelay;
|
|
51
|
-
private _hideDelay;
|
|
52
51
|
private readonly _popover;
|
|
53
52
|
private readonly _arrowElement;
|
|
54
53
|
private get _arrowOffset();
|
|
@@ -121,16 +120,14 @@ export default class IgcTooltipComponent extends IgcTooltipComponent_base {
|
|
|
121
120
|
* @attr show-delay
|
|
122
121
|
* @default 200
|
|
123
122
|
*/
|
|
124
|
-
|
|
125
|
-
get showDelay(): number;
|
|
123
|
+
showDelay: number;
|
|
126
124
|
/**
|
|
127
125
|
* Specifies the number of milliseconds that should pass before hiding the tooltip.
|
|
128
126
|
*
|
|
129
127
|
* @attr hide-delay
|
|
130
128
|
* @default 300
|
|
131
129
|
*/
|
|
132
|
-
|
|
133
|
-
get hideDelay(): number;
|
|
130
|
+
hideDelay: number;
|
|
134
131
|
/**
|
|
135
132
|
* Specifies plain text as the tooltip content.
|
|
136
133
|
*
|
|
@@ -13,6 +13,7 @@ import { fadeOut } from '#animations/presets/fade/index.js';
|
|
|
13
13
|
import { scaleInCenter } from '#animations/presets/scale/index.js';
|
|
14
14
|
import { addInternalsController } from '#internals/controllers/internals.js';
|
|
15
15
|
import { addSlotController, setSlots } from '#internals/controllers/slot.js';
|
|
16
|
+
import { coercedProperty, } from '#internals/decorators/coerced-property.js';
|
|
16
17
|
import { registerComponent } from '#internals/definitions/register.js';
|
|
17
18
|
import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
|
|
18
19
|
import { partMap } from '#internals/part-map.js';
|
|
@@ -29,6 +30,9 @@ const ARROW_OFFSET = 8;
|
|
|
29
30
|
export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
|
|
30
31
|
static { this.tagName = 'igc-tooltip'; }
|
|
31
32
|
static { this.styles = [styles, shared]; }
|
|
33
|
+
static { this._delay = {
|
|
34
|
+
transform: ({ value }) => Math.max(0, asNumber(value)),
|
|
35
|
+
}; }
|
|
32
36
|
static register() {
|
|
33
37
|
registerComponent(IgcTooltipComponent, IgcPopoverComponent, IgcIconComponent);
|
|
34
38
|
}
|
|
@@ -67,27 +71,8 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
|
|
|
67
71
|
get hideTriggers() {
|
|
68
72
|
return this._controller.hideTriggers;
|
|
69
73
|
}
|
|
70
|
-
set showDelay(value) {
|
|
71
|
-
this._showDelay = Math.max(0, asNumber(value));
|
|
72
|
-
}
|
|
73
|
-
get showDelay() {
|
|
74
|
-
return this._showDelay;
|
|
75
|
-
}
|
|
76
|
-
set hideDelay(value) {
|
|
77
|
-
this._hideDelay = Math.max(0, asNumber(value));
|
|
78
|
-
}
|
|
79
|
-
get hideDelay() {
|
|
80
|
-
return this._hideDelay;
|
|
81
|
-
}
|
|
82
74
|
constructor() {
|
|
83
75
|
super();
|
|
84
|
-
this._internals = addInternalsController(this, {
|
|
85
|
-
initialARIA: {
|
|
86
|
-
role: 'tooltip',
|
|
87
|
-
ariaAtomic: 'true',
|
|
88
|
-
ariaLive: 'polite',
|
|
89
|
-
},
|
|
90
|
-
});
|
|
91
76
|
this._controller = addTooltipController(this, {
|
|
92
77
|
onShow: () => this._showOnInteraction(),
|
|
93
78
|
onHide: () => this._hideOnInteraction(),
|
|
@@ -111,14 +96,22 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
|
|
|
111
96
|
this._transitionId = 0;
|
|
112
97
|
this._animating = false;
|
|
113
98
|
this._requestedState = false;
|
|
114
|
-
this._showDelay = 200;
|
|
115
|
-
this._hideDelay = 300;
|
|
116
99
|
this.withArrow = false;
|
|
117
100
|
this.offset = 6;
|
|
118
101
|
this.placement = 'bottom';
|
|
102
|
+
this.showDelay = 200;
|
|
103
|
+
this.hideDelay = 300;
|
|
119
104
|
this.message = '';
|
|
120
105
|
this.sticky = false;
|
|
121
106
|
addThemingController(this, all);
|
|
107
|
+
addInternalsController(this, {
|
|
108
|
+
initialARIA: {
|
|
109
|
+
role: 'tooltip',
|
|
110
|
+
ariaAtomic: 'true',
|
|
111
|
+
ariaLive: 'polite',
|
|
112
|
+
},
|
|
113
|
+
aria: () => ({ role: this.sticky ? 'status' : 'tooltip' }),
|
|
114
|
+
});
|
|
122
115
|
}
|
|
123
116
|
firstUpdated() {
|
|
124
117
|
if (this.open) {
|
|
@@ -136,9 +129,6 @@ export default class IgcTooltipComponent extends EventEmitterMixin(LitElement) {
|
|
|
136
129
|
if (changedProperties.has('anchor')) {
|
|
137
130
|
this._controller.resolveAnchor(this.anchor);
|
|
138
131
|
}
|
|
139
|
-
if (changedProperties.has('sticky')) {
|
|
140
|
-
this._internals.setARIA({ role: this.sticky ? 'status' : 'tooltip' });
|
|
141
|
-
}
|
|
142
132
|
}
|
|
143
133
|
_emitEvent(name) {
|
|
144
134
|
return this.emitEvent(name, {
|
|
@@ -324,11 +314,13 @@ __decorate([
|
|
|
324
314
|
property({ attribute: 'hide-triggers' })
|
|
325
315
|
], IgcTooltipComponent.prototype, "hideTriggers", null);
|
|
326
316
|
__decorate([
|
|
327
|
-
property({ attribute: 'show-delay', type: Number })
|
|
328
|
-
|
|
317
|
+
property({ attribute: 'show-delay', type: Number }),
|
|
318
|
+
coercedProperty(IgcTooltipComponent._delay)
|
|
319
|
+
], IgcTooltipComponent.prototype, "showDelay", void 0);
|
|
329
320
|
__decorate([
|
|
330
|
-
property({ attribute: 'hide-delay', type: Number })
|
|
331
|
-
|
|
321
|
+
property({ attribute: 'hide-delay', type: Number }),
|
|
322
|
+
coercedProperty(IgcTooltipComponent._delay)
|
|
323
|
+
], IgcTooltipComponent.prototype, "hideDelay", void 0);
|
|
332
324
|
__decorate([
|
|
333
325
|
property()
|
|
334
326
|
], IgcTooltipComponent.prototype, "message", void 0);
|