igniteui-webcomponents 5.2.0 → 5.3.0-alpha.0

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

@@ -0,0 +1,157 @@
+import { findElementFromEventPath } from '../common/util.js';
+class ResizeController {
+    static createDefaultGhost(host) {
+        const { width, height } = host.getBoundingClientRect();
+        const ghostElement = document.createElement('div');
+        Object.assign(ghostElement.style, {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 1000,
+            background: 'pink',
+            opacity: 0.85,
+            width: `${width}px`,
+            height: `${height}px`,
+        });
+        return ghostElement;
+    }
+    get _element() {
+        return this._config?.ref ? this._config.ref.value : this._host;
+    }
+    constructor(host, config) {
+        this._config = {};
+        this._id = -1;
+        this._hasPointerCapture = false;
+        this._ghost = null;
+        this._host = host;
+        this._host.addController(this);
+        this.setConfig(config);
+    }
+    _createGhost() {
+        if (this._config.mode !== 'deferred') {
+            return;
+        }
+        this._ghost = this._config.deferredFactory
+            ? this._config.deferredFactory()
+            : ResizeController.createDefaultGhost(this._host);
+        this._host.append(this._ghost);
+    }
+    _disposeGhost() {
+        if (this._ghost) {
+            this._ghost.remove();
+            this._ghost = null;
+        }
+    }
+    _setPointerCaptureState(state) {
+        this._hasPointerCapture = state;
+        state
+            ? this._element.setPointerCapture(this._id)
+            : this._element.releasePointerCapture(this._id);
+        for (const event of ResizeController.auxiliaryEvents) {
+            state
+                ? this._host.addEventListener(event, this)
+                : this._host.removeEventListener(event, this);
+        }
+    }
+    _setInitialState({ pointerId }) {
+        const resizableElement = this._config.resizableElement
+            ? this._config.resizableElement()
+            : this._host;
+        this._initialState = resizableElement.getBoundingClientRect();
+        this._state = structuredClone(this._initialState);
+        this._id = pointerId;
+    }
+    _createCallbackParams(event) {
+        return {
+            event,
+            state: {
+                initial: this._initialState,
+                current: this._state,
+                dx: this._state.width - this._initialState.width,
+                dy: this._state.height - this._initialState.height,
+                ghost: this._ghost,
+            },
+        };
+    }
+    _shouldSkip(event) {
+        return !findElementFromEventPath((e) => e === this._element, event);
+    }
+    _handlePointerDown(event) {
+        if (event.button) {
+            return;
+        }
+        if (this._config?.start) {
+            this._setInitialState(event);
+            this._createGhost();
+            this._config.start.call(this._host, this._createCallbackParams(event));
+            this._setPointerCaptureState(true);
+        }
+    }
+    _handlePointerMove(event) {
+        if (!this._hasPointerCapture) {
+            return;
+        }
+        if (this._config?.resize) {
+            const params = this._createCallbackParams(event);
+            this._config.resize.call(this._host, params);
+            this._state = params.state.current;
+        }
+        const target = this._config.mode === 'deferred' ? this._ghost : this._host;
+        Object.assign(target.style, {
+            width: `${this._state.width}px`,
+            height: `${this._state.height}px`,
+        });
+    }
+    _handlePointerEnd(event) {
+        Object.assign(this._host.style, {
+            width: `${this._state.width}px`,
+            height: `${this._state.height}px`,
+        });
+        if (this._config?.end) {
+            this._config.end.call(this._host, this._createCallbackParams(event));
+        }
+        this.dispose();
+    }
+    handleEvent(event) {
+        if (this._shouldSkip(event)) {
+            return;
+        }
+        switch (event.type) {
+            case 'touchstart':
+                event.preventDefault();
+                break;
+            case 'pointerdown':
+                this._handlePointerDown(event);
+                break;
+            case 'pointermove':
+                this._handlePointerMove(event);
+                break;
+            case 'lostpointercapture':
+                this._handlePointerEnd(event);
+                break;
+        }
+    }
+    setConfig(config) {
+        Object.assign(this._config, config);
+    }
+    dispose() {
+        this._disposeGhost();
+        this._setPointerCaptureState(false);
+    }
+    hostConnected() {
+        this._host.addEventListener('pointerdown', this);
+        this._host.addEventListener('touchstart', this, { passive: false });
+    }
+    hostDisconnected() {
+        this._host.removeEventListener('pointerdown', this);
+        this._host.removeEventListener('touchstart', this);
+    }
+}
+ResizeController.auxiliaryEvents = [
+    'pointermove',
+    'lostpointercapture',
+];
+export function addResizeController(host, config) {
+    return new ResizeController(host, config);
+}
+//# sourceMappingURL=resize-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize-controller.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { findElementFromEventPath } from '../common/util.js';\n\nexport type ResizeMode = 'immediate' | 'deferred';\n\nexport type ResizeCallbackParams = {\n  event: PointerEvent;\n  state: {\n    initial: DOMRect;\n    current: DOMRect;\n    dx: number;\n    dy: number;\n    ghost: HTMLElement | null;\n  };\n};\n\ntype ResizeControllerCallback = (params: ResizeCallbackParams) => unknown;\n\ntype ResizeControllerConfig = {\n  ref?: Ref<HTMLElement>;\n  mode?: ResizeMode;\n  deferredFactory?: (element?: HTMLElement) => HTMLElement;\n  start?: ResizeControllerCallback;\n  resize?: ResizeControllerCallback;\n  end?: ResizeControllerCallback;\n  resizableElement?: () => Element;\n};\n\nclass ResizeController implements ReactiveController {\n  private static readonly auxiliaryEvents = [\n    'pointermove',\n    'lostpointercapture',\n  ] as const;\n\n  private static createDefaultGhost(host: HTMLElement): HTMLElement {\n    const { width, height } = host.getBoundingClientRect();\n    const ghostElement = document.createElement('div');\n\n    Object.assign(ghostElement.style, {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 1000,\n      background: 'pink',\n      opacity: 0.85,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n\n    return ghostElement;\n  }\n\n  private _host: ReactiveControllerHost & HTMLElement;\n  private _config: ResizeControllerConfig = {};\n  private _id = -1;\n  private _hasPointerCapture = false;\n\n  private _ghost: HTMLElement | null = null;\n  protected _initialState!: DOMRect;\n  private _state!: DOMRect;\n\n  protected get _element(): HTMLElement {\n    return this._config?.ref ? this._config.ref.value! : this._host;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    config?: ResizeControllerConfig\n  ) {\n    this._host = host;\n    this._host.addController(this);\n\n    this.setConfig(config);\n  }\n\n  // Internal state helpers\n\n  private _createGhost(): void {\n    if (this._config.mode !== 'deferred') {\n      return;\n    }\n\n    this._ghost = this._config.deferredFactory\n      ? this._config.deferredFactory()\n      : ResizeController.createDefaultGhost(this._host);\n    this._host.append(this._ghost);\n  }\n\n  private _disposeGhost(): void {\n    if (this._ghost) {\n      this._ghost.remove();\n      this._ghost = null;\n    }\n  }\n\n  private _setPointerCaptureState(state: boolean): void {\n    this._hasPointerCapture = state;\n    state\n      ? this._element.setPointerCapture(this._id)\n      : this._element.releasePointerCapture(this._id);\n\n    for (const event of ResizeController.auxiliaryEvents) {\n      state\n        ? this._host.addEventListener(event, this)\n        : this._host.removeEventListener(event, this);\n    }\n  }\n\n  private _setInitialState({ pointerId }: PointerEvent): void {\n    const resizableElement = this._config.resizableElement\n      ? this._config.resizableElement()\n      : this._host;\n\n    this._initialState = resizableElement.getBoundingClientRect();\n    this._state = structuredClone(this._initialState);\n    this._id = pointerId;\n  }\n\n  private _createCallbackParams(event: PointerEvent): ResizeCallbackParams {\n    return {\n      event,\n      state: {\n        initial: this._initialState,\n        current: this._state,\n        dx: this._state.width - this._initialState.width,\n        dy: this._state.height - this._initialState.height,\n        ghost: this._ghost,\n      },\n    };\n  }\n\n  private _shouldSkip(event: PointerEvent): boolean {\n    return !findElementFromEventPath((e) => e === this._element, event);\n  }\n\n  // Event handlers\n\n  private _handlePointerDown(event: PointerEvent): void {\n    // Non-primary buttons are ignored\n    if (event.button) {\n      return;\n    }\n\n    if (this._config?.start) {\n      this._setInitialState(event);\n      this._createGhost();\n      this._config.start.call(this._host, this._createCallbackParams(event));\n      this._setPointerCaptureState(true);\n    }\n  }\n\n  private _handlePointerMove(event: PointerEvent): void {\n    if (!this._hasPointerCapture) {\n      return;\n    }\n\n    // REVIEW: Sequencing\n\n    if (this._config?.resize) {\n      const params = this._createCallbackParams(event);\n      this._config.resize.call(this._host, params);\n      this._state = params.state.current;\n    }\n\n    const target = this._config.mode === 'deferred' ? this._ghost! : this._host;\n\n    Object.assign(target.style, {\n      width: `${this._state.width}px`,\n      height: `${this._state.height}px`,\n    });\n  }\n\n  private _handlePointerEnd(event: PointerEvent): void {\n    Object.assign(this._host.style, {\n      width: `${this._state.width}px`,\n      height: `${this._state.height}px`,\n    });\n\n    if (this._config?.end) {\n      this._config.end.call(this._host, this._createCallbackParams(event));\n    }\n\n    this.dispose();\n  }\n\n  public handleEvent(event: PointerEvent): void {\n    if (this._shouldSkip(event)) {\n      return;\n    }\n\n    switch (event.type) {\n      case 'touchstart':\n        event.preventDefault();\n        break;\n\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\n  // Public API\n\n  public setConfig(config?: ResizeControllerConfig): void {\n    Object.assign(this._config, config);\n  }\n\n  public dispose(): void {\n    this._disposeGhost();\n    this._setPointerCaptureState(false);\n  }\n\n  public hostConnected(): void {\n    this._host.addEventListener('pointerdown', this);\n    this._host.addEventListener('touchstart', this, { passive: false });\n  }\n\n  public hostDisconnected(): void {\n    this._host.removeEventListener('pointerdown', this);\n    this._host.removeEventListener('touchstart', this);\n  }\n}\n\nexport function addResizeController(\n  host: ReactiveControllerHost & HTMLElement,\n  config?: ResizeControllerConfig\n): ResizeController {\n  return new ResizeController(host, config);\n}\n"]}

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

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type ResizeCallbackParams, type ResizeMode } from './resize-controller.js';
+export interface IgcResizeComponentEventMap {
+    igcResizeStart: CustomEvent<ResizeCallbackParams>;
+    igcResize: CustomEvent<ResizeCallbackParams>;
+    igcResizeEnd: CustomEvent<ResizeCallbackParams>;
+    igcResizeCancel: CustomEvent<unknown>;
+}
+declare const IgcResizeComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcResizeComponentEventMap>> & Constructor<LitElement>;
+/**
+ * @element igc-resize
+ */
+export default class IgcResizeComponent extends IgcResizeComponent_base {
+    static readonly tagName = "igc-resize";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private _resizeController;
+    private _ghostFactory;
+    private _mode;
+    private _adorner;
+    private _state;
+    private _isResizing;
+    set mode(value: ResizeMode);
+    get mode(): ResizeMode;
+    set ghostFactory(func: (element?: HTMLElement) => HTMLElement);
+    get ghostFactory(): (element?: HTMLElement) => HTMLElement;
+    constructor();
+    private _setState;
+    private _handleResizeStart;
+    private _handleResize;
+    private _handleResizeEnd;
+    private _handleResizeCancel;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-resize': IgcResizeComponent;
+    }
+}
+export {};

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

@@ -0,0 +1,107 @@
+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;
+};
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { addKeybindings, escapeKey, } from '../common/controllers/key-bindings.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import IgcIconComponent from '../icon/icon.js';
+import { addResizeController, } from './resize-controller.js';
+import { styles } from './themes/resize.base.css.js';
+import { styles as shared } from './themes/shared/resize.common.css.js';
+class IgcResizeComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(IgcResizeComponent, IgcIconComponent);
+    }
+    set mode(value) {
+        this._mode = value;
+        this._resizeController.setConfig({ mode: value });
+    }
+    get mode() {
+        return this._mode;
+    }
+    set ghostFactory(func) {
+        this._ghostFactory = func;
+        this._resizeController.setConfig({ deferredFactory: func });
+    }
+    get ghostFactory() {
+        return this._ghostFactory;
+    }
+    constructor() {
+        super();
+        this._mode = 'immediate';
+        this._adorner = createRef();
+        this._isResizing = false;
+        this._resizeController = addResizeController(this, {
+            ref: this._adorner,
+            start: this._handleResizeStart,
+            resize: this._handleResize,
+            end: this._handleResizeEnd,
+            resizableElement: () => this.querySelector('div[part~="base"]'),
+        });
+        addKeybindings(this, {
+            skip: () => !this._isResizing,
+            bindingDefaults: { preventDefault: true },
+        }).set(escapeKey, this._handleResizeCancel);
+    }
+    _setState(state) {
+        this._state = state;
+    }
+    _handleResizeStart(params) {
+        params.event.preventDefault();
+        this.emitEvent('igcResizeStart', { bubbles: false, detail: params });
+        this._isResizing = true;
+        this._setState(params.state);
+        this._adorner.value.focus();
+    }
+    _handleResize(params) {
+        this._setState(params.state);
+        this.emitEvent('igcResize', { bubbles: false, detail: params });
+    }
+    _handleResizeEnd(params) {
+        this._isResizing = false;
+        this._setState(params.state);
+        this.emitEvent('igcResizeEnd', { bubbles: false, detail: params });
+    }
+    _handleResizeCancel() {
+        this._isResizing = false;
+        this._resizeController.dispose();
+        const { width, height } = this._state.initial;
+        Object.assign(this.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+        });
+        this.emitEvent('igcResizeCancel', { bubbles: false });
+    }
+    render() {
+        return html `
+      <div part="resize-base">
+        <slot></slot>
+        <div ${ref(this._adorner)} part="trigger" tabindex="-1">
+          <igc-icon name="resize" collection="default"></igc-icon>
+        </div>
+      </div>
+    `;
+    }
+}
+IgcResizeComponent.tagName = 'igc-resize';
+IgcResizeComponent.styles = [styles, shared];
+export default IgcResizeComponent;
+__decorate([
+    state()
+], IgcResizeComponent.prototype, "_state", void 0);
+__decorate([
+    state()
+], IgcResizeComponent.prototype, "_isResizing", void 0);
+__decorate([
+    property()
+], IgcResizeComponent.prototype, "mode", null);
+__decorate([
+    property({ attribute: false })
+], IgcResizeComponent.prototype, "ghostFactory", null);
+//# sourceMappingURL=resize-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize-element.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-element.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { type Ref, createRef, ref } from 'lit/directives/ref.js';\nimport {\n  addKeybindings,\n  escapeKey,\n} from '../common/controllers/key-bindings.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n  type ResizeCallbackParams,\n  type ResizeMode,\n  addResizeController,\n} from './resize-controller.js';\nimport { styles } from './themes/resize.base.css.js';\nimport { styles as shared } from './themes/shared/resize.common.css.js';\n\nexport interface IgcResizeComponentEventMap {\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 */\nexport default class IgcResizeComponent extends EventEmitterMixin<\n  IgcResizeComponentEventMap,\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() {\n    registerComponent(IgcResizeComponent, IgcIconComponent);\n  }\n\n  private _resizeController: ReturnType<typeof addResizeController>;\n\n  private _ghostFactory!: (element?: HTMLElement) => HTMLElement;\n  private _mode: ResizeMode = 'immediate';\n  private _adorner: Ref<HTMLElement> = createRef();\n\n  @state()\n  private _state!: ResizeCallbackParams['state'];\n\n  @state()\n  private _isResizing = false;\n\n  @property()\n  public set mode(value: ResizeMode) {\n    this._mode = value;\n    this._resizeController.setConfig({ mode: value });\n  }\n\n  public get mode(): ResizeMode {\n    return this._mode;\n  }\n\n  @property({ attribute: false })\n  public set ghostFactory(func: (element?: HTMLElement) => HTMLElement) {\n    this._ghostFactory = func;\n    this._resizeController.setConfig({ deferredFactory: func });\n  }\n\n  public get ghostFactory() {\n    return this._ghostFactory;\n  }\n\n  constructor() {\n    super();\n\n    this._resizeController = addResizeController(this, {\n      ref: this._adorner,\n      start: this._handleResizeStart,\n      resize: this._handleResize,\n      end: this._handleResizeEnd,\n      resizableElement: () => this.querySelector('div[part~=\"base\"]')!,\n    });\n\n    addKeybindings(this, {\n      skip: () => !this._isResizing,\n      bindingDefaults: { preventDefault: true },\n    }).set(escapeKey, this._handleResizeCancel);\n  }\n\n  private _setState(state: ResizeCallbackParams['state']) {\n    this._state = state;\n  }\n\n  private _handleResizeStart(params: ResizeCallbackParams) {\n    params.event.preventDefault();\n    this.emitEvent('igcResizeStart', { bubbles: false, detail: params });\n\n    this._isResizing = true;\n    this._setState(params.state);\n    this._adorner.value!.focus();\n  }\n\n  private _handleResize(params: ResizeCallbackParams) {\n    this._setState(params.state);\n    this.emitEvent('igcResize', { bubbles: false, detail: params });\n  }\n\n  private _handleResizeEnd(params: ResizeCallbackParams) {\n    this._isResizing = false;\n    this._setState(params.state);\n    this.emitEvent('igcResizeEnd', { bubbles: false, detail: params });\n  }\n\n  private _handleResizeCancel() {\n    this._isResizing = false;\n    this._resizeController.dispose();\n\n    const { width, height } = this._state.initial;\n\n    Object.assign(this.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n\n    this.emitEvent('igcResizeCancel', { bubbles: false });\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"resize-base\">\n        <slot></slot>\n        <div ${ref(this._adorner)} part=\"trigger\" tabindex=\"-1\">\n          <igc-icon name=\"resize\" collection=\"default\"></igc-icon>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-resize': IgcResizeComponent;\n  }\n}\n"]}

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

@@ -0,0 +1,24 @@
+import type IgcTileManagerComponent from './tile-manager.js';
+export interface SerializedTile {
+    colSpan: number;
+    colStart: number | null;
+    disableDrag: boolean;
+    disableResize: boolean;
+    gridColumn: string;
+    gridRow: string;
+    maximized: boolean;
+    position: number;
+    rowSpan: number;
+    rowStart: number | null;
+    tileId: string | null;
+}
+declare class TileManagerSerializer {
+    tileManager: IgcTileManagerComponent;
+    constructor(tileManager: IgcTileManagerComponent);
+    save(): SerializedTile[];
+    saveAsJSON(): string;
+    load(tiles: SerializedTile[]): void;
+    loadFromJSON(data: string): void;
+}
+export declare function createSerializer(host: IgcTileManagerComponent): TileManagerSerializer;
+export {};

package/components/tile-manager/serializer.js

@@ -0,0 +1,52 @@
+class TileManagerSerializer {
+    constructor(tileManager) {
+        this.tileManager = tileManager;
+    }
+    save() {
+        return this.tileManager.tiles.map((tile) => {
+            const { gridColumn, gridRow } = getComputedStyle(tile);
+            return {
+                colSpan: tile.colSpan,
+                colStart: tile.colStart,
+                disableDrag: tile.disableDrag,
+                disableResize: tile.disableResize,
+                gridColumn,
+                gridRow,
+                maximized: tile.maximized,
+                position: tile.position,
+                rowSpan: tile.rowSpan,
+                rowStart: tile.rowStart,
+                tileId: tile.tileId,
+            };
+        });
+    }
+    saveAsJSON() {
+        return JSON.stringify(this.save());
+    }
+    load(tiles) {
+        const mapped = new Map(tiles.map((tile) => [tile.tileId, tile]));
+        for (const tile of this.tileManager.tiles) {
+            if (!mapped.has(tile.tileId)) {
+                continue;
+            }
+            const serialized = mapped.get(tile.tileId);
+            const properties = omit(serialized, 'gridColumn', 'gridRow');
+            const styles = pick(serialized, 'gridColumn', 'gridRow');
+            Object.assign(tile, properties);
+            Object.assign(tile.style, styles);
+        }
+    }
+    loadFromJSON(data) {
+        this.load(JSON.parse(data));
+    }
+}
+export function createSerializer(host) {
+    return new TileManagerSerializer(host);
+}
+function pick(entry, ...props) {
+    return Object.fromEntries(Object.entries(entry).filter(([key, _]) => props.includes(key)));
+}
+function omit(entry, ...props) {
+    return Object.fromEntries(Object.entries(entry).filter(([key, _]) => !props.includes(key)));
+}
+//# sourceMappingURL=serializer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"serializer.js","sourceRoot":"","sources":["../../../src/components/tile-manager/serializer.ts"],"names":[],"mappings":"AAgBA,MAAM,qBAAqB;IAGzB,YAAY,WAAoC;QAC9C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAEM,IAAI;QACT,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAEvD,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU;gBACV,OAAO;gBACP,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,UAAU;QACf,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACrC,CAAC;IAEM,IAAI,CAAC,KAAuB;QACjC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;QAEjE,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC7B,SAAS;YACX,CAAC;YAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAE,CAAC;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;YAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;YAEzD,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;YAChC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEM,YAAY,CAAC,IAAY;QAC9B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9B,CAAC;CACF;AAED,MAAM,UAAU,gBAAgB,CAAC,IAA6B;IAC5D,OAAO,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC;AAED,SAAS,IAAI,CAAmB,KAAQ,EAAE,GAAG,KAAqB;IAChE,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAc,CAAC,CAAC,CAC3E,CAAC;AACJ,CAAC;AAED,SAAS,IAAI,CAAmB,KAAQ,EAAE,GAAG,KAAqB;IAChE,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAc,CAAC,CAAC,CAC5E,CAAC;AACJ,CAAC","sourcesContent":["import type IgcTileManagerComponent from './tile-manager.js';\n\nexport interface SerializedTile {\n  colSpan: number;\n  colStart: number | null;\n  disableDrag: boolean;\n  disableResize: boolean;\n  gridColumn: string;\n  gridRow: string;\n  maximized: boolean;\n  position: number;\n  rowSpan: number;\n  rowStart: number | null;\n  tileId: string | null;\n}\n\nclass TileManagerSerializer {\n  public tileManager: IgcTileManagerComponent;\n\n  constructor(tileManager: IgcTileManagerComponent) {\n    this.tileManager = tileManager;\n  }\n\n  public save(): SerializedTile[] {\n    return this.tileManager.tiles.map((tile) => {\n      const { gridColumn, gridRow } = getComputedStyle(tile);\n\n      return {\n        colSpan: tile.colSpan,\n        colStart: tile.colStart,\n        disableDrag: tile.disableDrag,\n        disableResize: tile.disableResize,\n        gridColumn,\n        gridRow,\n        maximized: tile.maximized,\n        position: tile.position,\n        rowSpan: tile.rowSpan,\n        rowStart: tile.rowStart,\n        tileId: tile.tileId,\n      };\n    });\n  }\n\n  public saveAsJSON(): string {\n    return JSON.stringify(this.save());\n  }\n\n  public load(tiles: SerializedTile[]): void {\n    const mapped = new Map(tiles.map((tile) => [tile.tileId, tile]));\n\n    for (const tile of this.tileManager.tiles) {\n      if (!mapped.has(tile.tileId)) {\n        continue;\n      }\n\n      const serialized = mapped.get(tile.tileId)!;\n      const properties = omit(serialized, 'gridColumn', 'gridRow');\n      const styles = pick(serialized, 'gridColumn', 'gridRow');\n\n      Object.assign(tile, properties);\n      Object.assign(tile.style, styles);\n    }\n  }\n\n  public loadFromJSON(data: string): void {\n    this.load(JSON.parse(data));\n  }\n}\n\nexport function createSerializer(host: IgcTileManagerComponent) {\n  return new TileManagerSerializer(host);\n}\n\nfunction pick<T extends object>(entry: T, ...props: Array<keyof T>) {\n  return Object.fromEntries(\n    Object.entries(entry).filter(([key, _]) => props.includes(key as keyof T))\n  );\n}\n\nfunction omit<T extends object>(entry: T, ...props: Array<keyof T>) {\n  return Object.fromEntries(\n    Object.entries(entry).filter(([key, _]) => !props.includes(key as keyof T))\n  );\n}\n"]}

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

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

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

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+import { styles as bootstrapDark } from './dark/tile-manager.bootstrap.css.js';
+import { styles as fluentDark } from './dark/tile-manager.fluent.css.js';
+import { styles as indigoDark } from './dark/tile-manager.indigo.css.js';
+import { styles as materialDark } from './dark/tile-manager.material.css.js';
+import { styles as sharedDark } from './dark/tile-manager.shared.css.js';
+import { styles as bootstrapLight } from './light/tile-manager.bootstrap.css.js';
+import { styles as fluentLight } from './light/tile-manager.fluent.css.js';
+import { styles as indigoLight } from './light/tile-manager.indigo.css.js';
+import { styles as materialLight } from './light/tile-manager.material.css.js';
+import { styles as sharedLight } from './light/tile-manager.shared.css.js';
+const light = {
+    shared: css `
+    ${sharedLight}
+  `,
+    bootstrap: css `
+    ${bootstrapLight}
+  `,
+    material: css `
+    ${materialLight}
+  `,
+    fluent: css `
+    ${fluentLight}
+  `,
+    indigo: css `
+    ${indigoLight}
+  `,
+};
+const dark = {
+    shared: css `
+    ${sharedDark}
+  `,
+    bootstrap: css `
+    ${bootstrapDark}
+  `,
+    material: css `
+    ${materialDark}
+  `,
+    fluent: css `
+    ${fluentDark}
+  `,
+    indigo: css `
+    ${indigoDark}
+  `,
+};
+export const all = { light, dark };
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAG3E,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;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// Dark Overrides\nimport { styles as bootstrapDark } from './dark/tile-manager.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/tile-manager.fluent.css.js';\nimport { styles as indigoDark } from './dark/tile-manager.indigo.css.js';\nimport { styles as materialDark } from './dark/tile-manager.material.css.js';\nimport { styles as sharedDark } from './dark/tile-manager.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/tile-manager.bootstrap.css.js';\nimport { styles as fluentLight } from './light/tile-manager.fluent.css.js';\nimport { styles as indigoLight } from './light/tile-manager.indigo.css.js';\nimport { styles as materialLight } from './light/tile-manager.material.css.js';\nimport { styles as sharedLight } from './light/tile-manager.shared.css.js';\n// Shared Styles\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

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

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

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

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export 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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-100) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-surface-500) h s l/1));--title-color: var(--ig-tile-manager-title-color, hsl(from var(--ig-gray-900) h s l/1));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-surface-500) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-surface-500) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, hsl(from var(--ig-gray-200) h s l/1));--hover-border-color: var(--ig-tile-manager-hover-border-color, hsl(from var(--ig-gray-300) h s l/1));--resize-indicator: var(--ig-tile-manager-resize-indicator, hsl(from var(--ig-gray-300) h s l/1));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-700) h s l/0.4));--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-500) h s l/1));--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)}`;
+//# sourceMappingURL=tile-manager.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/dark/tile-manager.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,s6CAAs6C,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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-100) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-surface-500) h s l/1));--title-color: var(--ig-tile-manager-title-color, hsl(from var(--ig-gray-900) h s l/1));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-surface-500) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-surface-500) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, hsl(from var(--ig-gray-200) h s l/1));--hover-border-color: var(--ig-tile-manager-hover-border-color, hsl(from var(--ig-gray-300) h s l/1));--resize-indicator: var(--ig-tile-manager-resize-indicator, hsl(from var(--ig-gray-300) h s l/1));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-700) h s l/0.4));--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-500) h s l/1));--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/dark/tile-manager.fluent.css.d.ts

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

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

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export 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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-100) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-surface-500) h s l/1));--title-color: var(--ig-tile-manager-title-color, hsl(from var(--ig-gray-900) h s l/1));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-surface-500) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-surface-500) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, transparent);--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-500) h s l/1));--divider-color: var(--ig-tile-manager-divider-color, transparent);--border-radius: var(--ig-tile-manager-border-radius, 0);--default-size: var(--ig-tile-manager-default-size, 2)}`;
+//# sourceMappingURL=tile-manager.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/dark/tile-manager.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,olCAAolC,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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-100) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-surface-500) h s l/1));--title-color: var(--ig-tile-manager-title-color, hsl(from var(--ig-gray-900) h s l/1));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-surface-500) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-surface-500) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, transparent);--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-500) h s l/1));--divider-color: var(--ig-tile-manager-divider-color, transparent);--border-radius: var(--ig-tile-manager-border-radius, 0);--default-size: var(--ig-tile-manager-default-size, 2)}`;\n"]}

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

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

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

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export 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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-surface-500) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-gray-50) h s l/1));--title-color: var(--ig-tile-manager-title-color, color-mix(in oklch, var(--ig-gray-50-contrast) 90%, transparent));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-gray-50) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-gray-50) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, hsl(from var(--ig-gray-100) h s l/1));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-500) h s l/0.15));--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-300) h s l/1));--divider-color: var(--ig-tile-manager-divider-color, transparent);--border-radius: var(--ig-tile-manager-border-radius, 0.375rem);--default-size: var(--ig-tile-manager-default-size, 2)}`;
+//# sourceMappingURL=tile-manager.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/dark/tile-manager.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2vCAA2vC,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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-surface-500) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-gray-50) h s l/1));--title-color: var(--ig-tile-manager-title-color, color-mix(in oklch, var(--ig-gray-50-contrast) 90%, transparent));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-gray-50) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-gray-50) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, hsl(from var(--ig-gray-100) h s l/1));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-500) h s l/0.15));--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-300) h s l/1));--divider-color: var(--ig-tile-manager-divider-color, transparent);--border-radius: var(--ig-tile-manager-border-radius, 0.375rem);--default-size: var(--ig-tile-manager-default-size, 2)}`;\n"]}

package/components/tile-manager/themes/dark/tile-manager.material.css.d.ts

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

package/components/tile-manager/themes/dark/tile-manager.material.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export 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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-100) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-surface-500) h s l/1));--title-color: var(--ig-tile-manager-title-color, hsl(from var(--ig-gray-900) h s l/1));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-surface-500) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-surface-500) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, transparent);--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-500) h s l/1));--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)}`;
+//# sourceMappingURL=tile-manager.material.css.js.map

package/components/tile-manager/themes/dark/tile-manager.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.material.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/dark/tile-manager.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0lCAA0lC,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));--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-100) h s l/1));--tile-background: var(--ig-tile-manager-tile-background, hsl(from var(--ig-surface-500) h s l/1));--title-color: var(--ig-tile-manager-title-color, hsl(from var(--ig-gray-900) h s l/1));--header-background: var(--ig-tile-manager-header-background, hsl(from var(--ig-surface-500) h s l/1));--content-background: var(--ig-tile-manager-content-background, hsl(from var(--ig-surface-500) h s l/1));--content-color: var(--ig-tile-manager-content-color, hsl(from var(--ig-gray-700) h s l/1));--border-color: var(--ig-tile-manager-border-color, transparent);--ghost-border: var(--ig-tile-manager-ghost-border, hsl(from var(--ig-primary-500) h s l/1));--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/dark/tile-manager.shared.css.d.ts

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

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

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--hover-border-color: var(--ig-tile-manager-hover-border-color, hsl(from var(--ig-gray-200) h s l/1));--resize-indicator: var(--ig-tile-manager-resize-indicator, hsl(from var(--ig-gray-200) h s l/1));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-700) h s l/0.15));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-700) h s l/0.5))}`;
+//# sourceMappingURL=tile-manager.shared.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/dark/tile-manager.shared.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+aAA+a,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--hover-border-color: var(--ig-tile-manager-hover-border-color, hsl(from var(--ig-gray-200) h s l/1));--resize-indicator: var(--ig-tile-manager-resize-indicator, hsl(from var(--ig-gray-200) h s l/1));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-700) h s l/0.15));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-700) h s l/0.5))}`;\n"]}

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

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

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

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+import { styles as bootstrap } from './shared/header/tile-header.bootstrap.css.js';
+import { styles as fluent } from './shared/header/tile-header.fluent.css.js';
+import { styles as indigo } from './shared/header/tile-header.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=header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAE7E,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/header/tile-header.bootstrap.css.js';\nimport { styles as fluent } from './shared/header/tile-header.fluent.css.js';\nimport { styles as indigo } from './shared/header/tile-header.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/themes/light/tile-manager.bootstrap.css.d.ts

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

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

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-200) h s l/1));--border-color: var(--ig-tile-manager-border-color, hsl(from var(--ig-gray-300) h s l/1));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-300) h s l/0.15));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-300) h s l/0.4))}`;
+//# sourceMappingURL=tile-manager.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/tile-manager/themes/light/tile-manager.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ibAAib,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--tile-manager-background: var(--ig-tile-manager-tile-manager-background, hsl(from var(--ig-gray-200) h s l/1));--border-color: var(--ig-tile-manager-border-color, hsl(from var(--ig-gray-300) h s l/1));--placeholder-background: var(--ig-tile-manager-placeholder-background, hsl(from var(--ig-primary-300) h s l/0.15));--overlay-background: var(--ig-tile-manager-overlay-background, hsl(from var(--ig-primary-300) h s l/0.4))}`;\n"]}