igniteui-webcomponents 7.3.0-beta.1 → 7.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/README.md +30 -0
  3. package/components/avatar/avatar.d.ts +1 -2
  4. package/components/avatar/avatar.js +4 -8
  5. package/components/avatar/avatar.js.map +1 -1
  6. package/components/badge/badge.d.ts +6 -1
  7. package/components/badge/badge.js +8 -5
  8. package/components/badge/badge.js.map +1 -1
  9. package/components/badge/themes/badge.base.css.js +1 -1
  10. package/components/badge/themes/badge.base.css.js.map +1 -1
  11. package/components/chip/chip.d.ts +30 -14
  12. package/components/chip/chip.js +54 -48
  13. package/components/chip/chip.js.map +1 -1
  14. package/components/chip/themes/chip.base.css.js +1 -1
  15. package/components/chip/themes/chip.base.css.js.map +1 -1
  16. package/components/chip/themes/dark/chip.bootstrap.css.js +1 -1
  17. package/components/chip/themes/dark/chip.bootstrap.css.js.map +1 -1
  18. package/components/chip/themes/dark/chip.fluent.css.js +1 -1
  19. package/components/chip/themes/dark/chip.fluent.css.js.map +1 -1
  20. package/components/chip/themes/dark/chip.indigo.css.js +1 -1
  21. package/components/chip/themes/dark/chip.indigo.css.js.map +1 -1
  22. package/components/chip/themes/dark/chip.material.css.js +1 -1
  23. package/components/chip/themes/dark/chip.material.css.js.map +1 -1
  24. package/components/chip/themes/light/chip.bootstrap.css.js +1 -1
  25. package/components/chip/themes/light/chip.bootstrap.css.js.map +1 -1
  26. package/components/chip/themes/light/chip.fluent.css.js +1 -1
  27. package/components/chip/themes/light/chip.fluent.css.js.map +1 -1
  28. package/components/chip/themes/light/chip.indigo.css.js +1 -1
  29. package/components/chip/themes/light/chip.indigo.css.js.map +1 -1
  30. package/components/chip/themes/light/chip.material.css.js +1 -1
  31. package/components/chip/themes/light/chip.material.css.js.map +1 -1
  32. package/components/chip/themes/shared/chip.bootstrap.css.js +1 -1
  33. package/components/chip/themes/shared/chip.bootstrap.css.js.map +1 -1
  34. package/components/chip/themes/shared/chip.common.css.js +1 -1
  35. package/components/chip/themes/shared/chip.common.css.js.map +1 -1
  36. package/components/chip/themes/shared/chip.fluent.css.js +1 -1
  37. package/components/chip/themes/shared/chip.fluent.css.js.map +1 -1
  38. package/components/chip/themes/shared/chip.indigo.css.js +1 -1
  39. package/components/chip/themes/shared/chip.indigo.css.js.map +1 -1
  40. package/components/color-picker/color-picker.d.ts +261 -0
  41. package/components/color-picker/color-picker.js +620 -0
  42. package/components/color-picker/color-picker.js.map +1 -0
  43. package/components/color-picker/common.d.ts +37 -0
  44. package/components/color-picker/common.js +55 -0
  45. package/components/color-picker/common.js.map +1 -0
  46. package/components/color-picker/converters.d.ts +18 -0
  47. package/components/color-picker/converters.js +173 -0
  48. package/components/color-picker/converters.js.map +1 -0
  49. package/components/color-picker/model.d.ts +120 -0
  50. package/components/color-picker/model.js +174 -0
  51. package/components/color-picker/model.js.map +1 -0
  52. package/components/color-picker/picker-canvas.d.ts +95 -0
  53. package/components/color-picker/picker-canvas.js +155 -0
  54. package/components/color-picker/picker-canvas.js.map +1 -0
  55. package/components/color-picker/themes/color-picker.base.css.js +3 -0
  56. package/components/color-picker/themes/color-picker.base.css.js.map +1 -0
  57. package/components/color-picker/themes/dark/color-picker.bootstrap.css.js +3 -0
  58. package/components/color-picker/themes/dark/color-picker.bootstrap.css.js.map +1 -0
  59. package/components/color-picker/themes/dark/color-picker.fluent.css.js +3 -0
  60. package/components/color-picker/themes/dark/color-picker.fluent.css.js.map +1 -0
  61. package/components/color-picker/themes/dark/color-picker.indigo.css.js +3 -0
  62. package/components/color-picker/themes/dark/color-picker.indigo.css.js.map +1 -0
  63. package/components/color-picker/themes/dark/color-picker.material.css.js +3 -0
  64. package/components/color-picker/themes/dark/color-picker.material.css.js.map +1 -0
  65. package/components/color-picker/themes/light/color-picker.bootstrap.css.js +3 -0
  66. package/components/color-picker/themes/light/color-picker.bootstrap.css.js.map +1 -0
  67. package/components/color-picker/themes/light/color-picker.fluent.css.js +3 -0
  68. package/components/color-picker/themes/light/color-picker.fluent.css.js.map +1 -0
  69. package/components/color-picker/themes/light/color-picker.indigo.css.js +3 -0
  70. package/components/color-picker/themes/light/color-picker.indigo.css.js.map +1 -0
  71. package/components/color-picker/themes/light/color-picker.material.css.js +3 -0
  72. package/components/color-picker/themes/light/color-picker.material.css.js.map +1 -0
  73. package/components/color-picker/themes/light/color-picker.shared.css.js +3 -0
  74. package/components/color-picker/themes/light/color-picker.shared.css.js.map +1 -0
  75. package/components/{resize-container/themes/resize-container.base.css.js → color-picker/themes/picker-canvas.base.css.js} +2 -2
  76. package/components/color-picker/themes/picker-canvas.base.css.js.map +1 -0
  77. package/components/color-picker/themes/shared/color-picker.bootstrap.css.js +3 -0
  78. package/components/color-picker/themes/shared/color-picker.bootstrap.css.js.map +1 -0
  79. package/components/color-picker/themes/shared/color-picker.common.css.d.ts +1 -0
  80. package/components/color-picker/themes/shared/color-picker.common.css.js +3 -0
  81. package/components/color-picker/themes/shared/color-picker.common.css.js.map +1 -0
  82. package/components/color-picker/themes/shared/color-picker.fluent.css.d.ts +1 -0
  83. package/components/color-picker/themes/shared/color-picker.fluent.css.js +3 -0
  84. package/components/color-picker/themes/shared/color-picker.fluent.css.js.map +1 -0
  85. package/components/color-picker/themes/shared/color-picker.indigo.css.d.ts +1 -0
  86. package/components/color-picker/themes/shared/color-picker.indigo.css.js +3 -0
  87. package/components/color-picker/themes/shared/color-picker.indigo.css.js.map +1 -0
  88. package/components/color-picker/themes/shared/color-picker.material.css.d.ts +1 -0
  89. package/components/color-picker/themes/shared/color-picker.material.css.js +3 -0
  90. package/components/color-picker/themes/shared/color-picker.material.css.js.map +1 -0
  91. package/components/color-picker/themes/themes.js +50 -0
  92. package/components/color-picker/themes/themes.js.map +1 -0
  93. package/components/color-picker/validators.d.ts +3 -0
  94. package/components/color-picker/validators.js +5 -0
  95. package/components/color-picker/validators.js.map +1 -0
  96. package/components/date-picker/date-picker.base.d.ts +1 -1
  97. package/components/icon/icon-references.js +1 -0
  98. package/components/icon/icon-references.js.map +1 -1
  99. package/components/icon/internal-icons-lib.js +3 -0
  100. package/components/icon/internal-icons-lib.js.map +1 -1
  101. package/components/input/themes/shared/input.material.css.js +1 -1
  102. package/components/input/themes/shared/input.material.css.js.map +1 -1
  103. package/components/textarea/textarea.d.ts +2 -15
  104. package/components/textarea/textarea.js +48 -93
  105. package/components/textarea/textarea.js.map +1 -1
  106. package/components/tile-manager/position.d.ts +2 -9
  107. package/components/tile-manager/position.js +27 -42
  108. package/components/tile-manager/position.js.map +1 -1
  109. package/components/tile-manager/resize-state.d.ts +11 -22
  110. package/components/tile-manager/resize-state.js +60 -119
  111. package/components/tile-manager/resize-state.js.map +1 -1
  112. package/components/tile-manager/resize-util.d.ts +3 -7
  113. package/components/tile-manager/resize-util.js +65 -72
  114. package/components/tile-manager/resize-util.js.map +1 -1
  115. package/components/tile-manager/serializer.d.ts +1 -1
  116. package/components/tile-manager/serializer.js +9 -10
  117. package/components/tile-manager/serializer.js.map +1 -1
  118. package/components/tile-manager/themes/shared/tile/tile.common.css.js +1 -1
  119. package/components/tile-manager/themes/shared/tile/tile.common.css.js.map +1 -1
  120. package/components/tile-manager/themes/tile.base.css.js +1 -1
  121. package/components/tile-manager/themes/tile.base.css.js.map +1 -1
  122. package/components/tile-manager/tile-ghost-util.js +16 -20
  123. package/components/tile-manager/tile-ghost-util.js.map +1 -1
  124. package/components/tile-manager/tile-manager.d.ts +5 -2
  125. package/components/tile-manager/tile-manager.js +27 -23
  126. package/components/tile-manager/tile-manager.js.map +1 -1
  127. package/components/tile-manager/tile.d.ts +32 -18
  128. package/components/tile-manager/tile.js +181 -161
  129. package/components/tile-manager/tile.js.map +1 -1
  130. package/components/tile-manager/types.d.ts +1 -5
  131. package/components/tile-manager/types.js.map +1 -1
  132. package/components/types.d.ts +2 -0
  133. package/components/types.js.map +1 -1
  134. package/custom-elements.json +25375 -22692
  135. package/igniteui-webcomponents.css-data.json +1 -1
  136. package/igniteui-webcomponents.html-data.json +1 -1
  137. package/index.d.ts +2 -0
  138. package/index.js +1 -0
  139. package/index.js.map +1 -1
  140. package/internals/definitions/defineAllComponents.js +2 -0
  141. package/internals/definitions/defineAllComponents.js.map +1 -1
  142. package/internals/directives/drag.d.ts +144 -0
  143. package/internals/directives/drag.js +278 -0
  144. package/internals/directives/drag.js.map +1 -0
  145. package/internals/directives/resize.d.ts +109 -0
  146. package/internals/directives/resize.js +214 -0
  147. package/internals/directives/resize.js.map +1 -0
  148. package/internals/templates/input-shell.d.ts +12 -1
  149. package/internals/templates/input-shell.js +17 -10
  150. package/internals/templates/input-shell.js.map +1 -1
  151. package/internals/utils/dom.d.ts +2 -0
  152. package/internals/utils/dom.js +3 -0
  153. package/internals/utils/dom.js.map +1 -1
  154. package/internals/utils/events.d.ts +2 -0
  155. package/internals/utils/events.js +3 -0
  156. package/internals/utils/events.js.map +1 -1
  157. package/package.json +3 -1
  158. package/skills/README.md +1 -0
  159. package/web-types.json +2 -2
  160. package/components/resize-container/default-ghost.d.ts +0 -5
  161. package/components/resize-container/default-ghost.js +0 -20
  162. package/components/resize-container/default-ghost.js.map +0 -1
  163. package/components/resize-container/resize-container.d.ts +0 -60
  164. package/components/resize-container/resize-container.js +0 -156
  165. package/components/resize-container/resize-container.js.map +0 -1
  166. package/components/resize-container/resize-controller.d.ts +0 -46
  167. package/components/resize-container/resize-controller.js +0 -195
  168. package/components/resize-container/resize-controller.js.map +0 -1
  169. package/components/resize-container/themes/dark/resize-indicator.bootstrap.css.js +0 -3
  170. package/components/resize-container/themes/dark/resize-indicator.bootstrap.css.js.map +0 -1
  171. package/components/resize-container/themes/dark/resize-indicator.fluent.css.js +0 -3
  172. package/components/resize-container/themes/dark/resize-indicator.fluent.css.js.map +0 -1
  173. package/components/resize-container/themes/dark/resize-indicator.indigo.css.js +0 -3
  174. package/components/resize-container/themes/dark/resize-indicator.indigo.css.js.map +0 -1
  175. package/components/resize-container/themes/dark/resize-indicator.material.css.js +0 -3
  176. package/components/resize-container/themes/dark/resize-indicator.material.css.js.map +0 -1
  177. package/components/resize-container/themes/dark/resize-indicator.shared.css.js +0 -3
  178. package/components/resize-container/themes/dark/resize-indicator.shared.css.js.map +0 -1
  179. package/components/resize-container/themes/light/resize-indicator.bootstrap.css.js +0 -3
  180. package/components/resize-container/themes/light/resize-indicator.bootstrap.css.js.map +0 -1
  181. package/components/resize-container/themes/light/resize-indicator.fluent.css.js +0 -3
  182. package/components/resize-container/themes/light/resize-indicator.fluent.css.js.map +0 -1
  183. package/components/resize-container/themes/light/resize-indicator.indigo.css.js +0 -3
  184. package/components/resize-container/themes/light/resize-indicator.indigo.css.js.map +0 -1
  185. package/components/resize-container/themes/light/resize-indicator.material.css.js +0 -3
  186. package/components/resize-container/themes/light/resize-indicator.material.css.js.map +0 -1
  187. package/components/resize-container/themes/light/resize-indicator.shared.css.js +0 -3
  188. package/components/resize-container/themes/light/resize-indicator.shared.css.js.map +0 -1
  189. package/components/resize-container/themes/resize-container.base.css.js.map +0 -1
  190. package/components/resize-container/themes/shared/resize-container.common.css.js +0 -3
  191. package/components/resize-container/themes/shared/resize-container.common.css.js.map +0 -1
  192. package/components/resize-container/themes/themes.js +0 -47
  193. package/components/resize-container/themes/themes.js.map +0 -1
  194. package/components/resize-container/types.d.ts +0 -40
  195. package/components/resize-container/types.js +0 -2
  196. package/components/resize-container/types.js.map +0 -1
  197. package/internals/controllers/drag.d.ts +0 -166
  198. package/internals/controllers/drag.js +0 -283
  199. package/internals/controllers/drag.js.map +0 -1
  200. /package/components/{resize-container/themes/dark/resize-indicator.bootstrap.css.d.ts → color-picker/themes/color-picker.base.css.d.ts} +0 -0
  201. /package/components/{resize-container/themes/dark/resize-indicator.fluent.css.d.ts → color-picker/themes/dark/color-picker.bootstrap.css.d.ts} +0 -0
  202. /package/components/{resize-container/themes/dark/resize-indicator.indigo.css.d.ts → color-picker/themes/dark/color-picker.fluent.css.d.ts} +0 -0
  203. /package/components/{resize-container/themes/dark/resize-indicator.material.css.d.ts → color-picker/themes/dark/color-picker.indigo.css.d.ts} +0 -0
  204. /package/components/{resize-container/themes/dark/resize-indicator.shared.css.d.ts → color-picker/themes/dark/color-picker.material.css.d.ts} +0 -0
  205. /package/components/{resize-container/themes/light/resize-indicator.bootstrap.css.d.ts → color-picker/themes/light/color-picker.bootstrap.css.d.ts} +0 -0
  206. /package/components/{resize-container/themes/light/resize-indicator.fluent.css.d.ts → color-picker/themes/light/color-picker.fluent.css.d.ts} +0 -0
  207. /package/components/{resize-container/themes/light/resize-indicator.indigo.css.d.ts → color-picker/themes/light/color-picker.indigo.css.d.ts} +0 -0
  208. /package/components/{resize-container/themes/light/resize-indicator.material.css.d.ts → color-picker/themes/light/color-picker.material.css.d.ts} +0 -0
  209. /package/components/{resize-container/themes/light/resize-indicator.shared.css.d.ts → color-picker/themes/light/color-picker.shared.css.d.ts} +0 -0
  210. /package/components/{resize-container/themes/resize-container.base.css.d.ts → color-picker/themes/picker-canvas.base.css.d.ts} +0 -0
  211. /package/components/{resize-container/themes/shared/resize-container.common.css.d.ts → color-picker/themes/shared/color-picker.bootstrap.css.d.ts} +0 -0
  212. /package/components/{resize-container → color-picker}/themes/themes.d.ts +0 -0
@@ -1,5 +0,0 @@
1
- /**
2
- * Default ghost element factory for the igc-resize implementation.
3
- */
4
- export declare function createDefaultGhostElement({ x, y, width, height, }: DOMRect): HTMLElement;
5
- export declare function getDefaultLayer(): HTMLElement;
@@ -1,20 +0,0 @@
1
- import { setStyles } from '#internals/utils/dom.js';
2
- export function createDefaultGhostElement({ x, y, width, height, }) {
3
- const element = document.createElement('div');
4
- const { scrollX, scrollY } = window;
5
- setStyles(element, {
6
- position: 'absolute',
7
- top: `${y + scrollY}px`,
8
- left: `${x + scrollX}px`,
9
- zIndex: '1000',
10
- background: 'pink',
11
- opacity: '0.85',
12
- width: `${width}px`,
13
- height: `${height}px`,
14
- });
15
- return element;
16
- }
17
- export function getDefaultLayer() {
18
- return document.body;
19
- }
20
- //# sourceMappingURL=default-ghost.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"default-ghost.js","sourceRoot":"","sources":["../../../src/components/resize-container/default-ghost.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAKpD,MAAM,UAAU,yBAAyB,CAAC,EACxC,CAAC,EACD,CAAC,EACD,KAAK,EACL,MAAM,GACE;IACR,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IAEpC,SAAS,CAAC,OAAO,EAAE;QACjB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACvB,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACxB,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,GAAG,KAAK,IAAI;QACnB,MAAM,EAAE,GAAG,MAAM,IAAI;KACtB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,QAAQ,CAAC,IAAI,CAAC;AACvB,CAAC","sourcesContent":["import { setStyles } from '#internals/utils/dom.js';\n\n/**\n * Default ghost element factory for the igc-resize implementation.\n */\nexport function createDefaultGhostElement({\n x,\n y,\n width,\n height,\n}: DOMRect): HTMLElement {\n const element = document.createElement('div');\n const { scrollX, scrollY } = window;\n\n setStyles(element, {\n position: 'absolute',\n top: `${y + scrollY}px`,\n left: `${x + scrollX}px`,\n zIndex: '1000',\n background: 'pink',\n opacity: '0.85',\n width: `${width}px`,\n height: `${height}px`,\n });\n\n return element;\n}\n\nexport function getDefaultLayer(): HTMLElement {\n return document.body;\n}\n"]}
@@ -1,60 +0,0 @@
1
- import { LitElement, nothing } from 'lit';
2
- import type { Constructor } from '#internals/mixins/constructor.js';
3
- import type { ResizeCallbackParams, ResizeGhostFactory, ResizeMode } from './types.js';
4
- /** @hidden */
5
- export interface IgcResizeContainerComponentEventMap {
6
- igcResizeStart: CustomEvent<ResizeCallbackParams>;
7
- igcResize: CustomEvent<ResizeCallbackParams>;
8
- igcResizeEnd: CustomEvent<ResizeCallbackParams>;
9
- igcResizeCancel: CustomEvent<unknown>;
10
- }
11
- declare const IgcResizeContainerComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcResizeContainerComponentEventMap>> & Constructor<LitElement>;
12
- /**
13
- * @element igc-resize
14
- *
15
- * @slot - renders the element(s) that should be resized
16
- * @slot side-adorner - renders the side resize handle.
17
- * @slot corner-adorner - renders the corner resize handle.
18
- * @slot bottom-adorner - renders the bottom resize handle.
19
- *
20
- */
21
- export default class IgcResizeContainerComponent extends IgcResizeContainerComponent_base {
22
- static readonly tagName = "igc-resize";
23
- static styles: import("lit").CSSResult[];
24
- static register(): void;
25
- private _controller;
26
- private _mode;
27
- private _ghostFactory?;
28
- /** The DOM container doing the actual resizing */
29
- private _container;
30
- /** Resize component adorners */
31
- private _adorners;
32
- private _isActive;
33
- /**
34
- * Whether to always show the resize element adorners.
35
- */
36
- active: boolean;
37
- set ghostFactory(value: ResizeGhostFactory);
38
- get ghostFactory(): ResizeGhostFactory | undefined;
39
- /** Get/Set the mode of the resizing operation. */
40
- set mode(value: ResizeMode);
41
- get mode(): ResizeMode;
42
- constructor();
43
- protected createRenderRoot(): HTMLElement | DocumentFragment;
44
- private _updateResizingState;
45
- private _handlePointerEnter;
46
- private _handlePointerLeave;
47
- private _handleResizeStart;
48
- private _handleResize;
49
- private _handleResizeEnd;
50
- private _handleResizeCancel;
51
- protected _renderAdorner(name: 'side' | 'corner' | 'bottom', part: string): import("lit-html").TemplateResult<1>;
52
- protected _renderAdorners(): typeof nothing | import("lit-html").TemplateResult<1>;
53
- protected render(): import("lit-html").TemplateResult<1>;
54
- }
55
- declare global {
56
- interface HTMLElementTagNameMap {
57
- 'igc-resize': IgcResizeContainerComponent;
58
- }
59
- }
60
- export {};
@@ -1,156 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html, LitElement, nothing } from 'lit';
8
- import { property, state } from 'lit/decorators.js';
9
- import { createRef, ref } from 'lit/directives/ref.js';
10
- import { registerComponent } from '#internals/definitions/register.js';
11
- import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
12
- import { partMap } from '#internals/part-map.js';
13
- import { setStyles } from '#internals/utils/dom.js';
14
- import { bindIf } from '#internals/utils/lit.js';
15
- import { addThemingController } from '#theming/theming-controller.js';
16
- import IgcIconComponent from '../icon/icon.js';
17
- import { addResizeController } from './resize-controller.js';
18
- import { styles } from './themes/resize-container.base.css.js';
19
- import { styles as shared } from './themes/shared/resize-container.common.css.js';
20
- import { all } from './themes/themes.js';
21
- export default class IgcResizeContainerComponent extends EventEmitterMixin(LitElement) {
22
- static { this.tagName = 'igc-resize'; }
23
- static { this.styles = [styles, shared]; }
24
- static register() {
25
- registerComponent(IgcResizeContainerComponent, IgcIconComponent);
26
- }
27
- set ghostFactory(value) {
28
- this._ghostFactory = value;
29
- this._controller.set({ deferredFactory: this._ghostFactory });
30
- }
31
- get ghostFactory() {
32
- return this._ghostFactory;
33
- }
34
- set mode(value) {
35
- this._mode = value;
36
- this._controller.set({ mode: this._mode });
37
- }
38
- get mode() {
39
- return this._mode;
40
- }
41
- constructor() {
42
- super();
43
- this._mode = 'immediate';
44
- this._container = createRef();
45
- this._adorners = {
46
- side: createRef(),
47
- corner: createRef(),
48
- bottom: createRef(),
49
- };
50
- this._isActive = false;
51
- this.active = false;
52
- addThemingController(this, all);
53
- this._controller = addResizeController(this, {
54
- ref: [this._adorners.side, this._adorners.corner, this._adorners.bottom],
55
- mode: this._mode,
56
- deferredFactory: this._ghostFactory,
57
- start: this._handleResizeStart,
58
- resize: this._handleResize,
59
- end: this._handleResizeEnd,
60
- cancel: this._handleResizeCancel,
61
- resizeTarget: () => this._container.value,
62
- });
63
- }
64
- createRenderRoot() {
65
- const root = super.createRenderRoot();
66
- root.addEventListener('slotchange', () => this.requestUpdate());
67
- return root;
68
- }
69
- _updateResizingState(params) {
70
- const { initial, current, trigger } = params.state;
71
- const { side, bottom } = this._adorners;
72
- if (trigger === side.value) {
73
- current.height = initial.height;
74
- }
75
- else if (trigger === bottom.value) {
76
- current.width = initial.width;
77
- }
78
- }
79
- _handlePointerEnter() {
80
- this._isActive = true;
81
- }
82
- _handlePointerLeave() {
83
- this._isActive = false;
84
- }
85
- _handleResizeStart(params) {
86
- params.event.preventDefault();
87
- return this.emitEvent('igcResizeStart', {
88
- bubbles: false,
89
- cancelable: true,
90
- detail: params,
91
- });
92
- }
93
- _handleResize(params) {
94
- this._updateResizingState(params);
95
- this.emitEvent('igcResize', { bubbles: false, detail: params });
96
- }
97
- _handleResizeEnd(params) {
98
- this.emitEvent('igcResizeEnd', { bubbles: false, detail: params });
99
- }
100
- _handleResizeCancel({ initial }) {
101
- this._controller.dispose();
102
- if (this.mode !== 'deferred') {
103
- setStyles(this._container.value, {
104
- width: `${initial.width}px`,
105
- height: `${initial.height}px`,
106
- });
107
- }
108
- this.emitEvent('igcResizeCancel', { bubbles: false, cancelable: false });
109
- }
110
- _renderAdorner(name, part) {
111
- return html `
112
- <slot ${ref(this._adorners[name])} part=${part} name="${name}-adorner">
113
- </slot>
114
- `;
115
- }
116
- _renderAdorners() {
117
- if (!this._isActive && !this.active) {
118
- return nothing;
119
- }
120
- return html `
121
- ${this._renderAdorner('side', 'trigger-side')}
122
- ${this._renderAdorner('corner', 'trigger')}
123
- ${this._renderAdorner('bottom', 'trigger-bottom')}
124
- `;
125
- }
126
- render() {
127
- const parts = {
128
- 'resize-base': true,
129
- active: this._isActive || this.active,
130
- };
131
- return html `
132
- <div
133
- ${ref(this._container)}
134
- part=${partMap(parts)}
135
- @pointerenter=${bindIf(!this.active, this._handlePointerEnter)}
136
- @pointerleave=${bindIf(!this.active, this._handlePointerLeave)}
137
- >
138
- <slot></slot>
139
- ${this._renderAdorners()}
140
- </div>
141
- `;
142
- }
143
- }
144
- __decorate([
145
- state()
146
- ], IgcResizeContainerComponent.prototype, "_isActive", void 0);
147
- __decorate([
148
- property({ type: Boolean, reflect: true })
149
- ], IgcResizeContainerComponent.prototype, "active", void 0);
150
- __decorate([
151
- property({ attribute: false })
152
- ], IgcResizeContainerComponent.prototype, "ghostFactory", null);
153
- __decorate([
154
- property()
155
- ], IgcResizeContainerComponent.prototype, "mode", null);
156
- //# sourceMappingURL=resize-container.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-container.js","sourceRoot":"","sources":["../../../src/components/resize-container/resize-container.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, type Ref, ref } from 'lit/directives/ref.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { partMap } from '#internals/part-map.js';\nimport { setStyles } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { addResizeController } from './resize-controller.js';\nimport { styles } from './themes/resize-container.base.css.js';\nimport { styles as shared } from './themes/shared/resize-container.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n ResizeCallbackParams,\n ResizeGhostFactory,\n ResizeMode,\n ResizeState,\n} from './types.js';\n\n/** @hidden */\nexport interface IgcResizeContainerComponentEventMap {\n igcResizeStart: CustomEvent<ResizeCallbackParams>;\n igcResize: CustomEvent<ResizeCallbackParams>;\n igcResizeEnd: CustomEvent<ResizeCallbackParams>;\n igcResizeCancel: CustomEvent<unknown>;\n}\n\n/* blazorSuppress */\n/**\n * @element igc-resize\n *\n * @slot - renders the element(s) that should be resized\n * @slot side-adorner - renders the side resize handle.\n * @slot corner-adorner - renders the corner resize handle.\n * @slot bottom-adorner - renders the bottom resize handle.\n *\n */\nexport default class IgcResizeContainerComponent extends EventEmitterMixin<\n IgcResizeContainerComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-resize';\n public static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcResizeContainerComponent, IgcIconComponent);\n }\n\n private _controller: ReturnType<typeof addResizeController>;\n\n private _mode: ResizeMode = 'immediate';\n private _ghostFactory?: ResizeGhostFactory;\n\n /** The DOM container doing the actual resizing */\n private _container: Ref<HTMLElement> = createRef();\n\n /** Resize component adorners */\n private _adorners: Record<'side' | 'corner' | 'bottom', Ref<HTMLElement>> = {\n side: createRef(),\n corner: createRef(),\n bottom: createRef(),\n };\n\n @state()\n private _isActive = false;\n\n /**\n * Whether to always show the resize element adorners.\n */\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ attribute: false })\n public set ghostFactory(value: ResizeGhostFactory) {\n this._ghostFactory = value;\n this._controller.set({ deferredFactory: this._ghostFactory });\n }\n\n public get ghostFactory(): ResizeGhostFactory | undefined {\n return this._ghostFactory;\n }\n\n /** Get/Set the mode of the resizing operation. */\n @property()\n public set mode(value: ResizeMode) {\n this._mode = value;\n this._controller.set({ mode: this._mode });\n }\n\n public get mode(): ResizeMode {\n return this._mode;\n }\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n this._controller = addResizeController(this, {\n ref: [this._adorners.side, this._adorners.corner, this._adorners.bottom],\n mode: this._mode,\n deferredFactory: this._ghostFactory,\n start: this._handleResizeStart,\n resize: this._handleResize,\n end: this._handleResizeEnd,\n cancel: this._handleResizeCancel,\n resizeTarget: () => this._container.value!,\n });\n }\n\n protected override createRenderRoot(): HTMLElement | DocumentFragment {\n const root = super.createRenderRoot();\n root.addEventListener('slotchange', () => this.requestUpdate());\n return root;\n }\n\n private _updateResizingState(params: ResizeCallbackParams): void {\n const { initial, current, trigger } = params.state;\n const { side, bottom } = this._adorners;\n\n if (trigger === side.value) {\n current.height = initial.height;\n } else if (trigger === bottom.value) {\n current.width = initial.width;\n }\n }\n\n private _handlePointerEnter(): void {\n this._isActive = true;\n }\n\n private _handlePointerLeave(): void {\n this._isActive = false;\n }\n\n private _handleResizeStart(params: ResizeCallbackParams) {\n params.event.preventDefault();\n\n return this.emitEvent('igcResizeStart', {\n bubbles: false,\n cancelable: true,\n detail: params,\n });\n }\n\n private _handleResize(params: ResizeCallbackParams): void {\n this._updateResizingState(params);\n this.emitEvent('igcResize', { bubbles: false, detail: params });\n }\n\n private _handleResizeEnd(params: ResizeCallbackParams): void {\n this.emitEvent('igcResizeEnd', { bubbles: false, detail: params });\n }\n\n private _handleResizeCancel({ initial }: ResizeState): void {\n this._controller.dispose();\n\n if (this.mode !== 'deferred') {\n setStyles(this._container.value!, {\n width: `${initial.width}px`,\n height: `${initial.height}px`,\n });\n }\n\n this.emitEvent('igcResizeCancel', { bubbles: false, cancelable: false });\n }\n\n protected _renderAdorner(name: 'side' | 'corner' | 'bottom', part: string) {\n return html`\n <slot ${ref(this._adorners[name])} part=${part} name=\"${name}-adorner\">\n </slot>\n `;\n }\n\n protected _renderAdorners() {\n if (!this._isActive && !this.active) {\n return nothing;\n }\n\n return html`\n ${this._renderAdorner('side', 'trigger-side')}\n ${this._renderAdorner('corner', 'trigger')}\n ${this._renderAdorner('bottom', 'trigger-bottom')}\n `;\n }\n\n protected override render() {\n const parts = {\n 'resize-base': true,\n active: this._isActive || this.active,\n };\n\n return html`\n <div\n ${ref(this._container)}\n part=${partMap(parts)}\n @pointerenter=${bindIf(!this.active, this._handlePointerEnter)}\n @pointerleave=${bindIf(!this.active, this._handlePointerLeave)}\n >\n <slot></slot>\n ${this._renderAdorners()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-resize': IgcResizeContainerComponent;\n }\n}\n"]}
@@ -1,46 +0,0 @@
1
- import type { ReactiveController, ReactiveControllerHost } from 'lit';
2
- import type { ResizeControllerConfiguration } from './types.js';
3
- declare class ResizeController implements ReactiveController {
4
- private readonly _host;
5
- private readonly _abortHandle;
6
- private readonly _options;
7
- private _id;
8
- private _hasPointerCapture;
9
- private _state;
10
- private _activeRef;
11
- private _ghost;
12
- private get _element();
13
- private get _resizeTarget();
14
- private get _layer();
15
- /** Whether the controller is in deferred mode. */
16
- private get _isDeferred();
17
- private get _stateParameters();
18
- constructor(host: ReactiveControllerHost & HTMLElement, options?: ResizeControllerConfiguration);
19
- /** Whether the controller is enabled and will listen for events. */
20
- get enabled(): boolean;
21
- /** Updates the configuration of the resize controller. */
22
- set(options?: ResizeControllerConfiguration): void;
23
- /** Stops any resizing operation, cleaning up any additional elements and event listeners. */
24
- dispose(): void;
25
- /** @internal */
26
- hostConnected(): void;
27
- /** @internal */
28
- hostDisconnected(): void;
29
- /** @internal */
30
- handleEvent(event: PointerEvent & KeyboardEvent): void;
31
- private _handlePointerDown;
32
- private _handlePointerMove;
33
- private _handlePointerEnd;
34
- private _handleCancel;
35
- private _shouldSkip;
36
- private _setActiveRef;
37
- private _setResizeState;
38
- private _setResizeCancelListener;
39
- private _setInitialState;
40
- private _updateState;
41
- private _updatePosition;
42
- private _createGhostElement;
43
- private _removeGhostElement;
44
- }
45
- export declare function addResizeController(host: ReactiveControllerHost & HTMLElement, options?: ResizeControllerConfiguration): ResizeController;
46
- export {};
@@ -1,195 +0,0 @@
1
- import { createAbortHandle } from '#internals/abort-handler.js';
2
- import { escapeKey, isKey } from '#internals/controllers/key-bindings.js';
3
- import { setStyles } from '#internals/utils/dom.js';
4
- import { getElementFromPath } from '#internals/utils/events.js';
5
- import { createDefaultGhostElement, getDefaultLayer } from './default-ghost.js';
6
- const additionalEvents = [
7
- 'pointermove',
8
- 'lostpointercapture',
9
- 'contextmenu',
10
- ];
11
- class ResizeController {
12
- get _element() {
13
- return this._activeRef ?? this._host;
14
- }
15
- get _resizeTarget() {
16
- return this._options.resizeTarget?.call(this._host) ?? this._host;
17
- }
18
- get _layer() {
19
- if (!this._isDeferred) {
20
- return this._host;
21
- }
22
- return this._options.layer?.() ?? this._host;
23
- }
24
- get _isDeferred() {
25
- return this._options.mode === 'deferred';
26
- }
27
- get _stateParameters() {
28
- const { initial, current } = this._state;
29
- return {
30
- initial,
31
- current,
32
- deltaX: current.width - initial.width,
33
- deltaY: current.height - initial.height,
34
- ghost: this._ghost,
35
- trigger: this._activeRef,
36
- };
37
- }
38
- constructor(host, options) {
39
- this._abortHandle = createAbortHandle();
40
- this._options = {
41
- enabled: true,
42
- layer: getDefaultLayer,
43
- };
44
- this._id = -1;
45
- this._hasPointerCapture = false;
46
- this._activeRef = null;
47
- this._ghost = null;
48
- this._host = host;
49
- this._host.addController(this);
50
- this.set(options);
51
- }
52
- get enabled() {
53
- return Boolean(this._options.enabled);
54
- }
55
- set(options) {
56
- Object.assign(this._options, options);
57
- }
58
- dispose() {
59
- this._setResizeState(false);
60
- this._removeGhostElement();
61
- this._activeRef = null;
62
- }
63
- hostConnected() {
64
- const { signal } = this._abortHandle;
65
- this._host.addEventListener('pointerdown', this, { signal });
66
- this._host.addEventListener('touchstart', this, { passive: false, signal });
67
- }
68
- hostDisconnected() {
69
- this._abortHandle.abort();
70
- this._setResizeCancelListener(false);
71
- this._removeGhostElement();
72
- }
73
- handleEvent(event) {
74
- if (!this.enabled) {
75
- return;
76
- }
77
- switch (event.type) {
78
- case 'touchstart':
79
- case 'contextmenu':
80
- event.preventDefault();
81
- break;
82
- case 'keydown':
83
- this._handleCancel(event);
84
- break;
85
- case 'pointerdown':
86
- this._handlePointerDown(event);
87
- break;
88
- case 'pointermove':
89
- this._handlePointerMove(event);
90
- break;
91
- case 'lostpointercapture':
92
- this._handlePointerEnd(event);
93
- break;
94
- }
95
- }
96
- _handlePointerDown(event) {
97
- if (event.button || this._shouldSkip(event)) {
98
- return;
99
- }
100
- this._setInitialState(event);
101
- this._createGhostElement();
102
- const parameters = { event, state: this._stateParameters };
103
- if (this._options.start?.call(this._host, parameters) === false) {
104
- this.dispose();
105
- return;
106
- }
107
- this._setResizeState();
108
- }
109
- _handlePointerMove(event) {
110
- if (!this._hasPointerCapture) {
111
- return;
112
- }
113
- this._updateState(event);
114
- const parameters = { event, state: this._stateParameters };
115
- this._options.resize?.call(this._host, parameters);
116
- this._state.current = parameters.state.current;
117
- this._updatePosition(this._isDeferred ? this._ghost : this._resizeTarget);
118
- }
119
- _handlePointerEnd(event) {
120
- const parameters = { event, state: this._stateParameters };
121
- this._options.end?.call(this._host, parameters);
122
- this._state.current = parameters.state.current;
123
- parameters.state.commit?.() ?? this._updatePosition(this._resizeTarget);
124
- this.dispose();
125
- }
126
- _handleCancel(event) {
127
- if (this._hasPointerCapture && isKey(event, escapeKey)) {
128
- this._options.cancel?.call(this._host, this._stateParameters);
129
- }
130
- }
131
- _shouldSkip(event) {
132
- this._setActiveRef(event);
133
- return !this._activeRef;
134
- }
135
- _setActiveRef(event) {
136
- const refs = this._options.ref?.map(({ value }) => value) ?? [this._host];
137
- this._activeRef =
138
- getElementFromPath((e) => refs.includes(e), event) ?? null;
139
- }
140
- _setResizeState(enabled = true) {
141
- this._hasPointerCapture = enabled;
142
- enabled
143
- ? this._element.setPointerCapture(this._id)
144
- : this._element.releasePointerCapture(this._id);
145
- this._setResizeCancelListener(enabled);
146
- for (const type of additionalEvents) {
147
- enabled
148
- ? this._host.addEventListener(type, this)
149
- : this._host.removeEventListener(type, this);
150
- }
151
- }
152
- _setResizeCancelListener(enabled = true) {
153
- enabled
154
- ? globalThis.addEventListener('keydown', this)
155
- : globalThis.removeEventListener('keydown', this);
156
- }
157
- _setInitialState({ pointerId }) {
158
- const dimensions = this._resizeTarget.getBoundingClientRect();
159
- this._id = pointerId;
160
- this._state = {
161
- initial: dimensions,
162
- current: structuredClone(dimensions),
163
- };
164
- }
165
- _updateState({ clientX, clientY }) {
166
- this._state.current.width = clientX - this._state.initial.x;
167
- this._state.current.height = clientY - this._state.initial.y;
168
- }
169
- _updatePosition(element) {
170
- if (element) {
171
- setStyles(element, {
172
- width: `${this._state.current.width}px`,
173
- height: `${this._state.current.height}px`,
174
- });
175
- }
176
- }
177
- _createGhostElement() {
178
- if (!this._isDeferred) {
179
- return;
180
- }
181
- this._ghost =
182
- this._options.deferredFactory?.call(this._host) ??
183
- createDefaultGhostElement(this._resizeTarget.getBoundingClientRect());
184
- this._ghost.setAttribute('data-resize-ghost', '');
185
- this._layer.append(this._ghost);
186
- }
187
- _removeGhostElement() {
188
- this._ghost?.remove();
189
- this._ghost = null;
190
- }
191
- }
192
- export function addResizeController(host, options) {
193
- return new ResizeController(host, options);
194
- }
195
- //# sourceMappingURL=resize-controller.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-controller.js","sourceRoot":"","sources":["../../../src/components/resize-container/resize-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { createAbortHandle } from '#internals/abort-handler.js';\nimport { escapeKey, isKey } from '#internals/controllers/key-bindings.js';\nimport { setStyles } from '#internals/utils/dom.js';\nimport { getElementFromPath } from '#internals/utils/events.js';\nimport { createDefaultGhostElement, getDefaultLayer } from './default-ghost.js';\nimport type { ResizeControllerConfiguration, ResizeState } from './types.js';\n\nconst additionalEvents = [\n 'pointermove',\n 'lostpointercapture',\n 'contextmenu',\n] as const;\n\ntype State = {\n initial: DOMRect;\n current: DOMRect;\n};\n\nclass ResizeController implements ReactiveController {\n private readonly _host: ReactiveControllerHost & HTMLElement;\n private readonly _abortHandle = createAbortHandle();\n\n private readonly _options: ResizeControllerConfiguration = {\n enabled: true,\n layer: getDefaultLayer,\n };\n\n private _id = -1;\n private _hasPointerCapture = false;\n private _state!: State;\n\n private _activeRef: HTMLElement | null = null;\n private _ghost: HTMLElement | null = null;\n\n private get _element(): HTMLElement {\n return this._activeRef ?? this._host;\n }\n\n private get _resizeTarget(): HTMLElement {\n return this._options.resizeTarget?.call(this._host) ?? this._host;\n }\n\n private get _layer(): HTMLElement {\n if (!this._isDeferred) {\n return this._host;\n }\n\n return this._options.layer?.() ?? this._host;\n }\n\n /** Whether the controller is in deferred mode. */\n private get _isDeferred(): boolean {\n return this._options.mode === 'deferred';\n }\n\n private get _stateParameters(): ResizeState {\n const { initial, current } = this._state;\n\n return {\n initial,\n current,\n deltaX: current.width - initial.width,\n deltaY: current.height - initial.height,\n ghost: this._ghost,\n trigger: this._activeRef,\n };\n }\n\n constructor(\n host: ReactiveControllerHost & HTMLElement,\n options?: ResizeControllerConfiguration\n ) {\n this._host = host;\n this._host.addController(this);\n\n this.set(options);\n }\n\n // #region Public API\n\n /** Whether the controller is enabled and will listen for events. */\n public get enabled(): boolean {\n return Boolean(this._options.enabled);\n }\n\n /** Updates the configuration of the resize controller. */\n public set(options?: ResizeControllerConfiguration): void {\n Object.assign(this._options, options);\n }\n\n /** Stops any resizing operation, cleaning up any additional elements and event listeners. */\n public dispose(): void {\n this._setResizeState(false);\n this._removeGhostElement();\n this._activeRef = null;\n }\n\n /** @internal */\n public hostConnected(): void {\n const { signal } = this._abortHandle;\n this._host.addEventListener('pointerdown', this, { signal });\n this._host.addEventListener('touchstart', this, { passive: false, signal });\n }\n\n /** @internal */\n public hostDisconnected(): void {\n this._abortHandle.abort();\n this._setResizeCancelListener(false);\n this._removeGhostElement();\n }\n\n /** @internal */\n public handleEvent(event: PointerEvent & KeyboardEvent): void {\n if (!this.enabled) {\n return;\n }\n\n switch (event.type) {\n case 'touchstart':\n // Prevent contextmenu default behavior during resize\n case 'contextmenu':\n event.preventDefault();\n break;\n case 'keydown':\n this._handleCancel(event);\n break;\n case 'pointerdown':\n this._handlePointerDown(event);\n break;\n case 'pointermove':\n this._handlePointerMove(event);\n break;\n case 'lostpointercapture':\n this._handlePointerEnd(event);\n break;\n }\n }\n // #endregion\n\n // #region Event handlers\n\n private _handlePointerDown(event: PointerEvent): void {\n // Non-primary buttons are ignored\n if (event.button || this._shouldSkip(event)) {\n return;\n }\n\n this._setInitialState(event);\n this._createGhostElement();\n const parameters = { event, state: this._stateParameters };\n\n if (this._options.start?.call(this._host, parameters) === false) {\n this.dispose();\n return;\n }\n\n this._setResizeState();\n }\n\n private _handlePointerMove(event: PointerEvent): void {\n if (!this._hasPointerCapture) {\n return;\n }\n\n this._updateState(event);\n\n const parameters = { event, state: this._stateParameters };\n this._options.resize?.call(this._host, parameters);\n this._state.current = parameters.state.current;\n this._updatePosition(this._isDeferred ? this._ghost : this._resizeTarget);\n }\n\n private _handlePointerEnd(event: PointerEvent): void {\n const parameters = { event, state: this._stateParameters };\n\n this._options.end?.call(this._host, parameters);\n this._state.current = parameters.state.current;\n\n parameters.state.commit?.() ?? this._updatePosition(this._resizeTarget);\n this.dispose();\n }\n\n private _handleCancel(event: KeyboardEvent): void {\n if (this._hasPointerCapture && isKey(event, escapeKey)) {\n this._options.cancel?.call(this._host, this._stateParameters);\n }\n }\n\n // #endregion\n\n // #region Internal API\n\n private _shouldSkip(event: PointerEvent): boolean {\n this._setActiveRef(event);\n return !this._activeRef;\n }\n\n private _setActiveRef(event: Event): void {\n const refs = this._options.ref?.map(({ value }) => value) ?? [this._host];\n\n this._activeRef =\n getElementFromPath((e) => refs.includes(e as HTMLElement), event) ?? null;\n }\n\n private _setResizeState(enabled = true): void {\n this._hasPointerCapture = enabled;\n\n enabled\n ? this._element.setPointerCapture(this._id)\n : this._element.releasePointerCapture(this._id);\n\n this._setResizeCancelListener(enabled);\n\n // Toggle additional event listeners\n for (const type of additionalEvents) {\n enabled\n ? this._host.addEventListener(type, this)\n : this._host.removeEventListener(type, this);\n }\n }\n\n private _setResizeCancelListener(enabled = true): void {\n enabled\n ? globalThis.addEventListener('keydown', this)\n : globalThis.removeEventListener('keydown', this);\n }\n\n private _setInitialState({ pointerId }: PointerEvent): void {\n const dimensions = this._resizeTarget.getBoundingClientRect();\n\n this._id = pointerId;\n this._state = {\n initial: dimensions,\n current: structuredClone(dimensions),\n };\n }\n\n private _updateState({ clientX, clientY }: PointerEvent): void {\n this._state.current.width = clientX - this._state.initial.x;\n this._state.current.height = clientY - this._state.initial.y;\n }\n\n private _updatePosition(element: HTMLElement | null): void {\n if (element) {\n setStyles(element, {\n width: `${this._state.current.width}px`,\n height: `${this._state.current.height}px`,\n });\n }\n }\n\n private _createGhostElement(): void {\n if (!this._isDeferred) {\n return;\n }\n\n this._ghost =\n this._options.deferredFactory?.call(this._host) ??\n createDefaultGhostElement(this._resizeTarget.getBoundingClientRect());\n\n this._ghost.setAttribute('data-resize-ghost', '');\n this._layer.append(this._ghost);\n }\n\n private _removeGhostElement(): void {\n this._ghost?.remove();\n this._ghost = null;\n }\n\n // #endregion\n}\n\nexport function addResizeController(\n host: ReactiveControllerHost & HTMLElement,\n options?: ResizeControllerConfiguration\n): ResizeController {\n return new ResizeController(host, options);\n}\n"]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: bootstrap;--ig-theme-variant: dark}`;
3
- //# sourceMappingURL=resize-indicator.bootstrap.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/dark/resize-indicator.bootstrap.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uDAAuD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: bootstrap;--ig-theme-variant: dark}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: fluent;--ig-theme-variant: dark}`;
3
- //# sourceMappingURL=resize-indicator.fluent.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/dark/resize-indicator.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,oDAAoD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: fluent;--ig-theme-variant: dark}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--resize-indicator: var(--ig-resize-indicator-resize-indicator, var(--ig-primary-300));--ig-theme: indigo;--ig-theme-variant: dark}`;
3
- //# sourceMappingURL=resize-indicator.indigo.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/dark/resize-indicator.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2IAA2I,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--resize-indicator: var(--ig-resize-indicator-resize-indicator, var(--ig-primary-300));--ig-theme: indigo;--ig-theme-variant: dark}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: material;--ig-theme-variant: dark}`;
3
- //# sourceMappingURL=resize-indicator.material.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.material.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/dark/resize-indicator.material.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,sDAAsD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: material;--ig-theme-variant: dark}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--resize-indicator: var(--ig-resize-indicator-resize-indicator, var(--ig-primary-500));--ig-theme-variant: dark}`;
3
- //# sourceMappingURL=resize-indicator.shared.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/dark/resize-indicator.shared.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wHAAwH,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--resize-indicator: var(--ig-resize-indicator-resize-indicator, var(--ig-primary-500));--ig-theme-variant: dark}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: bootstrap;--ig-theme-variant: light}`;
3
- //# sourceMappingURL=resize-indicator.bootstrap.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/light/resize-indicator.bootstrap.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wDAAwD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: bootstrap;--ig-theme-variant: light}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: fluent;--ig-theme-variant: light}`;
3
- //# sourceMappingURL=resize-indicator.fluent.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/light/resize-indicator.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qDAAqD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: fluent;--ig-theme-variant: light}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: indigo;--ig-theme-variant: light}`;
3
- //# sourceMappingURL=resize-indicator.indigo.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/light/resize-indicator.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qDAAqD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: indigo;--ig-theme-variant: light}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--ig-theme: material;--ig-theme-variant: light}`;
3
- //# sourceMappingURL=resize-indicator.material.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.material.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/light/resize-indicator.material.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uDAAuD,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--ig-theme: material;--ig-theme-variant: light}`;\n "]}
@@ -1,3 +0,0 @@
1
- import { css } from 'lit';
2
- export const styles = css `:host{--resize-indicator: var(--ig-resize-indicator-resize-indicator, var(--ig-primary-500));--ig-theme-variant: light}`;
3
- //# sourceMappingURL=resize-indicator.shared.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"resize-indicator.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/resize-container/themes/light/resize-indicator.shared.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yHAAyH,CAAC","sourcesContent":["\n import { css } from 'lit';\n export const styles = css`:host{--resize-indicator: var(--ig-resize-indicator-resize-indicator, var(--ig-primary-500));--ig-theme-variant: light}`;\n "]}