igniteui-webcomponents 5.2.3 → 5.3.0-RC.0

package/components/tile-manager/themes/light/tile-manager.shared.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/light/tile-manager.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ovCAAovC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--resting-elevation: var(--ig-tile-manager-resting-elevation, var(--ig-elevation-0));--drag-elevation: var(--ig-tile-manager-drag-elevation, var(--ig-elevation-5));--background: var(--ig-tile-manager-background, var(--ig-gray-100));--tile-background: var(--ig-tile-manager-tile-background, var(--ig-surface-500));--title-color: var(--ig-tile-manager-title-color, var(--ig-gray-900));--header-background: var(--ig-tile-manager-header-background, var(--ig-surface-500));--content-background: var(--ig-tile-manager-content-background, var(--ig-surface-500));--content-color: var(--ig-tile-manager-content-color, var(--ig-gray-700));--border-color: var(--ig-tile-manager-border-color, transparent);--hover-border-color: var(--ig-tile-manager-hover-border-color, var(--ig-gray-400));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-100) h s l/0.3));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-100) h s l/0.6));--ghost-border: var(--ig-tile-manager-ghost-border, var(--ig-primary-500));--divider-color: var(--ig-tile-manager-divider-color, transparent);--border-radius: var(--ig-tile-manager-border-radius, 0.25rem);--default-size: var(--ig-tile-manager-default-size, 2)}`;\n"]}

package/components/tile-manager/themes/shared/tile/tile.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/shared/tile/tile.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--pad-block: max(var(--is-large, 1) * max(0.5625rem, -1 * 0.5625rem), var(--is-medium, 1) * max(0.5625rem, -1 * 0.5625rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}::slotted([slot=title]){font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}`;
+//# sourceMappingURL=tile.bootstrap.css.js.map

package/components/tile-manager/themes/shared/tile/tile.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/tile-manager/themes/shared/tile/tile.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gkBAAgkB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--pad-block: max(var(--is-large, 1) * max(0.5625rem, -1 * 0.5625rem), var(--is-medium, 1) * max(0.5625rem, -1 * 0.5625rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}::slotted([slot=title]){font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}`;\n"]}

package/components/tile-manager/themes/shared/tile/tile.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/shared/tile/tile.common.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part~=drag-over]::after,[part~=base]::after{content:"";position:absolute;pointer-events:none;inset:0;width:100%;height:100%;border-radius:inherit}:host{--component-size: var(--ig-size, var(--default-size));--_border-radius: var(--border-radius)}[part~=base]{background:var(--tile-background);border-radius:var(--_border-radius);box-shadow:var(--resting-elevation)}[part~=base]::after{border:.0625rem solid var(--border-color)}[part~=base]:not([part~=resizable]):hover::after{border:.0625rem solid var(--hover-border-color)}:host([part=resizing]),:host([part=dragging]){border-radius:var(--border-radius)}:host([part=dragging]){background:var(--placeholder-background);border:.0625rem solid var(--ghost-border)}[part~=base][part~=resizing]{opacity:.3}[part=content-container]{background:var(--content-background);color:var(--content-color)}[part=ghost]{border-radius:var(--border-radius);border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part~=drag-over]::after{z-index:1000;border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part=header]{background:var(--header-background);border-top-left-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius)}[part=title]{color:var(--title-color)}igc-divider{--color: var(--divider-color)}igc-resize{--resize-indicator: var(--ghost-border)}igc-resize[part~=side-adorner]::part(trigger-side){background-color:rgba(0,0,0,0);right:0}igc-resize[part~=corner-adorner]::part(trigger){background-color:rgba(0,0,0,0);right:0;bottom:0}igc-resize[part~=bottom-adorner]::part(trigger-bottom){background-color:rgba(0,0,0,0);bottom:0}`;
+//# sourceMappingURL=tile.common.css.js.map

package/components/tile-manager/themes/shared/tile/tile.common.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/tile-manager/themes/shared/tile/tile.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,umDAAumD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=drag-over]::after,[part~=base]::after{content:\"\";position:absolute;pointer-events:none;inset:0;width:100%;height:100%;border-radius:inherit}:host{--component-size: var(--ig-size, var(--default-size));--_border-radius: var(--border-radius)}[part~=base]{background:var(--tile-background);border-radius:var(--_border-radius);box-shadow:var(--resting-elevation)}[part~=base]::after{border:.0625rem solid var(--border-color)}[part~=base]:not([part~=resizable]):hover::after{border:.0625rem solid var(--hover-border-color)}:host([part=resizing]),:host([part=dragging]){border-radius:var(--border-radius)}:host([part=dragging]){background:var(--placeholder-background);border:.0625rem solid var(--ghost-border)}[part~=base][part~=resizing]{opacity:.3}[part=content-container]{background:var(--content-background);color:var(--content-color)}[part=ghost]{border-radius:var(--border-radius);border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part~=drag-over]::after{z-index:1000;border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part=header]{background:var(--header-background);border-top-left-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius)}[part=title]{color:var(--title-color)}igc-divider{--color: var(--divider-color)}igc-resize{--resize-indicator: var(--ghost-border)}igc-resize[part~=side-adorner]::part(trigger-side){background-color:rgba(0,0,0,0);right:0}igc-resize[part~=corner-adorner]::part(trigger){background-color:rgba(0,0,0,0);right:0;bottom:0}igc-resize[part~=bottom-adorner]::part(trigger-bottom){background-color:rgba(0,0,0,0);bottom:0}`;\n"]}

package/components/tile-manager/themes/shared/tile/tile.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/shared/tile/tile.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--pad-block: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}`;
+//# sourceMappingURL=tile.fluent.css.js.map

package/components/tile-manager/themes/shared/tile/tile.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/tile-manager/themes/shared/tile/tile.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2KAA2K,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--pad-block: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}`;\n"]}

package/components/tile-manager/themes/shared/tile/tile.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/shared/tile/tile.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--pad-block: max(var(--is-large, 1) * max(0.875rem, -1 * 0.875rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}[part=content-container] ::slotted(*){font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}`;
+//# sourceMappingURL=tile.indigo.css.js.map

package/components/tile-manager/themes/shared/tile/tile.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/tile-manager/themes/shared/tile/tile.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8mBAA8mB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--pad-block: max(var(--is-large, 1) * max(0.875rem, -1 * 0.875rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem))}[part=content-container] ::slotted(*){font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}`;\n"]}

package/components/tile-manager/themes/shared/tile-manager.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/shared/tile-manager.common.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `[part=base]{background:var(--background)}`;
+//# sourceMappingURL=tile-manager.common.css.js.map

package/components/tile-manager/themes/shared/tile-manager.common.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.common.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/shared/tile-manager.common.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2CAA2C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base]{background:var(--background)}`;\n"]}

package/components/tile-manager/themes/tile-manager.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/tile-manager.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+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:block;--min-col-width: 200px;--min-row-height: 200px}[part~=base]{display:grid;position:relative;padding:1.25rem;width:100%;height:100%;grid-template-columns:repeat(var(--column-count, auto-fit), minmax(min(var(--min-col-width, 100%)), 1fr));grid-template-rows:repeat(var(--row-count, auto), minmax(min(var(--min-row-height, 100%)), 1fr));grid-auto-rows:var(--auto-rows, minmax(var(--min-row-height), var(--min-row-height)));grid-auto-columns:var(--auto-columns, 0);grid-gap:var(--grid-gap, 0.625rem);grid-auto-flow:dense;overflow:auto hidden}[part~=maximized-tile]{overflow:clip}`;
+//# sourceMappingURL=tile-manager.base.css.js.map

package/components/tile-manager/themes/tile-manager.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.base.css.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/tile-manager.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4hDAA4hD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport 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:block;--min-col-width: 200px;--min-row-height: 200px}[part~=base]{display:grid;position:relative;padding:1.25rem;width:100%;height:100%;grid-template-columns:repeat(var(--column-count, auto-fit), minmax(min(var(--min-col-width, 100%)), 1fr));grid-template-rows:repeat(var(--row-count, auto), minmax(min(var(--min-row-height, 100%)), 1fr));grid-auto-rows:var(--auto-rows, minmax(var(--min-row-height), var(--min-row-height)));grid-auto-columns:var(--auto-columns, 0);grid-gap:var(--grid-gap, 0.625rem);grid-auto-flow:dense;overflow:auto hidden}[part~=maximized-tile]{overflow:clip}`;\n"]}

package/components/tile-manager/themes/tile.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/tile-manager/themes/tile.base.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+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{--pad-block: max(var(--is-large, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-medium, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem));--pad-inline: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));display:block;position:relative;grid-column:var(--ig-col-start, auto)/span var(--ig-col-span, 1);grid-row:var(--ig-row-start, auto)/span var(--ig-row-span, 1)}:host([part=resizing]) igc-resize,:host([part=dragging]) igc-resize{--resize-visibility: hidden}:host([part=resizing]) igc-resize::part(active)::after,:host([part=dragging]) igc-resize::part(active)::after{border:none}[part~=tile-container]{width:100%;height:100%}[part~=base]{width:100%;height:100%;overflow:hidden}[part=content-container]{display:block;border-radius:inherit}[part=content-container] ::slotted(*){font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}:host([maximized]){position:absolute;inset:0;width:100%;height:100%;z-index:10;grid-column:unset;grid-row:unset}:host([maximized]) [part~=base]{width:100%;height:100%}[part=ghost]{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0);z-index:10}[part=header]{display:flex;align-items:center;gap:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));width:100%;padding-block:var(--pad-block);padding-inline:var(--pad-inline)}:host([disable-fullscreen][disable-maximize]) igc-divider{display:none}[part=title]{display:flex;flex-direction:column;justify-content:center;flex:1 0 0%;overflow:hidden;min-width:2ch}::slotted([slot=title]){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;min-width:2ch;margin-bottom:0;display:block}[part=actions]{display:flex;gap:.5rem;margin-inline-start:auto;flex-shrink:0}`;
+//# sourceMappingURL=tile.base.css.js.map

package/components/tile-manager/themes/tile.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.base.css.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/tile.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,q/GAAq/G,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport 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{--pad-block: max(var(--is-large, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-medium, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem));--pad-inline: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));display:block;position:relative;grid-column:var(--ig-col-start, auto)/span var(--ig-col-span, 1);grid-row:var(--ig-row-start, auto)/span var(--ig-row-span, 1)}:host([part=resizing]) igc-resize,:host([part=dragging]) igc-resize{--resize-visibility: hidden}:host([part=resizing]) igc-resize::part(active)::after,:host([part=dragging]) igc-resize::part(active)::after{border:none}[part~=tile-container]{width:100%;height:100%}[part~=base]{width:100%;height:100%;overflow:hidden}[part=content-container]{display:block;border-radius:inherit}[part=content-container] ::slotted(*){font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}:host([maximized]){position:absolute;inset:0;width:100%;height:100%;z-index:10;grid-column:unset;grid-row:unset}:host([maximized]) [part~=base]{width:100%;height:100%}[part=ghost]{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0);z-index:10}[part=header]{display:flex;align-items:center;gap:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));width:100%;padding-block:var(--pad-block);padding-inline:var(--pad-inline)}:host([disable-fullscreen][disable-maximize]) igc-divider{display:none}[part=title]{display:flex;flex-direction:column;justify-content:center;flex:1 0 0%;overflow:hidden;min-width:2ch}::slotted([slot=title]){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;min-width:2ch;margin-bottom:0;display:block}[part=actions]{display:flex;gap:.5rem;margin-inline-start:auto;flex-shrink:0}`;\n"]}

package/components/tile-manager/themes/tile.d.ts

@@ -0,0 +1,2 @@
+import type { Themes } from '../../../theming/types.js';
+export declare const all: Themes;

package/components/tile-manager/themes/tile.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+import { styles as bootstrap } from './shared/tile/tile.bootstrap.css.js';
+import { styles as fluent } from './shared/tile/tile.fluent.css.js';
+import { styles as indigo } from './shared/tile/tile.indigo.css.js';
+const light = {
+    bootstrap: css `
+    ${bootstrap}
+  `,
+    fluent: css `
+    ${fluent}
+  `,
+    indigo: css `
+    ${indigo}
+  `,
+};
+const dark = {
+    bootstrap: css `
+    ${bootstrap}
+  `,
+    fluent: css `
+    ${fluent}
+  `,
+    indigo: css `
+    ${indigo}
+  `,
+};
+export const all = { light, dark };
+//# sourceMappingURL=tile.js.map

package/components/tile-manager/themes/tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,GAAG,CAAA;MACV,SAAS;GACZ;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM;GACT;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/tile/tile.bootstrap.css.js';\nimport { styles as fluent } from './shared/tile/tile.fluent.css.js';\nimport { styles as indigo } from './shared/tile/tile.indigo.css.js';\n\nconst light = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nconst dark = {\n  bootstrap: css`\n    ${bootstrap}\n  `,\n  fluent: css`\n    ${fluent}\n  `,\n  indigo: css`\n    ${indigo}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/tile-manager/tile-ghost-util.d.ts

@@ -0,0 +1,3 @@
+import type IgcTileComponent from './tile.js';
+export declare function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent;
+export declare function createTileGhost(tile: IgcTileComponent): HTMLElement;

package/components/tile-manager/tile-ghost-util.js

@@ -0,0 +1,47 @@
+export function createTileDragGhost(tile) {
+    const clone = tile.cloneNode(true);
+    const computed = getComputedStyle(tile);
+    const { width, height } = tile.getBoundingClientRect();
+    Object.assign(clone, {
+        id: null,
+        inert: true,
+        position: -1,
+    });
+    Object.assign(clone.style, {
+        position: 'absolute',
+        contain: 'strict',
+        top: 0,
+        left: 0,
+        width: `${width}px`,
+        height: `${height}px`,
+        opacity: 0.6,
+        background: computed.getPropertyValue('--tile-background'),
+        border: `1px solid ${computed.getPropertyValue('--hover-border-color')}`,
+        borderRadius: computed.getPropertyValue('--border-radius'),
+        boxShadow: computed.getPropertyValue('--drag-elevation'),
+        zIndex: 1000,
+        viewTransitionName: 'dragged-tile-ghost',
+    });
+    return clone;
+}
+export function createTileGhost(tile) {
+    const element = document.createElement('div');
+    const computed = getComputedStyle(tile);
+    const { x, y, width, height } = tile.getBoundingClientRect();
+    const { scrollX, scrollY } = window;
+    Object.assign(element.style, {
+        boxSizing: 'border-box',
+        position: 'absolute',
+        contain: 'strict',
+        top: `${y + scrollY}px`,
+        left: `${x + scrollX}px`,
+        zIndex: 1000,
+        background: computed.getPropertyValue('--placeholder-background'),
+        border: `1px solid ${computed.getPropertyValue('--ghost-border')}`,
+        borderRadius: computed.getPropertyValue('--border-radius'),
+        width: `${width}px`,
+        height: `${height}px`,
+    });
+    return element;
+}
+//# sourceMappingURL=tile-ghost-util.js.map

package/components/tile-manager/tile-ghost-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-ghost-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-ghost-util.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,mBAAmB,CAAC,IAAsB;IACxD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;IACvD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAEvD,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;QACnB,EAAE,EAAE,IAAI;QACR,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,CAAC,CAAC;KACb,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;QACzB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,GAAG,KAAK,IAAI;QACnB,MAAM,EAAE,GAAG,MAAM,IAAI;QACrB,OAAO,EAAE,GAAG;QACZ,UAAU,EAAE,QAAQ,CAAC,gBAAgB,CAAC,mBAAmB,CAAC;QAC1D,MAAM,EAAE,aAAa,QAAQ,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,EAAE;QACxE,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;QAC1D,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;QACxD,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,oBAAoB;KACzC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAsB;IACpD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7D,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IAEpC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;QACjB,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACvB,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACxB,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,QAAQ,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;QACjE,MAAM,EAAE,aAAa,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE;QAClE,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;QAC1D,KAAK,EAAE,GAAG,KAAK,IAAI;QACnB,MAAM,EAAE,GAAG,MAAM,IAAI;KACtB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import type IgcTileComponent from './tile.js';\n\nexport function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {\n  const clone = tile.cloneNode(true) as IgcTileComponent;\n  const computed = getComputedStyle(tile);\n\n  const { width, height } = tile.getBoundingClientRect();\n\n  Object.assign(clone, {\n    id: null,\n    inert: true,\n    position: -1,\n  });\n\n  Object.assign(clone.style, {\n    position: 'absolute',\n    contain: 'strict',\n    top: 0,\n    left: 0,\n    width: `${width}px`,\n    height: `${height}px`,\n    opacity: 0.6,\n    background: computed.getPropertyValue('--tile-background'),\n    border: `1px solid ${computed.getPropertyValue('--hover-border-color')}`,\n    borderRadius: computed.getPropertyValue('--border-radius'),\n    boxShadow: computed.getPropertyValue('--drag-elevation'),\n    zIndex: 1000,\n    viewTransitionName: 'dragged-tile-ghost',\n  });\n\n  return clone;\n}\n\nexport function createTileGhost(tile: IgcTileComponent): HTMLElement {\n  const element = document.createElement('div');\n  const computed = getComputedStyle(tile);\n  const { x, y, width, height } = tile.getBoundingClientRect();\n  const { scrollX, scrollY } = window;\n\n  Object.assign(element.style, {\n    boxSizing: 'border-box',\n    position: 'absolute',\n    contain: 'strict',\n    top: `${y + scrollY}px`,\n    left: `${x + scrollX}px`,\n    zIndex: 1000,\n    background: computed.getPropertyValue('--placeholder-background'),\n    border: `1px solid ${computed.getPropertyValue('--ghost-border')}`,\n    borderRadius: computed.getPropertyValue('--border-radius'),\n    width: `${width}px`,\n    height: `${height}px`,\n  });\n\n  return element;\n}\n"]}

package/components/tile-manager/tile-manager.d.ts

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+import type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';
+import IgcTileComponent from './tile.js';
+/**
+ * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.
+ *
+ * @element igc-tile-manager
+ *
+ */
+export default class IgcTileManagerComponent extends LitElement {
+    static readonly tagName = "igc-tile-manager";
+    static styles: import("lit").CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    static register(): void;
+    private _internalStyles;
+    private _dragMode;
+    private _resizeMode;
+    private _rowCount;
+    private _columnCount;
+    private _gap?;
+    private _minColWidth?;
+    private _minRowHeight?;
+    private _serializer;
+    private _tilesState;
+    private _grid;
+    private _context;
+    private _createContext;
+    private _setManagerContext;
+    /**
+     * Whether resize operations are enabled.
+     *
+     * @attr resize-mode
+     * @default none
+     */
+    set resizeMode(value: TileManagerResizeMode);
+    get resizeMode(): TileManagerResizeMode;
+    /**
+     * Whether drag and drop operations are enabled.
+     *
+     * @attr drag-mode
+     * @default none
+     */
+    set dragMode(value: TileManagerDragMode);
+    get dragMode(): TileManagerDragMode;
+    /**
+     * Sets the number of columns for the tile manager.
+     * Setting value <= than zero will trigger a responsive layout.
+     *
+     * @attr column-count
+     * @default 0
+     */
+    set columnCount(value: number);
+    get columnCount(): number;
+    /**
+     * Sets the number of rows for the tile manager.
+     * Setting a value <= than zero will trigger a responsive layout.
+     *
+     * @attr row-count
+     * @default 0
+     */
+    set rowCount(value: number);
+    get rowCount(): number;
+    /**
+     * Sets the minimum width for a column unit in the tile manager.
+     * @attr min-column-width
+     */
+    set minColumnWidth(value: string | undefined);
+    get minColumnWidth(): string | undefined;
+    /**
+     * Sets the minimum height for a row unit in the tile manager.
+     * @attr min-row-height
+     */
+    set minRowHeight(value: string | undefined);
+    get minRowHeight(): string | undefined;
+    /**
+     * Sets the gap size of the the tile manager.
+     *
+     * @attr gap
+     */
+    set gap(value: string | undefined);
+    get gap(): string | undefined;
+    /**
+     * Gets the tiles sorted by their position in the layout.
+     * @property
+     */
+    get tiles(): IgcTileComponent[];
+    constructor();
+    protected firstUpdated(): void;
+    private _observerCallback;
+    saveLayout(): string;
+    loadLayout(data: string): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tile-manager': IgcTileManagerComponent;
+    }
+}

package/components/tile-manager/tile-manager.js

@@ -0,0 +1,190 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var IgcTileManagerComponent_1;
+import { ContextProvider } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { tileManagerContext, } from '../common/context.js';
+import { createMutationController, } from '../common/controllers/mutation-observer.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { asNumber, partNameMap } from '../common/util.js';
+import { createTilesState } from './position.js';
+import { createSerializer } from './serializer.js';
+import { all } from './themes/container.js';
+import { styles as shared } from './themes/shared/tile-manager.common.css.js';
+import { styles } from './themes/tile-manager.base.css.js';
+import IgcTileComponent from './tile.js';
+let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerComponent extends LitElement {
+    static register() {
+        registerComponent(IgcTileManagerComponent_1, IgcTileComponent);
+    }
+    _createContext() {
+        return {
+            instance: this,
+            grid: this._grid,
+        };
+    }
+    _setManagerContext() {
+        this._context.setValue(this._createContext(), true);
+    }
+    set resizeMode(value) {
+        this._resizeMode = value;
+        this._setManagerContext();
+    }
+    get resizeMode() {
+        return this._resizeMode;
+    }
+    set dragMode(value) {
+        this._dragMode = value;
+        this._setManagerContext();
+    }
+    get dragMode() {
+        return this._dragMode;
+    }
+    set columnCount(value) {
+        this._columnCount = Math.max(0, asNumber(value));
+        Object.assign(this._internalStyles, {
+            '--column-count': this._columnCount || undefined,
+        });
+    }
+    get columnCount() {
+        return this._columnCount;
+    }
+    set rowCount(value) {
+        this._rowCount = Math.max(0, asNumber(value));
+        Object.assign(this._internalStyles, {
+            '--row-count': this._rowCount || undefined,
+        });
+    }
+    get rowCount() {
+        return this._rowCount;
+    }
+    set minColumnWidth(value) {
+        this._minColWidth = value ?? undefined;
+        Object.assign(this._internalStyles, {
+            '--min-col-width': this._minColWidth,
+        });
+    }
+    get minColumnWidth() {
+        return this._minColWidth;
+    }
+    set minRowHeight(value) {
+        this._minRowHeight = value ?? undefined;
+        Object.assign(this._internalStyles, {
+            '--min-row-height': this._minRowHeight,
+        });
+    }
+    get minRowHeight() {
+        return this._minRowHeight;
+    }
+    set gap(value) {
+        this._gap = value ?? undefined;
+        Object.assign(this._internalStyles, {
+            '--grid-gap': this._gap,
+        });
+    }
+    get gap() {
+        return this._gap;
+    }
+    get tiles() {
+        return this._tilesState.tiles;
+    }
+    constructor() {
+        super();
+        this._internalStyles = {};
+        this._dragMode = 'none';
+        this._resizeMode = 'none';
+        this._rowCount = 0;
+        this._columnCount = 0;
+        this._serializer = createSerializer(this);
+        this._tilesState = createTilesState(this);
+        this._grid = createRef();
+        this._context = new ContextProvider(this, {
+            context: tileManagerContext,
+            initialValue: this._createContext(),
+        });
+        createMutationController(this, {
+            callback: this._observerCallback,
+            filter: [IgcTileComponent.tagName],
+            config: {
+                childList: true,
+            },
+        });
+    }
+    firstUpdated() {
+        this._tilesState.assignPositions();
+        this._tilesState.assignTiles();
+        this._setManagerContext();
+    }
+    _observerCallback({ changes: { added, removed }, }) {
+        const ownAdded = added.filter(({ target }) => target.closest(this.tagName) === this);
+        const ownRemoved = removed.filter(({ target }) => target.closest(this.tagName) === this);
+        for (const remove of ownRemoved) {
+            this._tilesState.remove(remove.node);
+        }
+        for (const added of ownAdded) {
+            this._tilesState.add(added.node);
+        }
+        this._tilesState.assignTiles();
+    }
+    saveLayout() {
+        return this._serializer.saveAsJSON();
+    }
+    loadLayout(data) {
+        this._serializer.loadFromJSON(data);
+    }
+    render() {
+        const parts = partNameMap({
+            base: true,
+            'maximized-tile': this.tiles.some((tile) => tile.maximized),
+        });
+        return html `
+      <div
+        ${ref(this._grid)}
+        style=${styleMap(this._internalStyles)}
+        part=${parts}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+IgcTileManagerComponent.tagName = 'igc-tile-manager';
+IgcTileManagerComponent.styles = [styles, shared];
+IgcTileManagerComponent.shadowRootOptions = {
+    mode: 'open',
+    slotAssignment: 'manual',
+};
+__decorate([
+    property({ attribute: 'resize-mode' })
+], IgcTileManagerComponent.prototype, "resizeMode", null);
+__decorate([
+    property({ attribute: 'drag-mode' })
+], IgcTileManagerComponent.prototype, "dragMode", null);
+__decorate([
+    property({ type: Number, attribute: 'column-count' })
+], IgcTileManagerComponent.prototype, "columnCount", null);
+__decorate([
+    property({ type: Number, attribute: 'row-count' })
+], IgcTileManagerComponent.prototype, "rowCount", null);
+__decorate([
+    property({ attribute: 'min-column-width' })
+], IgcTileManagerComponent.prototype, "minColumnWidth", null);
+__decorate([
+    property({ attribute: 'min-row-height' })
+], IgcTileManagerComponent.prototype, "minRowHeight", null);
+__decorate([
+    property()
+], IgcTileManagerComponent.prototype, "gap", null);
+IgcTileManagerComponent = IgcTileManagerComponent_1 = __decorate([
+    themes(all)
+], IgcTileManagerComponent);
+export default IgcTileManagerComponent;
+//# sourceMappingURL=tile-manager.js.map

package/components/tile-manager/tile-manager.js.map

@@ -0,0 +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 { LitElement, html } 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 { themes } from '../../theming/theming-decorator.js';\nimport {\n  type TileManagerContext,\n  tileManagerContext,\n} from '../common/context.js';\nimport {\n  type MutationControllerParams,\n  createMutationController,\n} from '../common/controllers/mutation-observer.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { asNumber, partNameMap } 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/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n */\n@themes(all)\nexport default class IgcTileManagerComponent extends LitElement {\n  public static readonly tagName = 'igc-tile-manager';\n  public static override styles = [styles, shared];\n\n  public static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    slotAssignment: 'manual',\n  };\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 _rowCount = 0;\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 number of rows for the tile manager.\n   * Setting a value <= than zero will trigger a responsive layout.\n   *\n   * @attr row-count\n   * @default 0\n   */\n  @property({ type: Number, attribute: 'row-count' })\n  public set rowCount(value: number) {\n    this._rowCount = Math.max(0, asNumber(value));\n    Object.assign(this._internalStyles, {\n      '--row-count': this._rowCount || undefined,\n    });\n  }\n\n  public get rowCount(): number {\n    return this._rowCount;\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 of the 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    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [IgcTileComponent.tagName],\n      config: {\n        childList: true,\n      },\n    });\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  public saveLayout(): string {\n    return this._serializer.saveAsJSON();\n  }\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 = partNameMap({\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=${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"]}