igniteui-webcomponents 4.5.0 → 4.7.0

package/components/dropdown/dropdown-item.js

@@ -4,79 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { styles } from './themes/dropdown-item.base.css.js';
+import { all } from './themes/item.js';
 import { themes } from '../../theming/theming-decorator.js';
-import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { styles } from './themes/light/item/dropdown-item.base.css.js';
-import { styles as bootstrap } from './themes/light/item/dropdown-item.bootstrap.css.js';
-import { styles as fluent } from './themes/light/item/dropdown-item.fluent.css.js';
-import { styles as indigo } from './themes/light/item/dropdown-item.indigo.css.js';
-import { styles as material } from './themes/light/item/dropdown-item.material.css.js';
-let IgcDropdownItemComponent = class IgcDropdownItemComponent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.selected = false;
-        this.active = false;
-        this.disabled = false;
-    }
+import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
+let IgcDropdownItemComponent = class IgcDropdownItemComponent extends IgcBaseOptionLikeComponent {
     static register() {
         registerComponent(this);
     }
-    get value() {
-        var _a;
-        return this._value ? this._value : (_a = this.textContent) !== null && _a !== void 0 ? _a : '';
-    }
-    set value(value) {
-        const oldVal = this._value;
-        this._value = value;
-        this.requestUpdate('value', oldVal);
-    }
-    selectedChange() {
-        this.toggleAttribute('aria-selected', this.selected);
-        this.active = this.selected;
-    }
-    disabledChange() {
-        this.toggleAttribute('aria-disabled', this.disabled);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('role', 'option');
-    }
-    render() {
-        return html `
-      <section part="prefix"><slot name="prefix"></slot></section>
-      <section part="content"><slot></slot></section>
-      <section part="suffix"><slot name="suffix"></slot></section>
-    `;
-    }
 };
 IgcDropdownItemComponent.tagName = 'igc-dropdown-item';
 IgcDropdownItemComponent.styles = styles;
-__decorate([
-    property()
-], IgcDropdownItemComponent.prototype, "value", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcDropdownItemComponent.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcDropdownItemComponent.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcDropdownItemComponent.prototype, "disabled", void 0);
-__decorate([
-    watch('selected')
-], IgcDropdownItemComponent.prototype, "selectedChange", null);
-__decorate([
-    watch('disabled')
-], IgcDropdownItemComponent.prototype, "disabledChange", null);
 IgcDropdownItemComponent = __decorate([
-    themes({
-        light: { bootstrap, fluent, indigo, material },
-        dark: { bootstrap, fluent, indigo, material },
-    })
+    themes(all)
 ], IgcDropdownItemComponent);
 export default IgcDropdownItemComponent;
 //# sourceMappingURL=dropdown-item.js.map

package/components/dropdown/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,oDAAoD,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,mDAAmD,CAAC;AAmBvF,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QA+BS,aAAQ,GAAG,KAAK,CAAC;QAOjB,WAAM,GAAG,KAAK,CAAC;QAOf,aAAQ,GAAG,KAAK,CAAC;IAyB1B,CAAC;IAlEQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAUD,IAAW,KAAK;;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;IAC5D,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAwBS,cAAc;QACtB,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvD,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AApEsB,gCAAO,GAAW,mBAAmB,AAA9B,CAA+B;AACtC,+BAAM,GAAG,MAAM,AAAT,CAAU;AAcvC;IADC,QAAQ,EAAE;qDAGV;AAaM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACrB;AAOf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAGd;IADT,KAAK,CAAC,UAAU,CAAC;8DAIjB;AAGS;IADT,KAAK,CAAC,UAAU,CAAC;8DAGjB;AAxDkB,wBAAwB;IAJ5C,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;QAC9C,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;KAC9C,CAAC;GACmB,wBAAwB,CAsE5C;eAtEoB,wBAAwB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/light/item/dropdown-item.base.css.js';\nimport { styles as bootstrap } from './themes/light/item/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/item/dropdown-item.fluent.css.js';\nimport { styles as indigo } from './themes/light/item/dropdown-item.indigo.css.js';\nimport { styles as material } from './themes/light/item/dropdown-item.material.css.js';\n\n/**\n * Represents an item in a dropdown list.\n *\n * @element igc-dropdown-item\n *\n * @slot prefix - Renders content before the item's main content.\n * @slot - Renders the item's main content.\n * @slot suffix - Renders content after the item's main content.\n *\n * @csspart prefix - The prefix wrapper.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes({\n  light: { bootstrap, fluent, indigo, material },\n  dark: { bootstrap, fluent, indigo, material },\n})\nexport default class IgcDropdownItemComponent extends LitElement {\n  public static readonly tagName: string = 'igc-dropdown-item';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  private _value!: string;\n\n  /**\n   * Тhe current value of the item.\n   * If not specified, the element's text content is used.\n   * @attr\n   */\n  @property()\n  public get value() {\n    return this._value ? this._value : this.textContent ?? '';\n  }\n\n  public set value(value: string) {\n    const oldVal = this._value;\n    this._value = value;\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * Determines whether the item is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Determines whether the item is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.toggleAttribute('aria-selected', this.selected);\n    this.active = this.selected;\n  }\n\n  @watch('disabled')\n  protected disabledChange() {\n    this.toggleAttribute('aria-disabled', this.disabled);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\"><slot name=\"prefix\"></slot></section>\n      <section part=\"content\"><slot></slot></section>\n      <section part=\"suffix\"><slot name=\"suffix\"></slot></section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-item': IgcDropdownItemComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAgBzD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,0BAA0B;IAIvE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;;AALsB,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAC9B,+BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,wBAAwB;IAD5C,MAAM,CAAC,GAAG,CAAC;GACS,wBAAwB,CAO5C;eAPoB,wBAAwB","sourcesContent":["import { styles } from './themes/dropdown-item.base.css.js';\nimport { all } from './themes/item.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';\n\n/**\n * Represents an item in a dropdown list.\n *\n * @element igc-dropdown-item\n *\n * @slot prefix - Renders content before the item's main content.\n * @slot - Renders the item's main content.\n * @slot suffix - Renders content after the item's main content.\n *\n * @csspart prefix - The prefix wrapper.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\n@themes(all)\nexport default class IgcDropdownItemComponent extends IgcBaseOptionLikeComponent {\n  public static readonly tagName = 'igc-dropdown-item';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-item': IgcDropdownItemComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown.d.ts

@@ -1,13 +1,16 @@
-import { LitElement } from 'lit';
-import { Constructor } from '../common/mixins/constructor.js';
-import { IgcToggleController } from '../toggle/toggle.controller.js';
-import type { IgcPlacement, IgcToggleComponent, IgcToggleEventMap } from '../toggle/types';
 import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
-export interface IgcDropdownEventMap extends IgcToggleEventMap {
+import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type IgcPlacement } from '../popover/popover.js';
+export interface IgcDropdownEventMap {
+    igcOpening: CustomEvent<void>;
+    igcOpened: CustomEvent<void>;
+    igcClosing: CustomEvent<void>;
+    igcClosed: CustomEvent<void>;
     igcChange: CustomEvent<IgcDropdownItemComponent>;
 }
-declare const IgcDropdownComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDropdownEventMap>> & Constructor<LitElement>;
+declare const IgcDropdownComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDropdownEventMap>> & Constructor<IgcBaseComboBoxLikeComponent>;
 /**
  * Represents a DropDown component.
  *
@@ -25,33 +28,21 @@ declare const IgcDropdownComponent_base: Constructor<import("../common/mixins/si
  * @csspart base - The dropdown list wrapper.
  * @csspart list - The dropdown list.
  */
-export default class IgcDropdownComponent extends IgcDropdownComponent_base implements IgcToggleComponent {
+export default class IgcDropdownComponent extends IgcDropdownComponent_base {
     static readonly tagName = "igc-dropdown";
     static styles: import("lit").CSSResult;
     static register(): void;
-    protected toggleController: IgcToggleController;
-    protected selectedItem: IgcDropdownItemComponent | null;
-    protected activeItem: IgcDropdownItemComponent;
-    protected target: HTMLElement;
-    private readonly keyDownHandlers;
-    protected get allItems(): IgcDropdownItemComponent[];
-    private targetNodes;
-    protected content: HTMLElement;
-    protected scrollContainer: HTMLElement;
-    protected items: Array<IgcDropdownItemComponent>;
-    protected groups: Array<IgcDropdownGroupComponent>;
-    /**
-     * Whether the dropdown should be kept open on selection.
-     * @attr keep-open-on-select
-     */
-    keepOpenOnSelect: boolean;
-    /**
-     * Sets the open state of the component.
-     * @attr
-     */
-    open: boolean;
+    private _keyBindings;
+    private _rootScrollController;
+    private _rootClickController;
+    protected _selectedItem: IgcDropdownItemComponent | null;
+    protected _activeItem: IgcDropdownItemComponent;
+    private get _activeItems();
+    private _targetListeners;
+    private _target?;
+    protected trigger: HTMLSlotElement;
     /** The preferred placement of the component around the target element.
-     * @type {"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"}
+     * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'}
      * @attr
      */
     placement: IgcPlacement;
@@ -61,7 +52,7 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base impl
      */
     positionStrategy: 'absolute' | 'fixed';
     /**
-     * Determines the behavior of the component during scrolling the container.
+     * Determines the behavior of the component during scrolling of the parent container.
      * @attr scroll-strategy
      */
     scrollStrategy: 'scroll' | 'block' | 'close';
@@ -76,55 +67,42 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base impl
      * @attr
      */
     distance: number;
-    /**
-     * Whether the component should be kept open on clicking outside of it.
-     * @attr keep-open-on-outside-click
-     */
-    keepOpenOnOutsideClick: boolean;
     /**
      * Whether the dropdown's width should be the same as the target's one.
      * @attr same-width
      */
     sameWidth: boolean;
-    protected toggleDirectiveChange(): void;
-    protected updateOptions(): void;
+    /** Returns the items of the dropdown. */
+    get items(): IgcDropdownItemComponent[];
+    /** Returns the group items of the dropdown. */
+    get groups(): IgcDropdownGroupComponent[];
+    /** Returns the selected item from the dropdown or null. */
+    get selectedItem(): IgcDropdownItemComponent | null;
+    protected scrollStrategyChanged(): void;
+    protected openStateChange(): void;
     constructor();
     protected firstUpdated(): Promise<void>;
-    protected getUpdateComplete(): Promise<boolean>;
-    protected setInitialSelection(): void;
-    protected handleKeyDown: (event: KeyboardEvent) => void;
+    disconnectedCallback(): void;
+    private handleListBoxClick;
+    private handleChange;
+    private handleSlotChange;
+    private onArrowUp;
+    private onArrowDown;
     protected onHomeKey(): void;
     protected onEndKey(): void;
+    protected onTabKey(): void;
     protected onEscapeKey(): void;
     protected onEnterKey(): void;
-    protected handleClick(event: MouseEvent): void;
-    protected handleTargetClick: () => Promise<void>;
-    protected handleOpening(): boolean;
-    protected handleClosing(): boolean;
-    protected handleChange(item: IgcDropdownItemComponent): void;
-    protected handleSlotChange(): void;
-    protected handleFocusout(event: Event): void;
-    protected getItem(value: string): {
-        item: IgcDropdownItemComponent;
-        index: number;
-    };
-    protected activateItem(value: IgcDropdownItemComponent): void;
-    protected selectItem(item: IgcDropdownItemComponent, emit?: boolean): IgcDropdownItemComponent | null;
-    protected navigate(direction: -1 | 1, currentIndex?: number): void;
-    private navigateItem;
-    private scrollToHiddenItem;
-    protected getNearestSiblingFocusableItemIndex(startIndex: number, direction: -1 | 1): number;
-    private navigateNext;
-    private navigatePrev;
-    protected onArrowDownKeyDown(): void;
-    protected onArrowUpKeyDown(): void;
-    private _hide;
-    /** Shows the dropdown. */
-    show(target?: HTMLElement): void;
-    /** Hides the dropdown. */
-    hide(): void;
-    /** Toggles the open state of the dropdown. */
-    toggle(target?: HTMLElement): void;
+    private activateItem;
+    private _navigateToActiveItem;
+    private _selectItem;
+    private _updateAnchorAccessibility;
+    private getItem;
+    private _setTarget;
+    /** Shows the component. */
+    show(target?: HTMLElement | string): void;
+    /** Toggles the open state of the component. */
+    toggle(target?: HTMLElement | string): void;
     /** Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. */
     navigateTo(value: string): IgcDropdownItemComponent | null;
     /** Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. */