igniteui-webcomponents 2.1.1 → 2.2.0

package/components/toggle/toggle.controller.js

@@ -0,0 +1,85 @@
+import { igcToggle } from './toggle.directive';
+export class IgcToggleController {
+    constructor(host, target) {
+        this.initialScrollTop = 0;
+        this.initialScrollLeft = 0;
+        this.blockScroll = (event) => {
+            var _a, _b, _c, _d;
+            event.preventDefault();
+            if (!this.sourceElement || this.sourceElement !== event.target) {
+                this.sourceElement = event.target;
+                this.initialScrollTop =
+                    (_a = this.sourceElement.scrollTop) !== null && _a !== void 0 ? _a : (_b = this.sourceElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.scrollTop;
+                this.initialScrollLeft =
+                    (_c = this.sourceElement.scrollLeft) !== null && _c !== void 0 ? _c : (_d = this.sourceElement.firstElementChild) === null || _d === void 0 ? void 0 : _d.scrollLeft;
+            }
+            this.sourceElement.scrollTop = this.initialScrollTop;
+            this.sourceElement.scrollLeft = this.initialScrollLeft;
+            if (this.sourceElement.firstElementChild) {
+                this.sourceElement.firstElementChild.scrollTop = this.initialScrollTop;
+                this.sourceElement.firstElementChild.scrollLeft = this.initialScrollLeft;
+            }
+        };
+        this.documentClicked = (event) => {
+            if (!this.host.keepOpenOnOutsideClick) {
+                const target = event.composed ? event.composedPath() : [event.target];
+                const isInsideClick = target.includes(this.host) ||
+                    (this.target !== undefined && target.includes(this.target));
+                if (isInsideClick) {
+                    return;
+                }
+                else {
+                    this.host.hide();
+                }
+            }
+        };
+        this.handleScroll = (event) => {
+            switch (this.host.scrollStrategy) {
+                case 'scroll':
+                    break;
+                case 'block':
+                    this.blockScroll(event);
+                    break;
+                case 'close':
+                    this.host.hide();
+                    break;
+            }
+        };
+        host.addController(this);
+        this.host = host;
+        if (target) {
+            this._target = target;
+        }
+        this.updateToggleDir();
+    }
+    set target(value) {
+        this._target = value;
+        this.updateToggleDir();
+    }
+    get target() {
+        return this._target;
+    }
+    hostConnected() {
+        this.addEventListeners();
+    }
+    hostDisconnected() {
+        this.removeEventListeners();
+    }
+    updateToggleDir() {
+        this.toggleDirective = igcToggle(this._target, this.host, this);
+        this.addEventListeners();
+    }
+    addEventListeners() {
+        if (this.host.open) {
+            document.addEventListener('scroll', this.handleScroll, true);
+            if (!this.host.keepOpenOnOutsideClick) {
+                document.addEventListener('click', this.documentClicked, true);
+            }
+        }
+    }
+    removeEventListeners() {
+        document.removeEventListener('click', this.documentClicked, true);
+        document.removeEventListener('scroll', this.handleScroll, true);
+    }
+}
+//# sourceMappingURL=toggle.controller.js.map

package/components/toggle/toggle.controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.controller.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { igcToggle, IgcToggleDirective } from './toggle.directive';\nimport { DirectiveResult } from 'lit/directive';\nimport { IgcToggleComponent } from './utilities';\n\n/**\n * Controller, bundling the creation of a toggle directive and handling global events,\n * related to the configuration of togglable components.\n */\nexport class IgcToggleController implements ReactiveController {\n  private host: IgcToggleComponent & HTMLElement;\n  private sourceElement?: Element;\n  private initialScrollTop = 0;\n  private initialScrollLeft = 0;\n  private _target!: HTMLElement;\n\n  /** The directive that marks the toggle. */\n  public toggleDirective!: DirectiveResult<typeof IgcToggleDirective>;\n  public rendered!: Promise<void>;\n\n  public set target(value: HTMLElement) {\n    this._target = value;\n    this.updateToggleDir();\n  }\n\n  /** The element, relative to which, the toggle will be positioned. */\n  public get target() {\n    return this._target;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & IgcToggleComponent & HTMLElement,\n    target?: HTMLElement\n  ) {\n    host.addController(this);\n\n    this.host = host;\n\n    if (target) {\n      this._target = target;\n    }\n\n    this.updateToggleDir();\n  }\n\n  public hostConnected() {\n    this.addEventListeners();\n  }\n\n  public hostDisconnected() {\n    this.removeEventListeners();\n  }\n\n  public updateToggleDir() {\n    this.toggleDirective = igcToggle(this._target, this.host, this);\n    this.addEventListeners();\n  }\n\n  private addEventListeners() {\n    if (this.host.open) {\n      document.addEventListener('scroll', this.handleScroll, true);\n      if (!this.host.keepOpenOnOutsideClick) {\n        document.addEventListener('click', this.documentClicked, true);\n      }\n    }\n  }\n\n  private removeEventListeners() {\n    document.removeEventListener('click', this.documentClicked, true);\n    document.removeEventListener('scroll', this.handleScroll, true);\n  }\n\n  private blockScroll = (event: Event) => {\n    event.preventDefault();\n    if (!this.sourceElement || this.sourceElement !== event.target) {\n      this.sourceElement = event.target as Element;\n      this.initialScrollTop =\n        this.sourceElement.scrollTop ??\n        this.sourceElement.firstElementChild?.scrollTop;\n      this.initialScrollLeft =\n        this.sourceElement.scrollLeft ??\n        this.sourceElement.firstElementChild?.scrollLeft;\n    }\n\n    this.sourceElement.scrollTop = this.initialScrollTop;\n    this.sourceElement.scrollLeft = this.initialScrollLeft;\n    if (this.sourceElement.firstElementChild) {\n      this.sourceElement.firstElementChild.scrollTop = this.initialScrollTop;\n      this.sourceElement.firstElementChild.scrollLeft = this.initialScrollLeft;\n    }\n  };\n\n  /** The document's click event handler to override in the host component if necessary. */\n  private documentClicked = (event: MouseEvent) => {\n    if (!this.host.keepOpenOnOutsideClick) {\n      const target = event.composed ? event.composedPath() : [event.target];\n      const isInsideClick: boolean =\n        target.includes(this.host) ||\n        (this.target !== undefined && target.includes(this.target));\n      if (isInsideClick) {\n        return;\n      } else {\n        this.host.hide();\n      }\n    }\n  };\n\n  /** The document's scroll event handler to override in the host component if necessary. */\n  private handleScroll = (event: Event) => {\n    switch (this.host.scrollStrategy) {\n      case 'scroll':\n        break;\n      case 'block':\n        this.blockScroll(event);\n        break;\n      case 'close':\n        this.host.hide();\n        break;\n    }\n  };\n}\n"]}

package/components/toggle/toggle.directive.d.ts

@@ -0,0 +1,14 @@
+import { Directive, PartInfo } from 'lit/directive.js';
+import { IgcToggleOptions } from './utilities.js';
+import { IgcToggleController } from './toggle.controller.js';
+export declare class IgcToggleDirective extends Directive {
+    private part;
+    private shiftOptions?;
+    private floatingElement;
+    private updatePosition;
+    private createFloatingElement;
+    private createMiddleware;
+    constructor(partInfo: PartInfo);
+    render(target: HTMLElement, options: IgcToggleOptions, controller?: IgcToggleController): symbol;
+}
+export declare const igcToggle: (target: HTMLElement, options: IgcToggleOptions, controller?: IgcToggleController | undefined) => import("lit-html/directive").DirectiveResult<typeof IgcToggleDirective>;

package/components/toggle/toggle.directive.js

@@ -0,0 +1,76 @@
+import { computePosition, flip, offset, shift, size, } from '@floating-ui/dom';
+import { directive, Directive, PartType, } from 'lit/directive.js';
+import { noChange } from 'lit';
+export class IgcToggleDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.shiftOptions = {
+            mainAxis: true,
+        };
+        this.part = partInfo;
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error('The `igcToggle` directive must be attached to an element tag.');
+        }
+    }
+    updatePosition(target, options, controller) {
+        var _a, _b;
+        this.floatingElement = this.createFloatingElement(options.open);
+        if (!target) {
+            if (controller) {
+                controller.rendered = Promise.resolve();
+            }
+            return noChange;
+        }
+        const promise = computePosition(target, this.floatingElement, {
+            placement: (_a = options.placement) !== null && _a !== void 0 ? _a : 'bottom-start',
+            strategy: (_b = options.positionStrategy) !== null && _b !== void 0 ? _b : 'absolute',
+            middleware: this.createMiddleware(options),
+        }).then(({ x, y }) => {
+            Object.assign(this.floatingElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
+        if (controller) {
+            controller.rendered = promise;
+        }
+        return noChange;
+    }
+    createFloatingElement(open = false) {
+        if (!this.floatingElement) {
+            this.floatingElement = this.part.element;
+        }
+        this.floatingElement.style.display = open ? '' : 'none';
+        return this.floatingElement;
+    }
+    createMiddleware(options) {
+        const middleware = [];
+        if (options.distance) {
+            middleware.push(offset({
+                mainAxis: options.distance,
+            }));
+        }
+        if (options.flip) {
+            middleware.push(flip());
+        }
+        if (this.shiftOptions) {
+            middleware.push(shift(this.shiftOptions));
+        }
+        if (options.sameWidth) {
+            const floatingElement = this.floatingElement;
+            middleware.push(size({
+                apply({ reference }) {
+                    Object.assign(floatingElement.style, {
+                        width: `${reference.width}px`,
+                    });
+                },
+            }));
+        }
+        return middleware;
+    }
+    render(target, options, controller) {
+        return this.updatePosition(target, options, controller);
+    }
+}
+export const igcToggle = directive(IgcToggleDirective);
+//# sourceMappingURL=toggle.directive.js.map

package/components/toggle/toggle.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.directive.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  Middleware,\n} from '@floating-ui/dom';\nimport {\n  directive,\n  Directive,\n  PartInfo,\n  ElementPart,\n  PartType,\n} from 'lit/directive.js';\nimport { IgcToggleOptions } from './utilities.js';\nimport { noChange } from 'lit';\nimport { IgcToggleController } from './toggle.controller.js';\n\nexport class IgcToggleDirective extends Directive {\n  private part: PartInfo;\n  private shiftOptions? = {\n    mainAxis: true,\n  };\n\n  private floatingElement!: HTMLElement;\n\n  private updatePosition(\n    target: HTMLElement,\n    options: IgcToggleOptions,\n    controller?: IgcToggleController\n  ) {\n    this.floatingElement = this.createFloatingElement(options.open);\n\n    if (!target) {\n      if (controller) {\n        controller.rendered = Promise.resolve();\n      }\n      return noChange;\n    }\n\n    const promise = computePosition(target, this.floatingElement, {\n      placement: options.placement ?? 'bottom-start',\n      strategy: options.positionStrategy ?? 'absolute',\n      middleware: this.createMiddleware(options),\n    }).then(({ x, y }) => {\n      Object.assign(this.floatingElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n    });\n\n    if (controller) {\n      controller.rendered = promise;\n    }\n\n    return noChange;\n  }\n\n  private createFloatingElement(open = false) {\n    if (!this.floatingElement) {\n      this.floatingElement = (this.part as ElementPart).element as HTMLElement;\n    }\n\n    this.floatingElement.style.display = open ? '' : 'none';\n\n    return this.floatingElement;\n  }\n\n  private createMiddleware(options: IgcToggleOptions) {\n    const middleware: Middleware[] = [];\n\n    if (options.distance) {\n      middleware.push(\n        offset({\n          mainAxis: options.distance,\n        })\n      );\n    }\n\n    if (options.flip) {\n      middleware.push(flip());\n    }\n\n    if (this.shiftOptions) {\n      middleware.push(shift(this.shiftOptions));\n    }\n\n    if (options.sameWidth) {\n      const floatingElement = this.floatingElement;\n      middleware.push(\n        size({\n          apply({ reference }) {\n            Object.assign(floatingElement.style, {\n              width: `${reference.width}px`,\n            });\n          },\n        })\n      );\n    }\n\n    return middleware;\n  }\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    this.part = partInfo;\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error(\n        'The `igcToggle` directive must be attached to an element tag.'\n      );\n    }\n  }\n\n  public render(\n    target: HTMLElement,\n    options: IgcToggleOptions,\n    controller?: IgcToggleController\n  ) {\n    return this.updatePosition(target, options, controller);\n  }\n}\n\nexport const igcToggle = directive(IgcToggleDirective);\n"]}

package/components/toggle/utilities.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Common events interface for toggle components
+ */
+export interface IgcToggleEventMap {
+    igcOpening: CustomEvent<void>;
+    igcOpened: CustomEvent<void>;
+    igcClosing: CustomEvent<void>;
+    igcClosed: CustomEvent<void>;
+}
+/**
+ * Interface describing the options for toggle components' configuration.
+ */
+export interface IgcToggleOptions {
+    /**
+     * Whether the toggle is open.
+     */
+    open: boolean;
+    /**
+     * The preferred placement of the toggle element around the target element. */
+    placement?: IgcPlacement;
+    /**
+     * The positioning strategy to use.
+     * Use the `fixed` strategy when the target element is in a fixed container, otherwise - use `absolute`.
+     */
+    positionStrategy?: 'absolute' | 'fixed';
+    /**
+     * Whether the element should be flipped to the opposite side once it's about to overflow the visible area.
+     * Once enough space is detected on its preferred side, it will flip back.
+     */
+    flip?: boolean;
+    /**
+     * Whether to prevent the element from being cut off by moving it so it stays visible within its boundary area.
+     */
+    distance?: number;
+    /**
+     * Whether to make the toggle the same width as the target.
+     */
+    sameWidth?: boolean;
+}
+export interface IgcToggleComponent extends IgcToggleOptions {
+    scrollStrategy?: 'scroll' | 'block' | 'close';
+    keepOpenOnOutsideClick?: boolean;
+    hide(): void;
+    show(): void;
+    toggle(): void;
+}
+/**
+ * Describes the preferred placement of a toggle component.
+ */
+export declare type IgcPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/components/toggle/utilities.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=utilities.js.map

package/components/toggle/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../../../src/components/toggle/utilities.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Common events interface for toggle components\n */\nexport interface IgcToggleEventMap {\n  igcOpening: CustomEvent<void>;\n  igcOpened: CustomEvent<void>;\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n}\n/**\n * Interface describing the options for toggle components' configuration.\n */\nexport interface IgcToggleOptions {\n  /**\n   * Whether the toggle is open.\n   */\n  open: boolean;\n  /**\n   * The preferred placement of the toggle element around the target element. */\n  placement?: IgcPlacement;\n  /**\n   * The positioning strategy to use.\n   * Use the `fixed` strategy when the target element is in a fixed container, otherwise - use `absolute`.\n   */\n  positionStrategy?: 'absolute' | 'fixed';\n  /**\n   * Whether the element should be flipped to the opposite side once it's about to overflow the visible area.\n   * Once enough space is detected on its preferred side, it will flip back.\n   */\n  flip?: boolean;\n  /**\n   * Whether to prevent the element from being cut off by moving it so it stays visible within its boundary area.\n   */\n  distance?: number;\n  /**\n   * Whether to make the toggle the same width as the target.\n   */\n  sameWidth?: boolean;\n}\n\nexport interface IgcToggleComponent extends IgcToggleOptions {\n  scrollStrategy?: 'scroll' | 'block' | 'close';\n  keepOpenOnOutsideClick?: boolean;\n\n  hide(): void;\n  show(): void;\n  toggle(): void;\n}\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type IgcPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n"]}