igniteui-webcomponents 7.2.1 → 7.2.3
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 +21 -0
- package/components/button/button-base.js.map +1 -1
- package/components/button/themes/button/dark/button.bootstrap.css.js +1 -1
- package/components/button/themes/button/dark/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/dark/button.fluent.css.js +1 -1
- package/components/button/themes/button/dark/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/dark/button.indigo.css.js +1 -1
- package/components/button/themes/button/dark/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/dark/button.material.css.js +1 -1
- package/components/button/themes/button/dark/button.material.css.js.map +1 -1
- package/components/button/themes/button/light/button.bootstrap.css.js +1 -1
- package/components/button/themes/button/light/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/light/button.fluent.css.js +1 -1
- package/components/button/themes/button/light/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/light/button.indigo.css.js +1 -1
- package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/light/button.material.css.js +1 -1
- package/components/button/themes/button/light/button.material.css.js.map +1 -1
- package/components/button/themes/button/light/button.shared.css.js +1 -1
- package/components/button/themes/button/light/button.shared.css.js.map +1 -1
- package/components/button-group/themes/dark/button-group.bootstrap.css.js +1 -1
- package/components/button-group/themes/dark/button-group.bootstrap.css.js.map +1 -1
- package/components/button-group/themes/light/button-group.bootstrap.css.js +1 -1
- package/components/button-group/themes/light/button-group.bootstrap.css.js.map +1 -1
- package/components/chat/chat-input.js +1 -1
- package/components/chat/chat-input.js.map +1 -1
- package/components/chat/chat-state.d.ts +2 -1
- package/components/chat/chat-state.js +2 -2
- package/components/chat/chat-state.js.map +1 -1
- package/components/chat/chat.d.ts +3 -9
- package/components/chat/chat.js.map +1 -1
- package/components/chat/message-attachments.d.ts +1 -0
- package/components/chat/message-attachments.js.map +1 -1
- package/components/chat/types.d.ts +16 -2
- package/components/chat/types.js.map +1 -1
- package/components/combo/combo.d.ts +0 -4
- package/components/combo/combo.js.map +1 -1
- package/components/combo/themes/dark/combo.indigo.css.js +1 -1
- package/components/combo/themes/dark/combo.indigo.css.js.map +1 -1
- package/components/combo/types.d.ts +4 -0
- package/components/combo/types.js.map +1 -1
- package/components/common/context.d.ts +2 -0
- package/components/common/context.js.map +1 -1
- package/components/common/controllers/drag.d.ts +10 -0
- package/components/common/controllers/drag.js +11 -0
- package/components/common/controllers/drag.js.map +1 -1
- package/components/common/mixins/alert.d.ts +2 -2
- package/components/common/mixins/alert.js.map +1 -1
- package/components/common/mixins/combo-box.js.map +1 -1
- package/components/date-range-picker/date-range-input.d.ts +9 -3
- package/components/date-range-picker/date-range-input.js +4 -7
- package/components/date-range-picker/date-range-input.js.map +1 -1
- package/components/date-range-picker/date-range-mask-parser.d.ts +11 -2
- package/components/date-range-picker/date-range-mask-parser.js.map +1 -1
- package/components/date-time-input/date-part.js.map +1 -1
- package/components/date-time-input/date-time-input.base.d.ts +1 -6
- package/components/date-time-input/date-time-input.base.js +1 -2
- package/components/date-time-input/date-time-input.base.js.map +1 -1
- package/components/date-time-input/date-time-input.d.ts +9 -3
- package/components/date-time-input/date-time-input.js +3 -2
- package/components/date-time-input/date-time-input.js.map +1 -1
- package/components/dialog/themes/dark/dialog.indigo.css.js +1 -1
- package/components/dialog/themes/dark/dialog.indigo.css.js.map +1 -1
- package/components/dropdown/themes/dark/dropdown.indigo.css.js +1 -1
- package/components/dropdown/themes/dark/dropdown.indigo.css.js.map +1 -1
- package/components/expansion-panel/themes/expansion-panel.base.css.js +1 -1
- package/components/expansion-panel/themes/expansion-panel.base.css.js.map +1 -1
- package/components/highlight/service.d.ts +2 -2
- package/components/highlight/service.js.map +1 -1
- package/components/input/input-base.js.map +1 -1
- package/components/mask-input/mask-input.js.map +1 -1
- package/components/popover/popover.d.ts +10 -1
- package/components/popover/popover.js +31 -14
- package/components/popover/popover.js.map +1 -1
- package/components/popover/themes/light/popover.base.css.js +1 -1
- package/components/popover/themes/light/popover.base.css.js.map +1 -1
- package/components/select/themes/dark/select.indigo.css.js +1 -1
- package/components/select/themes/dark/select.indigo.css.js.map +1 -1
- package/components/snackbar/themes/dark/snackbar.indigo.css.js +1 -1
- package/components/snackbar/themes/dark/snackbar.indigo.css.js.map +1 -1
- package/components/splitter/types.js.map +1 -1
- package/components/tile-manager/tile-manager.d.ts +11 -0
- package/components/tile-manager/tile-manager.js +15 -0
- package/components/tile-manager/tile-manager.js.map +1 -1
- package/components/tile-manager/tile.js +1 -1
- package/components/tile-manager/tile.js.map +1 -1
- package/components/toast/themes/dark/toast.indigo.css.js +1 -1
- package/components/toast/themes/dark/toast.indigo.css.js.map +1 -1
- package/components/tooltip/themes/dark/tooltip.indigo.css.js +1 -1
- package/components/tooltip/themes/dark/tooltip.indigo.css.js.map +1 -1
- package/components/tree/tree.js.map +1 -1
- package/components/types.d.ts +1 -0
- package/components/types.js.map +1 -1
- package/custom-elements.json +310 -582
- package/igniteui-webcomponents.css-data.json +1 -1
- package/igniteui-webcomponents.html-data.json +1 -1
- package/index.d.ts +7 -5
- package/index.js +3 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/skills/igniteui-wc-choose-components/SKILL.md +122 -160
- package/skills/igniteui-wc-customize-component-theme/SKILL.md +83 -311
- package/skills/igniteui-wc-customize-component-theme/references/mcp-setup.md +69 -0
- package/skills/igniteui-wc-generate-from-image-design/SKILL.md +4 -1
- package/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md +60 -61
- package/skills/igniteui-wc-generate-from-image-design/references/gotchas.md +15 -11
- package/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md +446 -0
- package/skills/igniteui-wc-optimize-bundle-size/SKILL.md +23 -274
- package/themes/dark/bootstrap.css +1 -1
- package/themes/dark/fluent.css +1 -1
- package/themes/dark/indigo.css +1 -1
- package/themes/dark/material.css +1 -1
- package/themes/light/bootstrap.css +1 -1
- package/themes/light/fluent.css +1 -1
- package/themes/light/indigo.css +1 -1
- package/themes/light/material.css +1 -1
- package/web-types.json +2 -2
|
@@ -9,11 +9,24 @@ import { html, LitElement } from 'lit';
|
|
|
9
9
|
import { property, query } from 'lit/decorators.js';
|
|
10
10
|
import { addSlotController, setSlots, } from '../common/controllers/slot.js';
|
|
11
11
|
import { registerComponent } from '../common/definitions/register.js';
|
|
12
|
-
import { first, getElementByIdFromRoot, isString, roundByDPR, setStyles, } from '../common/util.js';
|
|
12
|
+
import { first, getElementByIdFromRoot, getRoot, isString, roundByDPR, setStyles, } from '../common/util.js';
|
|
13
13
|
import { styles } from './themes/light/popover.base.css.js';
|
|
14
|
+
function hasStickyAncestor(element) {
|
|
15
|
+
let node = element;
|
|
16
|
+
while (node) {
|
|
17
|
+
if (getComputedStyle(node).position === 'sticky') {
|
|
18
|
+
return true;
|
|
19
|
+
}
|
|
20
|
+
const root = getRoot(node);
|
|
21
|
+
node =
|
|
22
|
+
node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
|
|
23
|
+
}
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
14
26
|
export default class IgcPopoverComponent extends LitElement {
|
|
15
27
|
constructor() {
|
|
16
28
|
super(...arguments);
|
|
29
|
+
this._strategy = 'absolute';
|
|
17
30
|
this._slots = addSlotController(this, {
|
|
18
31
|
slots: setSlots('anchor'),
|
|
19
32
|
onChange: this._handleSlotChange,
|
|
@@ -41,18 +54,22 @@ export default class IgcPopoverComponent extends LitElement {
|
|
|
41
54
|
registerComponent(IgcPopoverComponent);
|
|
42
55
|
}
|
|
43
56
|
update(properties) {
|
|
57
|
+
let targetChanged = false;
|
|
44
58
|
if (properties.has('anchor')) {
|
|
45
59
|
const target = isString(this.anchor)
|
|
46
60
|
? getElementByIdFromRoot(this, this.anchor)
|
|
47
61
|
: this.anchor;
|
|
48
62
|
if (target) {
|
|
49
63
|
this._target = target;
|
|
64
|
+
targetChanged = true;
|
|
50
65
|
}
|
|
51
66
|
}
|
|
52
67
|
if (this.hasUpdated && properties.has('open')) {
|
|
53
68
|
this._setOpenState(this.open);
|
|
54
69
|
}
|
|
55
|
-
this.
|
|
70
|
+
else if (this.hasUpdated && this.open) {
|
|
71
|
+
targetChanged ? this._resetAutoUpdate() : this._updatePosition();
|
|
72
|
+
}
|
|
56
73
|
super.update(properties);
|
|
57
74
|
}
|
|
58
75
|
connectedCallback() {
|
|
@@ -74,7 +91,9 @@ export default class IgcPopoverComponent extends LitElement {
|
|
|
74
91
|
return;
|
|
75
92
|
}
|
|
76
93
|
this._target = possibleTarget;
|
|
77
|
-
this.
|
|
94
|
+
if (this.open) {
|
|
95
|
+
this._resetAutoUpdate();
|
|
96
|
+
}
|
|
78
97
|
}
|
|
79
98
|
_setOpenState(state) {
|
|
80
99
|
state ? this._setDispose() : this._clearDispose();
|
|
@@ -90,20 +109,16 @@ export default class IgcPopoverComponent extends LitElement {
|
|
|
90
109
|
if (!this._target) {
|
|
91
110
|
return;
|
|
92
111
|
}
|
|
112
|
+
this._strategy = hasStickyAncestor(this._target) ? 'fixed' : 'absolute';
|
|
93
113
|
this._dispose = autoUpdate(this._target, this._container, this._updatePosition.bind(this));
|
|
94
114
|
}
|
|
95
115
|
_clearDispose() {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
this._dispose = undefined;
|
|
99
|
-
resolve();
|
|
100
|
-
});
|
|
116
|
+
this._dispose?.();
|
|
117
|
+
this._dispose = undefined;
|
|
101
118
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
this._setDispose();
|
|
106
|
-
}
|
|
119
|
+
_resetAutoUpdate() {
|
|
120
|
+
this._clearDispose();
|
|
121
|
+
this._setDispose();
|
|
107
122
|
}
|
|
108
123
|
_createMiddleware() {
|
|
109
124
|
const middleware = [];
|
|
@@ -140,12 +155,14 @@ export default class IgcPopoverComponent extends LitElement {
|
|
|
140
155
|
if (!(this.open && this._target)) {
|
|
141
156
|
return;
|
|
142
157
|
}
|
|
158
|
+
const strategy = this._strategy;
|
|
143
159
|
const { x, y, middlewareData, placement } = await computePosition(this._target, this._container, {
|
|
144
160
|
placement: this.placement ?? 'bottom-start',
|
|
145
161
|
middleware: this._createMiddleware(),
|
|
146
|
-
strategy
|
|
162
|
+
strategy,
|
|
147
163
|
});
|
|
148
164
|
setStyles(this._container, {
|
|
165
|
+
position: strategy,
|
|
149
166
|
left: '0',
|
|
150
167
|
top: '0',
|
|
151
168
|
transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n inline,\n limitShift,\n type Middleware,\n type MiddlewareData,\n offset,\n type Placement,\n shift,\n size,\n} from '@floating-ui/dom';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport {\n addSlotController,\n type SlotChangeCallbackParameters,\n setSlots,\n} from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport {\n first,\n getElementByIdFromRoot,\n isString,\n roundByDPR,\n setStyles,\n} from '../common/util.js';\nimport { styles } from './themes/light/popover.base.css.js';\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type PopoverPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\n/* blazorSuppress */\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n *\n * @csspart container - The container wrapping the slotted content in the popover.\n */\nexport default class IgcPopoverComponent extends LitElement {\n public static readonly tagName = 'igc-popover';\n public static override styles = styles;\n\n private static _oppositeArrowSide = new Map(\n Object.entries({\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n })\n );\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcPopoverComponent);\n }\n\n //#region Internal properties and state\n\n private _dispose?: ReturnType<typeof autoUpdate>;\n private _target?: Element;\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots('anchor'),\n onChange: this._handleSlotChange,\n });\n\n @query('#container', true)\n private readonly _container!: HTMLElement;\n\n //#endregion\n\n //#region Public attributes and properties\n\n /**\n * Pass an IDREF or an DOM element reference to use as the\n * anchor target for the floating element.\n */\n @property()\n public anchor?: Element | string;\n\n /**\n * Element to render as an \"arrow\" element for the current popover.\n */\n @property({ attribute: false })\n public arrow: HTMLElement | null = null;\n\n /** Additional offset to apply to the arrow element if enabled. */\n @property({ type: Number, attribute: 'arrow-offset' })\n public arrowOffset = 0;\n\n /**\n * Improves positioning for inline reference elements that span over multiple lines.\n * Useful for tooltips or similar components.\n */\n @property({ type: Boolean, reflect: true })\n public inline = false;\n\n /**\n * When enabled this changes the placement of the floating element in order to keep it\n * in view along the main axis.\n */\n @property({ type: Boolean, reflect: true })\n public flip = false;\n\n /**\n * Placement modifier which translates the floating element along the main axis.\n */\n @property({ type: Number })\n public offset = 0;\n\n /**\n * The visibility state of the popover component.\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * Where to place the floating element relative to the parent anchor element.\n */\n @property()\n public placement: PopoverPlacement = 'bottom-start';\n\n /**\n * When enabled the floating element will match the width of its parent anchor element.\n */\n @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n public sameWidth = false;\n\n /**\n * When enabled this tries to shift the floating element along the main axis\n * keeping it in view, preventing overflow while maintaining the desired placement.\n */\n @property({ type: Boolean, reflect: true })\n public shift = false;\n\n /**\n * Virtual padding for the resolved overflow detection offsets in pixels.\n */\n @property({ type: Number, attribute: 'shift-padding' })\n public shiftPadding = 0;\n\n //#endregion\n\n //#region Life-cycle hooks\n\n protected override update(properties: PropertyValues<this>): void {\n if (properties.has('anchor')) {\n const target = isString(this.anchor)\n ? getElementByIdFromRoot(this, this.anchor)\n : this.anchor;\n\n if (target) {\n this._target = target;\n }\n }\n\n if (this.hasUpdated && properties.has('open')) {\n this._setOpenState(this.open);\n }\n\n this._updateState();\n super.update(properties);\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.updateComplete.then(() => {\n this._setOpenState(this.open);\n });\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._setOpenState(false);\n }\n\n //#endregion\n\n private _handleSlotChange({\n isDefault,\n }: SlotChangeCallbackParameters<unknown>): void {\n if (isDefault) {\n return;\n }\n\n const possibleTarget = first(\n this._slots.getAssignedElements('anchor', { flatten: true })\n );\n\n if (this.anchor || !possibleTarget) {\n return;\n }\n\n this._target = possibleTarget;\n this._updateState();\n }\n\n //#region Internal open state API\n private _setOpenState(state: boolean): void {\n state ? this._setDispose() : this._clearDispose();\n this._setPopoverState(state);\n }\n\n private _setPopoverState(open: boolean): void {\n if (!this._target) {\n return;\n }\n open ? this._container?.showPopover() : this._container?.hidePopover();\n }\n\n private _setDispose(): void {\n if (!this._target) {\n return;\n }\n\n this._dispose = autoUpdate(\n this._target,\n this._container,\n this._updatePosition.bind(this)\n );\n }\n\n private _clearDispose(): Promise<void> {\n return new Promise((resolve) => {\n this._dispose?.();\n this._dispose = undefined;\n resolve();\n });\n }\n\n private async _updateState(): Promise<void> {\n if (this.open) {\n await this._clearDispose();\n this._setDispose();\n }\n }\n\n //#endregion\n\n //#region Internal position API\n\n private _createMiddleware(): Middleware[] {\n const middleware: Middleware[] = [];\n const container = this._container;\n\n if (this.offset) {\n middleware.push(offset(this.offset));\n }\n\n if (this.inline) {\n middleware.push(inline());\n }\n\n if (this.shift) {\n middleware.push(\n shift({\n padding: this.shiftPadding,\n limiter: limitShift(),\n })\n );\n }\n\n if (this.arrow) {\n middleware.push(arrow({ element: this.arrow }));\n }\n\n if (this.flip) {\n middleware.push(flip());\n }\n\n if (this.sameWidth) {\n middleware.push(\n size({\n apply: ({ rects }) =>\n setStyles(container, { width: `${rects.reference.width}px` }),\n })\n );\n } else {\n setStyles(container, { width: '' });\n }\n\n return middleware;\n }\n\n private async _updatePosition(): Promise<void> {\n if (!(this.open && this._target)) {\n return;\n }\n\n const { x, y, middlewareData, placement } = await computePosition(\n this._target,\n this._container,\n {\n placement: this.placement ?? 'bottom-start',\n middleware: this._createMiddleware(),\n strategy: 'absolute',\n }\n );\n\n setStyles(this._container, {\n left: '0',\n top: '0',\n transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n });\n\n this._updateArrowPosition(placement, middlewareData);\n }\n\n private _updateArrowPosition(placement: Placement, data: MiddlewareData) {\n if (!(data.arrow && this.arrow)) {\n return;\n }\n\n const { x, y } = data.arrow;\n const arrow = this.arrow;\n const offset = this.arrowOffset;\n\n // The current placement of the popover along the x/y axis\n const currentPlacement = first(placement.split('-'));\n\n // The opposite side where the arrow element should render based on the `currentPlacement`\n const staticSide =\n IgcPopoverComponent._oppositeArrowSide.get(currentPlacement)!;\n\n arrow.part = currentPlacement;\n\n setStyles(arrow, {\n left: x != null ? `${roundByDPR(x + offset)}px` : '',\n top: y != null ? `${roundByDPR(y + offset)}px` : '',\n [staticSide]: '-4px',\n });\n }\n\n //#endregion\n\n protected override render() {\n return html`\n <slot name=\"anchor\"></slot>\n <div id=\"container\" part=\"container\" popover=\"manual\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-popover': IgcPopoverComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n inline,\n limitShift,\n type Middleware,\n type MiddlewareData,\n offset,\n type Placement,\n shift,\n size,\n} from '@floating-ui/dom';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport {\n addSlotController,\n type SlotChangeCallbackParameters,\n setSlots,\n} from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport {\n first,\n getElementByIdFromRoot,\n getRoot,\n isString,\n roundByDPR,\n setStyles,\n} from '../common/util.js';\nimport { styles } from './themes/light/popover.base.css.js';\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type PopoverPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n\n/**\n * Walks up the DOM tree of the given element, crossing shadow boundaries, and\n * returns whether any ancestor is positioned as `sticky`.\n */\nfunction hasStickyAncestor(element: Element): boolean {\n let node: Element | null = element;\n\n while (node) {\n if (getComputedStyle(node).position === 'sticky') {\n return true;\n }\n\n const root = getRoot(node);\n node =\n node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n }\n\n return false;\n}\n\n/* blazorSuppress */\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n *\n * @csspart container - The container wrapping the slotted content in the popover.\n */\nexport default class IgcPopoverComponent extends LitElement {\n public static readonly tagName = 'igc-popover';\n public static override styles = styles;\n\n private static _oppositeArrowSide = new Map(\n Object.entries({\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n })\n );\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcPopoverComponent);\n }\n\n //#region Internal properties and state\n\n private _dispose?: ReturnType<typeof autoUpdate>;\n private _target?: Element;\n\n /**\n * The positioning strategy resolved when the popover is opened. The `fixed`\n * strategy is used when the anchor has a `position: sticky` ancestor, otherwise\n * the default `absolute` strategy is used. Cached here to avoid repeated DOM\n * traversals and style reflows on every scroll/resize reposition.\n *\n * Also, time to migrate to CSS Anchor positioning!!!\n */\n private _strategy: 'absolute' | 'fixed' = 'absolute';\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots('anchor'),\n onChange: this._handleSlotChange,\n });\n\n @query('#container', true)\n private readonly _container!: HTMLElement;\n\n //#endregion\n\n //#region Public attributes and properties\n\n /**\n * Pass an IDREF or an DOM element reference to use as the\n * anchor target for the floating element.\n */\n @property()\n public anchor?: Element | string;\n\n /**\n * Element to render as an \"arrow\" element for the current popover.\n */\n @property({ attribute: false })\n public arrow: HTMLElement | null = null;\n\n /** Additional offset to apply to the arrow element if enabled. */\n @property({ type: Number, attribute: 'arrow-offset' })\n public arrowOffset = 0;\n\n /**\n * Improves positioning for inline reference elements that span over multiple lines.\n * Useful for tooltips or similar components.\n */\n @property({ type: Boolean, reflect: true })\n public inline = false;\n\n /**\n * When enabled this changes the placement of the floating element in order to keep it\n * in view along the main axis.\n */\n @property({ type: Boolean, reflect: true })\n public flip = false;\n\n /**\n * Placement modifier which translates the floating element along the main axis.\n */\n @property({ type: Number })\n public offset = 0;\n\n /**\n * The visibility state of the popover component.\n */\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * Where to place the floating element relative to the parent anchor element.\n */\n @property()\n public placement: PopoverPlacement = 'bottom-start';\n\n /**\n * When enabled the floating element will match the width of its parent anchor element.\n */\n @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n public sameWidth = false;\n\n /**\n * When enabled this tries to shift the floating element along the main axis\n * keeping it in view, preventing overflow while maintaining the desired placement.\n */\n @property({ type: Boolean, reflect: true })\n public shift = false;\n\n /**\n * Virtual padding for the resolved overflow detection offsets in pixels.\n */\n @property({ type: Number, attribute: 'shift-padding' })\n public shiftPadding = 0;\n\n //#endregion\n\n //#region Life-cycle hooks\n\n protected override update(properties: PropertyValues<this>): void {\n let targetChanged = false;\n\n if (properties.has('anchor')) {\n const target = isString(this.anchor)\n ? getElementByIdFromRoot(this, this.anchor)\n : this.anchor;\n\n if (target) {\n this._target = target;\n targetChanged = true;\n }\n }\n\n if (this.hasUpdated && properties.has('open')) {\n this._setOpenState(this.open);\n } else if (this.hasUpdated && this.open) {\n targetChanged ? this._resetAutoUpdate() : this._updatePosition();\n }\n\n super.update(properties);\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.updateComplete.then(() => {\n this._setOpenState(this.open);\n });\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._setOpenState(false);\n }\n\n //#endregion\n\n private _handleSlotChange({\n isDefault,\n }: SlotChangeCallbackParameters<unknown>): void {\n if (isDefault) {\n return;\n }\n\n const possibleTarget = first(\n this._slots.getAssignedElements('anchor', { flatten: true })\n );\n\n if (this.anchor || !possibleTarget) {\n return;\n }\n\n this._target = possibleTarget;\n\n if (this.open) {\n this._resetAutoUpdate();\n }\n }\n\n //#region Internal open state API\n private _setOpenState(state: boolean): void {\n state ? this._setDispose() : this._clearDispose();\n this._setPopoverState(state);\n }\n\n private _setPopoverState(open: boolean): void {\n if (!this._target) {\n return;\n }\n open ? this._container?.showPopover() : this._container?.hidePopover();\n }\n\n private _setDispose(): void {\n if (!this._target) {\n return;\n }\n\n this._strategy = hasStickyAncestor(this._target) ? 'fixed' : 'absolute';\n\n this._dispose = autoUpdate(\n this._target,\n this._container,\n this._updatePosition.bind(this)\n );\n }\n\n private _clearDispose(): void {\n this._dispose?.();\n this._dispose = undefined;\n }\n\n private _resetAutoUpdate(): void {\n this._clearDispose();\n this._setDispose();\n }\n //#endregion\n\n //#region Internal position API\n\n private _createMiddleware(): Middleware[] {\n const middleware: Middleware[] = [];\n const container = this._container;\n\n if (this.offset) {\n middleware.push(offset(this.offset));\n }\n\n if (this.inline) {\n middleware.push(inline());\n }\n\n if (this.shift) {\n middleware.push(\n shift({\n padding: this.shiftPadding,\n limiter: limitShift(),\n })\n );\n }\n\n if (this.arrow) {\n middleware.push(arrow({ element: this.arrow }));\n }\n\n if (this.flip) {\n middleware.push(flip());\n }\n\n if (this.sameWidth) {\n middleware.push(\n size({\n apply: ({ rects }) =>\n setStyles(container, { width: `${rects.reference.width}px` }),\n })\n );\n } else {\n setStyles(container, { width: '' });\n }\n\n return middleware;\n }\n\n private async _updatePosition(): Promise<void> {\n if (!(this.open && this._target)) {\n return;\n }\n\n const strategy = this._strategy;\n\n const { x, y, middlewareData, placement } = await computePosition(\n this._target,\n this._container,\n {\n placement: this.placement ?? 'bottom-start',\n middleware: this._createMiddleware(),\n strategy,\n }\n );\n\n setStyles(this._container, {\n position: strategy,\n left: '0',\n top: '0',\n transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n });\n\n this._updateArrowPosition(placement, middlewareData);\n }\n\n private _updateArrowPosition(placement: Placement, data: MiddlewareData) {\n if (!(data.arrow && this.arrow)) {\n return;\n }\n\n const { x, y } = data.arrow;\n const arrow = this.arrow;\n const offset = this.arrowOffset;\n\n // The current placement of the popover along the x/y axis\n const currentPlacement = first(placement.split('-'));\n\n // The opposite side where the arrow element should render based on the `currentPlacement`\n const staticSide =\n IgcPopoverComponent._oppositeArrowSide.get(currentPlacement)!;\n\n arrow.part = currentPlacement;\n\n setStyles(arrow, {\n left: x != null ? `${roundByDPR(x + offset)}px` : '',\n top: y != null ? `${roundByDPR(y + offset)}px` : '',\n [staticSide]: '-4px',\n });\n }\n\n //#endregion\n\n protected override render() {\n return html`\n <slot name=\"anchor\"></slot>\n <div id=\"container\" part=\"container\" popover=\"manual\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-popover': IgcPopoverComponent;\n }\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{
|
|
2
|
+
export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}`;
|
|
3
3
|
//# sourceMappingURL=popover.base.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wnCAAwnC,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}`;\n "]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{--toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, transparent);--toggle-button-background: var(--ig-select-toggle-button-background, transparent);--toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, transparent);--toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsl(from var(--ig-gray-100-contrast) h s l/0.8));--toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, transparent);--toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsl(from var(--ig-gray-100-contrast) h s l/0.2));--ig-theme: indigo;--ig-theme-variant: dark}:host [part=base]{--elevation: var(--ig-drop-down-elevation, var(--ig-elevation-
|
|
2
|
+
export const styles = css `:host{--toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, transparent);--toggle-button-background: var(--ig-select-toggle-button-background, transparent);--toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, transparent);--toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsl(from var(--ig-gray-100-contrast) h s l/0.8));--toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, transparent);--toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsl(from var(--ig-gray-100-contrast) h s l/0.2));--ig-theme: indigo;--ig-theme-variant: dark}:host [part=base]{--elevation: var(--ig-drop-down-elevation, var(--ig-elevation-3));--background-color: var(--ig-drop-down-background-color, var(--ig-gray-50));--header-text-color: var(--ig-drop-down-header-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.6));--item-text-color: var(--ig-drop-down-item-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--item-icon-color: var(--ig-drop-down-item-icon-color, hsl(from var(--ig-gray-50-contrast) h s l/0.6));--hover-item-background: var(--ig-drop-down-hover-item-background, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--hover-item-text-color: var(--ig-drop-down-hover-item-text-color, var(--ig-gray-50-contrast));--hover-item-icon-color: var(--ig-drop-down-hover-item-icon-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--focused-item-background: var(--ig-drop-down-focused-item-background, transparent);--focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--focused-item-border-color: var(--ig-drop-down-focused-item-border-color, var(--ig-primary-400));--selected-item-background: var(--ig-drop-down-selected-item-background, hsl(from var(--ig-primary-400) h s l/0.3));--disabled-item-background: var(--ig-drop-down-disabled-item-background, transparent);--disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--border-color: var(--ig-drop-down-border-color, var(--ig-gray-100));--border-width: var(--ig-drop-down-border-width, 1px);--border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));--size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-drop-down-default-size, 2);--selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-gray-50-contrast));--selected-item-icon-color: var(--ig-drop-down-selected-item-icon-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsl(from var(--ig-primary-400) h s l/0.5));--selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-gray-50-contrast));--selected-hover-item-icon-color: var(--ig-drop-down-selected-hover-item-icon-color, var(--ig-gray-50-contrast));--selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsl(from var(--ig-primary-400) h s l/0.3));--selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-gray-50-contrast));--ig-theme: indigo;--ig-theme-variant: dark}`;
|
|
3
3
|
//# sourceMappingURL=select.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/dark/select.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,swHAAswH,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, transparent);--toggle-button-background: var(--ig-select-toggle-button-background, transparent);--toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, transparent);--toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsl(from var(--ig-gray-100-contrast) h s l/0.8));--toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, transparent);--toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsl(from var(--ig-gray-100-contrast) h s l/0.2));--ig-theme: indigo;--ig-theme-variant: dark}:host [part=base]{--elevation: var(--ig-drop-down-elevation, var(--ig-elevation-
|
|
1
|
+
{"version":3,"file":"select.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/dark/select.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,swHAAswH,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, transparent);--toggle-button-background: var(--ig-select-toggle-button-background, transparent);--toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, transparent);--toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsl(from var(--ig-gray-100-contrast) h s l/0.8));--toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsl(from var(--ig-gray-100-contrast) h s l/0.6));--toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, transparent);--toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsl(from var(--ig-gray-100-contrast) h s l/0.2));--ig-theme: indigo;--ig-theme-variant: dark}:host [part=base]{--elevation: var(--ig-drop-down-elevation, var(--ig-elevation-3));--background-color: var(--ig-drop-down-background-color, var(--ig-gray-50));--header-text-color: var(--ig-drop-down-header-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.6));--item-text-color: var(--ig-drop-down-item-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--item-icon-color: var(--ig-drop-down-item-icon-color, hsl(from var(--ig-gray-50-contrast) h s l/0.6));--hover-item-background: var(--ig-drop-down-hover-item-background, hsl(from var(--ig-gray-50-contrast) h s l/0.1));--hover-item-text-color: var(--ig-drop-down-hover-item-text-color, var(--ig-gray-50-contrast));--hover-item-icon-color: var(--ig-drop-down-hover-item-icon-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--focused-item-background: var(--ig-drop-down-focused-item-background, transparent);--focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--focused-item-border-color: var(--ig-drop-down-focused-item-border-color, var(--ig-primary-400));--selected-item-background: var(--ig-drop-down-selected-item-background, hsl(from var(--ig-primary-400) h s l/0.3));--disabled-item-background: var(--ig-drop-down-disabled-item-background, transparent);--disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsl(from var(--ig-gray-50-contrast) h s l/0.2));--border-color: var(--ig-drop-down-border-color, var(--ig-gray-100));--border-width: var(--ig-drop-down-border-width, 1px);--border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));--size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-drop-down-default-size, 2);--selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-gray-50-contrast));--selected-item-icon-color: var(--ig-drop-down-selected-item-icon-color, hsl(from var(--ig-gray-50-contrast) h s l/0.8));--selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsl(from var(--ig-primary-400) h s l/0.5));--selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-gray-50-contrast));--selected-hover-item-icon-color: var(--ig-drop-down-selected-hover-item-icon-color, var(--ig-gray-50-contrast));--selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsl(from var(--ig-primary-400) h s l/0.3));--selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-gray-50-contrast));--ig-theme: indigo;--ig-theme-variant: dark}`;\n "]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{--elevation: var(--ig-snackbar-elevation, var(--ig-elevation-
|
|
2
|
+
export const styles = css `:host{--elevation: var(--ig-snackbar-elevation, var(--ig-elevation-10));--background: var(--ig-snackbar-background, var(--ig-gray-300));--text-color: var(--ig-snackbar-text-color, var(--ig-gray-200-contrast));--button-color: var(--ig-snackbar-button-color, var(--ig-gray-200-contrast));--border-radius: var(--ig-snackbar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--ig-theme: indigo;--ig-theme-variant: dark}`;
|
|
3
3
|
//# sourceMappingURL=snackbar.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/dark/snackbar.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,icAAic,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--elevation: var(--ig-snackbar-elevation, var(--ig-elevation-
|
|
1
|
+
{"version":3,"file":"snackbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/dark/snackbar.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,icAAic,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--elevation: var(--ig-snackbar-elevation, var(--ig-elevation-10));--background: var(--ig-snackbar-background, var(--ig-gray-300));--text-color: var(--ig-snackbar-text-color, var(--ig-gray-200-contrast));--button-color: var(--ig-snackbar-button-color, var(--ig-gray-200-contrast));--border-radius: var(--ig-snackbar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));--ig-theme: indigo;--ig-theme-variant: dark}`;\n "]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/splitter/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleInfo } from 'lit/directives/style-map.js';\n\ntype PanePosition = 'start' | 'end';\n\ninterface SplitterPaneState {\n size?: string;\n minSize?: string;\n maxSize?: string;\n savedSize?: string;\n styles: StyleInfo;\n}\n\ninterface PaneResizeSnapshot {\n initialSize: number;\n isPercentageBased: boolean;\n minSizePx?: number;\n maxSizePx?: number;\n}\n\ninterface SplitterResizeState {\n startPane: PaneResizeSnapshot | null;\n endPane: PaneResizeSnapshot | null;\n isDragging: boolean;\n dragStartPosition: { x: number; y: number };\n dragPointerId: number;\n}\n\ninterface IgcSplitterResizeEventArgs {\n /** The current size of the start panel in pixels */\n startPanelSize: number;\n /** The current size of the end panel in pixels */\n endPanelSize: number;\n /** The change in size since the resize operation started (only for igcResizing and igcResizeEnd) */\n delta?: number;\n}\n\n/**\n * @hidden\n * @deprecated use IgcSplitterResizeEventArgs instead\n */\ninterface IgcSplitterResizeEventDetail extends IgcSplitterResizeEventArgs {}\n\ninterface IgcSplitterComponentEventMap {\n igcResizeStart: CustomEvent<IgcSplitterResizeEventArgs>;\n igcResizing: CustomEvent<IgcSplitterResizeEventArgs>;\n igcResizeEnd: CustomEvent<IgcSplitterResizeEventArgs>;\n}\n\nexport type {\n IgcSplitterComponentEventMap,\n IgcSplitterResizeEventArgs,\n IgcSplitterResizeEventDetail,\n PanePosition,\n PaneResizeSnapshot,\n SplitterPaneState,\n SplitterResizeState,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/splitter/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleInfo } from 'lit/directives/style-map.js';\n\ntype PanePosition = 'start' | 'end';\n\ninterface SplitterPaneState {\n size?: string;\n minSize?: string;\n maxSize?: string;\n savedSize?: string;\n styles: StyleInfo;\n}\n\ninterface PaneResizeSnapshot {\n initialSize: number;\n isPercentageBased: boolean;\n minSizePx?: number;\n maxSizePx?: number;\n}\n\ninterface SplitterResizeState {\n startPane: PaneResizeSnapshot | null;\n endPane: PaneResizeSnapshot | null;\n isDragging: boolean;\n dragStartPosition: { x: number; y: number };\n dragPointerId: number;\n}\n\n/* jsonAPIPlainObject */\ninterface IgcSplitterResizeEventArgs {\n /** The current size of the start panel in pixels */\n startPanelSize: number;\n /** The current size of the end panel in pixels */\n endPanelSize: number;\n /** The change in size since the resize operation started (only for igcResizing and igcResizeEnd) */\n delta?: number;\n}\n\n/**\n * @hidden\n * @deprecated use IgcSplitterResizeEventArgs instead\n */\ninterface IgcSplitterResizeEventDetail extends IgcSplitterResizeEventArgs {}\n\ninterface IgcSplitterComponentEventMap {\n igcResizeStart: CustomEvent<IgcSplitterResizeEventArgs>;\n igcResizing: CustomEvent<IgcSplitterResizeEventArgs>;\n igcResizeEnd: CustomEvent<IgcSplitterResizeEventArgs>;\n}\n\nexport type {\n IgcSplitterComponentEventMap,\n IgcSplitterResizeEventArgs,\n IgcSplitterResizeEventDetail,\n PanePosition,\n PaneResizeSnapshot,\n SplitterPaneState,\n SplitterResizeState,\n};\n"]}
|
|
@@ -86,6 +86,17 @@ export default class IgcTileManagerComponent extends LitElement {
|
|
|
86
86
|
protected updated(): void;
|
|
87
87
|
protected firstUpdated(): void;
|
|
88
88
|
private _observerCallback;
|
|
89
|
+
/**
|
|
90
|
+
* Locks/unlocks the grid container height in response to a tile's maximized state changing.
|
|
91
|
+
*
|
|
92
|
+
* @remarks
|
|
93
|
+
* Maximizing a tile removes it from the grid flow (absolute positioning), so it no longer
|
|
94
|
+
* contributes to the grid's intrinsic height. When that tile is the sole contributor to the
|
|
95
|
+
* tallest row track, the container would otherwise collapse to the remaining tiles and cut off
|
|
96
|
+
* the maximized tile's content. Capturing the current height before the layout change keeps the
|
|
97
|
+
* container stable, and it is released once no tile remains maximized.
|
|
98
|
+
*/
|
|
99
|
+
private _setMaximizedState;
|
|
89
100
|
/**
|
|
90
101
|
* Returns the properties of the current tile collections as a JSON payload.
|
|
91
102
|
*
|
|
@@ -34,6 +34,7 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
|
|
|
34
34
|
return {
|
|
35
35
|
instance: this,
|
|
36
36
|
grid: this._grid,
|
|
37
|
+
setMaximizedState: () => this._setMaximizedState(),
|
|
37
38
|
};
|
|
38
39
|
}
|
|
39
40
|
_setManagerContext() {
|
|
@@ -133,6 +134,20 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
|
|
|
133
134
|
}
|
|
134
135
|
this._tilesState.assignTiles();
|
|
135
136
|
}
|
|
137
|
+
_setMaximizedState() {
|
|
138
|
+
const grid = this._grid.value;
|
|
139
|
+
if (grid) {
|
|
140
|
+
if (this.tiles.some((tile) => tile.maximized)) {
|
|
141
|
+
if (!grid.style.minHeight) {
|
|
142
|
+
grid.style.minHeight = `${grid.offsetHeight}px`;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
grid.style.minHeight = '';
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
this.requestUpdate();
|
|
150
|
+
}
|
|
136
151
|
saveLayout() {
|
|
137
152
|
return this._serializer.saveAsJSON();
|
|
138
153
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-manager.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport {\n type TileManagerContext,\n tileManagerContext,\n} from '../common/context.js';\nimport {\n createMutationController,\n type MutationControllerParams,\n} from '../common/controllers/mutation-observer.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { asNumber } from '../common/util.js';\nimport type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';\nimport { createTilesState } from './position.js';\nimport { createSerializer } from './serializer.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/tile-manager.common.css.js';\nimport { styles } from './themes/tile-manager.base.css.js';\nimport IgcTileComponent from './tile.js';\n\n/* blazorAdditionalDependency: IgcTileComponent */\n/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n * @slot - Default slot for the tile manager. Only `igc-tile` elements will be projected inside the CSS grid container.\n *\n * @csspart base - The tile manager CSS Grid container.\n *\n * @cssproperty --column-count - The number of columns for the tile manager. The `column-count` attribute sets this variable.\n * @cssproperty --min-col-width - The minimum size of the columns in the tile-manager. The `min-column-width` attribute sets this variable.\n * @cssproperty --min-row-height - The minimum size of the rows in the tile-manager. The `min-row-height` attribute sets this variable.\n * @cssproperty --grid-gap - The gap size of the underlying CSS grid container. The `gap` attributes sts this variable.\n *\n */\n@shadowOptions({ slotAssignment: 'manual' })\nexport default class IgcTileManagerComponent extends LitElement {\n public static readonly tagName = 'igc-tile-manager';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register() {\n registerComponent(IgcTileManagerComponent, IgcTileComponent);\n }\n\n // #region Internal state\n\n private _internalStyles: StyleInfo = {};\n private _dragMode: TileManagerDragMode = 'none';\n private _resizeMode: TileManagerResizeMode = 'none';\n private _columnCount = 0;\n private _gap?: string;\n private _minColWidth?: string;\n private _minRowHeight?: string;\n\n private _serializer = createSerializer(this);\n private _tilesState = createTilesState(this);\n\n private _grid = createRef<HTMLElement>();\n\n // #endregion\n\n // #region Context helpers\n\n private _context = new ContextProvider(this, {\n context: tileManagerContext,\n initialValue: this._createContext(),\n });\n\n private _createContext(): TileManagerContext {\n return {\n instance: this,\n grid: this._grid,\n };\n }\n\n private _setManagerContext(): void {\n this._context.setValue(this._createContext(), true);\n }\n\n // #endregion\n\n // #region Properties and Attributes\n\n /**\n * Whether resize operations are enabled.\n *\n * @attr resize-mode\n * @default none\n */\n @property({ attribute: 'resize-mode' })\n public set resizeMode(value: TileManagerResizeMode) {\n this._resizeMode = value;\n this._setManagerContext();\n }\n\n public get resizeMode(): TileManagerResizeMode {\n return this._resizeMode;\n }\n\n /**\n * Whether drag and drop operations are enabled.\n *\n * @attr drag-mode\n * @default none\n */\n @property({ attribute: 'drag-mode' })\n public set dragMode(value: TileManagerDragMode) {\n this._dragMode = value;\n this._setManagerContext();\n }\n\n public get dragMode(): TileManagerDragMode {\n return this._dragMode;\n }\n\n /**\n * Sets the number of columns for the tile manager.\n * Setting value <= than zero will trigger a responsive layout.\n *\n * @attr column-count\n * @default 0\n */\n @property({ type: Number, attribute: 'column-count' })\n public set columnCount(value: number) {\n this._columnCount = Math.max(0, asNumber(value));\n Object.assign(this._internalStyles, {\n '--column-count': this._columnCount || undefined,\n });\n }\n\n public get columnCount(): number {\n return this._columnCount;\n }\n\n /**\n * Sets the minimum width for a column unit in the tile manager.\n * @attr min-column-width\n */\n @property({ attribute: 'min-column-width' })\n public set minColumnWidth(value: string | undefined) {\n this._minColWidth = value ?? undefined;\n Object.assign(this._internalStyles, {\n '--min-col-width': this._minColWidth,\n });\n }\n\n public get minColumnWidth(): string | undefined {\n return this._minColWidth;\n }\n\n /**\n * Sets the minimum height for a row unit in the tile manager.\n * @attr min-row-height\n */\n @property({ attribute: 'min-row-height' })\n public set minRowHeight(value: string | undefined) {\n this._minRowHeight = value ?? undefined;\n Object.assign(this._internalStyles, {\n '--min-row-height': this._minRowHeight,\n });\n }\n\n public get minRowHeight(): string | undefined {\n return this._minRowHeight;\n }\n\n /**\n * Sets the gap size between tiles in the tile manager.\n *\n * @attr gap\n */\n @property()\n public set gap(value: string | undefined) {\n this._gap = value ?? undefined;\n Object.assign(this._internalStyles, {\n '--grid-gap': this._gap,\n });\n }\n\n public get gap(): string | undefined {\n return this._gap;\n }\n\n /**\n * Gets the tiles sorted by their position in the layout.\n * @property\n */\n public get tiles() {\n return this._tilesState.tiles;\n }\n\n // #endregion\n\n // #region Internal API\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n createMutationController(this, {\n callback: this._observerCallback,\n filter: [IgcTileComponent.tagName],\n config: {\n childList: true,\n },\n });\n }\n\n protected override updated() {\n this._tilesState.adjustTileGridPosition();\n }\n\n protected override firstUpdated() {\n this._tilesState.assignPositions();\n this._tilesState.assignTiles();\n this._setManagerContext();\n }\n\n private _observerCallback({\n changes: { added, removed },\n }: MutationControllerParams<IgcTileComponent>) {\n const ownAdded = added.filter(\n ({ target }) => target.closest(this.tagName) === this\n );\n const ownRemoved = removed.filter(\n ({ target }) => target.closest(this.tagName) === this\n );\n\n for (const remove of ownRemoved) {\n this._tilesState.remove(remove.node);\n }\n\n for (const added of ownAdded) {\n this._tilesState.add(added.node);\n }\n\n this._tilesState.assignTiles();\n }\n\n // #endregion\n\n // #region Public API\n\n /**\n * Returns the properties of the current tile collections as a JSON payload.\n *\n * @remarks\n * The content of the tiles is not serialized or saved. Only tile properties\n * are serialized.\n */\n public saveLayout(): string {\n return this._serializer.saveAsJSON();\n }\n\n /**\n * Restores a previously serialized state produced by `saveLayout`.\n */\n public loadLayout(data: string): void {\n this._serializer.loadFromJSON(data);\n }\n\n // #endregion\n\n // #region Rendering\n\n protected override render() {\n const parts = {\n base: true,\n 'maximized-tile': this.tiles.some((tile) => tile.maximized),\n };\n\n return html`\n <div\n ${ref(this._grid)}\n style=${styleMap(this._internalStyles)}\n part=${partMap(parts)}\n >\n <slot></slot>\n </div>\n `;\n }\n\n // #endregion\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-tile-manager': IgcTileManagerComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tile-manager.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport {\n type TileManagerContext,\n tileManagerContext,\n} from '../common/context.js';\nimport {\n createMutationController,\n type MutationControllerParams,\n} from '../common/controllers/mutation-observer.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { asNumber } from '../common/util.js';\nimport type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';\nimport { createTilesState } from './position.js';\nimport { createSerializer } from './serializer.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/tile-manager.common.css.js';\nimport { styles } from './themes/tile-manager.base.css.js';\nimport IgcTileComponent from './tile.js';\n\n/* blazorAdditionalDependency: IgcTileComponent */\n/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n * @slot - Default slot for the tile manager. Only `igc-tile` elements will be projected inside the CSS grid container.\n *\n * @csspart base - The tile manager CSS Grid container.\n *\n * @cssproperty --column-count - The number of columns for the tile manager. The `column-count` attribute sets this variable.\n * @cssproperty --min-col-width - The minimum size of the columns in the tile-manager. The `min-column-width` attribute sets this variable.\n * @cssproperty --min-row-height - The minimum size of the rows in the tile-manager. The `min-row-height` attribute sets this variable.\n * @cssproperty --grid-gap - The gap size of the underlying CSS grid container. The `gap` attributes sts this variable.\n *\n */\n@shadowOptions({ slotAssignment: 'manual' })\nexport default class IgcTileManagerComponent extends LitElement {\n public static readonly tagName = 'igc-tile-manager';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register() {\n registerComponent(IgcTileManagerComponent, IgcTileComponent);\n }\n\n // #region Internal state\n\n private _internalStyles: StyleInfo = {};\n private _dragMode: TileManagerDragMode = 'none';\n private _resizeMode: TileManagerResizeMode = 'none';\n private _columnCount = 0;\n private _gap?: string;\n private _minColWidth?: string;\n private _minRowHeight?: string;\n\n private _serializer = createSerializer(this);\n private _tilesState = createTilesState(this);\n\n private _grid = createRef<HTMLElement>();\n\n // #endregion\n\n // #region Context helpers\n\n private _context = new ContextProvider(this, {\n context: tileManagerContext,\n initialValue: this._createContext(),\n });\n\n private _createContext(): TileManagerContext {\n return {\n instance: this,\n grid: this._grid,\n setMaximizedState: () => this._setMaximizedState(),\n };\n }\n\n private _setManagerContext(): void {\n this._context.setValue(this._createContext(), true);\n }\n\n // #endregion\n\n // #region Properties and Attributes\n\n /**\n * Whether resize operations are enabled.\n *\n * @attr resize-mode\n * @default none\n */\n @property({ attribute: 'resize-mode' })\n public set resizeMode(value: TileManagerResizeMode) {\n this._resizeMode = value;\n this._setManagerContext();\n }\n\n public get resizeMode(): TileManagerResizeMode {\n return this._resizeMode;\n }\n\n /**\n * Whether drag and drop operations are enabled.\n *\n * @attr drag-mode\n * @default none\n */\n @property({ attribute: 'drag-mode' })\n public set dragMode(value: TileManagerDragMode) {\n this._dragMode = value;\n this._setManagerContext();\n }\n\n public get dragMode(): TileManagerDragMode {\n return this._dragMode;\n }\n\n /**\n * Sets the number of columns for the tile manager.\n * Setting value <= than zero will trigger a responsive layout.\n *\n * @attr column-count\n * @default 0\n */\n @property({ type: Number, attribute: 'column-count' })\n public set columnCount(value: number) {\n this._columnCount = Math.max(0, asNumber(value));\n Object.assign(this._internalStyles, {\n '--column-count': this._columnCount || undefined,\n });\n }\n\n public get columnCount(): number {\n return this._columnCount;\n }\n\n /**\n * Sets the minimum width for a column unit in the tile manager.\n * @attr min-column-width\n */\n @property({ attribute: 'min-column-width' })\n public set minColumnWidth(value: string | undefined) {\n this._minColWidth = value ?? undefined;\n Object.assign(this._internalStyles, {\n '--min-col-width': this._minColWidth,\n });\n }\n\n public get minColumnWidth(): string | undefined {\n return this._minColWidth;\n }\n\n /**\n * Sets the minimum height for a row unit in the tile manager.\n * @attr min-row-height\n */\n @property({ attribute: 'min-row-height' })\n public set minRowHeight(value: string | undefined) {\n this._minRowHeight = value ?? undefined;\n Object.assign(this._internalStyles, {\n '--min-row-height': this._minRowHeight,\n });\n }\n\n public get minRowHeight(): string | undefined {\n return this._minRowHeight;\n }\n\n /**\n * Sets the gap size between tiles in the tile manager.\n *\n * @attr gap\n */\n @property()\n public set gap(value: string | undefined) {\n this._gap = value ?? undefined;\n Object.assign(this._internalStyles, {\n '--grid-gap': this._gap,\n });\n }\n\n public get gap(): string | undefined {\n return this._gap;\n }\n\n /**\n * Gets the tiles sorted by their position in the layout.\n * @property\n */\n public get tiles() {\n return this._tilesState.tiles;\n }\n\n // #endregion\n\n // #region Internal API\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n createMutationController(this, {\n callback: this._observerCallback,\n filter: [IgcTileComponent.tagName],\n config: {\n childList: true,\n },\n });\n }\n\n protected override updated() {\n this._tilesState.adjustTileGridPosition();\n }\n\n protected override firstUpdated() {\n this._tilesState.assignPositions();\n this._tilesState.assignTiles();\n this._setManagerContext();\n }\n\n private _observerCallback({\n changes: { added, removed },\n }: MutationControllerParams<IgcTileComponent>) {\n const ownAdded = added.filter(\n ({ target }) => target.closest(this.tagName) === this\n );\n const ownRemoved = removed.filter(\n ({ target }) => target.closest(this.tagName) === this\n );\n\n for (const remove of ownRemoved) {\n this._tilesState.remove(remove.node);\n }\n\n for (const added of ownAdded) {\n this._tilesState.add(added.node);\n }\n\n this._tilesState.assignTiles();\n }\n\n /**\n * Locks/unlocks the grid container height in response to a tile's maximized state changing.\n *\n * @remarks\n * Maximizing a tile removes it from the grid flow (absolute positioning), so it no longer\n * contributes to the grid's intrinsic height. When that tile is the sole contributor to the\n * tallest row track, the container would otherwise collapse to the remaining tiles and cut off\n * the maximized tile's content. Capturing the current height before the layout change keeps the\n * container stable, and it is released once no tile remains maximized.\n */\n private _setMaximizedState(): void {\n const grid = this._grid.value;\n\n if (grid) {\n if (this.tiles.some((tile) => tile.maximized)) {\n if (!grid.style.minHeight) {\n grid.style.minHeight = `${grid.offsetHeight}px`;\n }\n } else {\n grid.style.minHeight = '';\n }\n }\n\n this.requestUpdate();\n }\n\n // #endregion\n\n // #region Public API\n\n /**\n * Returns the properties of the current tile collections as a JSON payload.\n *\n * @remarks\n * The content of the tiles is not serialized or saved. Only tile properties\n * are serialized.\n */\n public saveLayout(): string {\n return this._serializer.saveAsJSON();\n }\n\n /**\n * Restores a previously serialized state produced by `saveLayout`.\n */\n public loadLayout(data: string): void {\n this._serializer.loadFromJSON(data);\n }\n\n // #endregion\n\n // #region Rendering\n\n protected override render() {\n const parts = {\n base: true,\n 'maximized-tile': this.tiles.some((tile) => tile.maximized),\n };\n\n return html`\n <div\n ${ref(this._grid)}\n style=${styleMap(this._internalStyles)}\n part=${partMap(parts)}\n >\n <slot></slot>\n </div>\n `;\n }\n\n // #endregion\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-tile-manager': IgcTileManagerComponent;\n }\n}\n"]}
|
|
@@ -87,7 +87,7 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
|
|
|
87
87
|
set maximized(value) {
|
|
88
88
|
this._maximized = value;
|
|
89
89
|
if (this._tileManagerCtx) {
|
|
90
|
-
this._tileManagerCtx.
|
|
90
|
+
this._tileManagerCtx.setMaximizedState();
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
get maximized() {
|
|
@@ -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 { startViewTransition } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport {\n type TileManagerContext,\n tileManagerContext,\n} from '../common/context.js';\nimport { createAsyncContext } from '../common/controllers/async-consumer.js';\nimport {\n addDragController,\n type DragCallbackParameters,\n} from '../common/controllers/drag.js';\nimport { addFullscreenController } from '../common/controllers/fullscreen.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport { asNumber, getElementFromPath, isLTR } from '../common/util.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\nlet nextId = 1;\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 `igc-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.instance.requestUpdate();\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 * ot 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 || `tile-${nextId++}`;\n\n this.style.viewTransitionName =\n this.style.viewTransitionName || `tile-transition-${this.id}`;\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 }).transition?.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 }).transition?.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 ${hasMaximizeSlot\n ? html`\n <slot name=\"maximize-action\">\n ${this._renderDefaultAction('maximize')}\n </slot>\n `\n : nothing}\n ${hasFullscreenSlot\n ? html`\n <slot name=\"fullscreen-action\">\n ${this._renderDefaultAction('fullscreen')}\n </slot>\n `\n : nothing}\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":"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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 { startViewTransition } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport {\n type TileManagerContext,\n tileManagerContext,\n} from '../common/context.js';\nimport { createAsyncContext } from '../common/controllers/async-consumer.js';\nimport {\n addDragController,\n type DragCallbackParameters,\n} from '../common/controllers/drag.js';\nimport { addFullscreenController } from '../common/controllers/fullscreen.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { partMap } from '../common/part-map.js';\nimport { asNumber, getElementFromPath, isLTR } from '../common/util.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\nlet nextId = 1;\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 `igc-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 * ot 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 || `tile-${nextId++}`;\n\n this.style.viewTransitionName =\n this.style.viewTransitionName || `tile-transition-${this.id}`;\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 }).transition?.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 }).transition?.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 ${hasMaximizeSlot\n ? html`\n <slot name=\"maximize-action\">\n ${this._renderDefaultAction('maximize')}\n </slot>\n `\n : nothing}\n ${hasFullscreenSlot\n ? html`\n <slot name=\"fullscreen-action\">\n ${this._renderDefaultAction('fullscreen')}\n </slot>\n `\n : nothing}\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,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const styles = css `:host{--elevation: var(--ig-toast-elevation, var(--ig-elevation-
|
|
2
|
+
export const styles = css `:host{--elevation: var(--ig-toast-elevation, var(--ig-elevation-10));--background: var(--ig-toast-background, var(--ig-gray-300));--border-color: var(--ig-toast-border-color, transparent);--text-color: var(--ig-toast-text-color, var(--ig-gray-50-contrast));--border-radius: var(--ig-toast-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2307692308) * 1.625rem), 1.625rem));--ig-theme: indigo;--ig-theme-variant: dark}`;
|
|
3
3
|
//# sourceMappingURL=toast.indigo.css.js.map
|