@carbon/ibmdotcom-web-components 1.37.0-rc.2 → 1.37.0-rc.3

package/es/components/filter-panel/filter-panel-composite.d.ts

@@ -11,7 +11,326 @@ import './filter-group';
 import './filter-panel';
 import './filter-panel-modal';
 import '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox.js';
-declare const DDSFilterPanelComposite_base: {
+import { MQDirs } from '../../component-mixins/media-query/media-query';
+declare const DDSFilterPanelComposite_base: (abstract new (...args: any[]) => {
+    _mqConfig: {
+        sm?: MQDirs | undefined;
+        md?: MQDirs | undefined;
+        lg?: MQDirs | undefined;
+        xlg?: MQDirs | undefined;
+        max?: MQDirs | undefined;
+    };
+    _generateMediaQueriesByBreakpoint(): {
+        [index: string]: MediaQueryList;
+    };
+    carbonBreakpoints: {
+        [index: string]: MediaQueryList;
+    };
+    _attachMediaQueryEventListeners(): void;
+    firstUpdated(): void;
+    accessKey: string;
+    readonly accessKeyLabel: string;
+    autocapitalize: string;
+    dir: string;
+    draggable: boolean;
+    hidden: boolean;
+    inert: boolean;
+    innerText: string;
+    lang: string;
+    readonly offsetHeight: number;
+    readonly offsetLeft: number;
+    readonly offsetParent: Element | null;
+    readonly offsetTop: number;
+    readonly offsetWidth: number;
+    outerText: string;
+    spellcheck: boolean;
+    title: string;
+    translate: boolean;
+    attachInternals(): ElementInternals;
+    click(): void;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+    removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+    readonly attributes: NamedNodeMap;
+    readonly classList: DOMTokenList;
+    className: string;
+    readonly clientHeight: number;
+    readonly clientLeft: number;
+    readonly clientTop: number;
+    readonly clientWidth: number;
+    id: string;
+    readonly localName: string;
+    readonly namespaceURI: string | null;
+    onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+    onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+    outerHTML: string;
+    readonly ownerDocument: Document;
+    readonly part: DOMTokenList;
+    readonly prefix: string | null;
+    readonly scrollHeight: number;
+    scrollLeft: number;
+    scrollTop: number;
+    readonly scrollWidth: number;
+    readonly shadowRoot: ShadowRoot | null;
+    slot: string;
+    readonly tagName: string;
+    attachShadow(init: ShadowRootInit): ShadowRoot;
+    closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+    closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+    closest<E extends Element = Element>(selectors: string): E | null;
+    getAttribute(qualifiedName: string): string | null;
+    getAttributeNS(namespace: string | null, localName: string): string | null;
+    getAttributeNames(): string[];
+    getAttributeNode(qualifiedName: string): Attr | null;
+    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+    getBoundingClientRect(): DOMRect;
+    getClientRects(): DOMRectList;
+    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
+    getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+    getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    hasAttribute(qualifiedName: string): boolean;
+    hasAttributeNS(namespace: string | null, localName: string): boolean;
+    hasAttributes(): boolean;
+    hasPointerCapture(pointerId: number): boolean;
+    insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+    insertAdjacentHTML(position: InsertPosition, text: string): void;
+    insertAdjacentText(where: InsertPosition, data: string): void;
+    matches(selectors: string): boolean;
+    releasePointerCapture(pointerId: number): void;
+    removeAttribute(qualifiedName: string): void;
+    removeAttributeNS(namespace: string | null, localName: string): void;
+    removeAttributeNode(attr: Attr): Attr;
+    requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+    requestPointerLock(): void;
+    scroll(options?: ScrollToOptions | undefined): void;
+    scroll(x: number, y: number): void;
+    scrollBy(options?: ScrollToOptions | undefined): void;
+    scrollBy(x: number, y: number): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+    scrollTo(options?: ScrollToOptions | undefined): void;
+    scrollTo(x: number, y: number): void;
+    setAttribute(qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+    setAttributeNode(attr: Attr): Attr | null;
+    setAttributeNodeNS(attr: Attr): Attr | null;
+    setPointerCapture(pointerId: number): void;
+    toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+    webkitMatchesSelector(selectors: string): boolean;
+    readonly baseURI: string;
+    readonly childNodes: NodeListOf<ChildNode>;
+    readonly firstChild: ChildNode | null;
+    readonly isConnected: boolean;
+    readonly lastChild: ChildNode | null;
+    readonly nextSibling: ChildNode | null;
+    readonly nodeName: string;
+    readonly nodeType: number;
+    nodeValue: string | null;
+    readonly parentElement: HTMLElement | null;
+    readonly parentNode: ParentNode | null;
+    readonly previousSibling: ChildNode | null;
+    textContent: string | null;
+    appendChild<T extends Node>(node: T): T;
+    cloneNode(deep?: boolean | undefined): Node;
+    compareDocumentPosition(other: Node): number;
+    contains(other: Node | null): boolean;
+    getRootNode(options?: GetRootNodeOptions | undefined): Node;
+    hasChildNodes(): boolean;
+    insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+    isDefaultNamespace(namespace: string | null): boolean;
+    isEqualNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: Node | null): boolean;
+    lookupNamespaceURI(prefix: string | null): string | null;
+    lookupPrefix(namespace: string | null): string | null;
+    normalize(): void;
+    removeChild<T_2 extends Node>(child: T_2): T_2;
+    replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+    readonly ATTRIBUTE_NODE: number;
+    readonly CDATA_SECTION_NODE: number;
+    readonly COMMENT_NODE: number;
+    readonly DOCUMENT_FRAGMENT_NODE: number;
+    readonly DOCUMENT_NODE: number;
+    readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+    readonly DOCUMENT_POSITION_CONTAINS: number;
+    readonly DOCUMENT_POSITION_DISCONNECTED: number;
+    readonly DOCUMENT_POSITION_FOLLOWING: number;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+    readonly DOCUMENT_POSITION_PRECEDING: number;
+    readonly DOCUMENT_TYPE_NODE: number;
+    readonly ELEMENT_NODE: number;
+    readonly ENTITY_NODE: number;
+    readonly ENTITY_REFERENCE_NODE: number;
+    readonly NOTATION_NODE: number;
+    readonly PROCESSING_INSTRUCTION_NODE: number;
+    readonly TEXT_NODE: number;
+    dispatchEvent(event: Event): boolean;
+    ariaAtomic: string | null;
+    ariaAutoComplete: string | null;
+    ariaBusy: string | null;
+    ariaChecked: string | null;
+    ariaColCount: string | null;
+    ariaColIndex: string | null;
+    ariaColSpan: string | null;
+    ariaCurrent: string | null;
+    ariaDisabled: string | null;
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    ariaHidden: string | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: string | null;
+    ariaLive: string | null;
+    ariaModal: string | null;
+    ariaMultiLine: string | null;
+    ariaMultiSelectable: string | null;
+    ariaOrientation: string | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: string | null;
+    ariaPressed: string | null;
+    ariaReadOnly: string | null;
+    ariaRequired: string | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: string | null;
+    ariaRowIndex: string | null;
+    ariaRowSpan: string | null;
+    ariaSelected: string | null;
+    ariaSetSize: string | null;
+    ariaSort: string | null;
+    ariaValueMax: string | null;
+    ariaValueMin: string | null;
+    ariaValueNow: string | null;
+    ariaValueText: string | null;
+    animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+    getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+    after(...nodes: (string | Node)[]): void;
+    before(...nodes: (string | Node)[]): void;
+    remove(): void;
+    replaceWith(...nodes: (string | Node)[]): void;
+    innerHTML: string;
+    readonly nextElementSibling: Element | null;
+    readonly previousElementSibling: Element | null;
+    readonly childElementCount: number;
+    readonly children: HTMLCollection;
+    readonly firstElementChild: Element | null;
+    readonly lastElementChild: Element | null;
+    append(...nodes: (string | Node)[]): void;
+    prepend(...nodes: (string | Node)[]): void;
+    querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+    querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+    querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+    querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+    querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+    replaceChildren(...nodes: (string | Node)[]): void;
+    readonly assignedSlot: HTMLSlotElement | null;
+    oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    readonly style: CSSStyleDeclaration;
+    contentEditable: string;
+    enterKeyHint: string;
+    inputMode: string;
+    readonly isContentEditable: boolean;
+    onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onerror: OnErrorEventHandler;
+    onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+    ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+    onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+    onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+    onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+    autofocus: boolean;
+    readonly dataset: DOMStringMap;
+    nonce?: string | undefined;
+    tabIndex: number;
+    blur(): void;
+    focus(options?: FocusOptions | undefined): void;
+}) & {
     new (...args: any[]): {
         _handles: Set<import("../../internal/vendor/@carbon/web-components/globals/internal/handle.js").default>;
         connectedCallback(): void;
@@ -36,7 +355,7 @@ declare const DDSFilterPanelComposite_base: {
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener<K_10 extends keyof HTMLElementEventMap>(type: K_10, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_10]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
@@ -66,7 +385,7 @@ declare const DDSFilterPanelComposite_base: {
         attachShadow(init: ShadowRootInit): ShadowRoot;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<E extends Element = Element>(selectors: string): E | null;
+        closest<E_3 extends Element = Element>(selectors: string): E_3 | null;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -91,7 +410,12 @@ declare const DDSFilterPanelComposite_base: {
         matches(selectors: string): boolean;
         releasePointerCapture(pointerId: number): void;
         removeAttribute(qualifiedName: string): void;
-        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void; /**
+         * Handles the state change when an input select is selected.
+         *
+         * @param event title state change
+         * @private
+         */
         removeAttributeNode(attr: Attr): Attr;
         requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
         requestPointerLock(): void;
@@ -172,9 +496,7 @@ declare const DDSFilterPanelComposite_base: {
         ariaLabel: string | null;
         ariaLevel: string | null;
         ariaLive: string | null;
-        ariaModal: string | null; /**
-         * sets the filter button title
-         */
+        ariaModal: string | null;
         ariaMultiLine: string | null;
         ariaMultiSelectable: string | null;
         ariaOrientation: string | null;
@@ -200,7 +522,11 @@ declare const DDSFilterPanelComposite_base: {
         before(...nodes: (string | Node)[]): void;
         remove(): void;
         replaceWith(...nodes: (string | Node)[]): void;
-        innerHTML: string;
+        innerHTML: string; /**
+         * Handles `slotchange` event.
+         *
+         * @param event The event.
+         */
         readonly nextElementSibling: Element | null;
         readonly previousElementSibling: Element | null;
         readonly childElementCount: number;
@@ -229,7 +555,10 @@ declare const DDSFilterPanelComposite_base: {
         onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null; /**
+         * Renders original content into the modal and listens for changes to this
+         * content to then be stored in `this._heading` and `this._contents`.
+         */
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -240,6 +569,9 @@ declare const DDSFilterPanelComposite_base: {
         oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        /**
+         * Renders copies of slotted elements into the desktop presentation.
+         */
         ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
         ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
         ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
@@ -359,9 +691,9 @@ declare const DDSFilterPanelComposite_base: {
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
-        addEventListener<K_10 extends keyof HTMLElementEventMap>(type: K_10, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_10]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener<K_11 extends keyof HTMLElementEventMap>(type: K_11, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_11]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_11 extends keyof HTMLElementEventMap>(type: K_11, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_11]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener<K_12 extends keyof HTMLElementEventMap>(type: K_12, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_12]) => any, options?: boolean | EventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
@@ -387,9 +719,9 @@ declare const DDSFilterPanelComposite_base: {
         slot: string;
         readonly tagName: string;
         attachShadow(init: ShadowRootInit): ShadowRoot;
-        closest<K_12 extends keyof HTMLElementTagNameMap>(selector: K_12): HTMLElementTagNameMap[K_12] | null;
-        closest<K_13 extends keyof SVGElementTagNameMap>(selector: K_13): SVGElementTagNameMap[K_13] | null;
-        closest<E_3 extends Element = Element>(selectors: string): E_3 | null;
+        closest<K_13 extends keyof HTMLElementTagNameMap>(selector: K_13): HTMLElementTagNameMap[K_13] | null;
+        closest<K_14 extends keyof SVGElementTagNameMap>(selector: K_14): SVGElementTagNameMap[K_14] | null;
+        closest<E_4 extends Element = Element>(selectors: string): E_4 | null;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -398,8 +730,8 @@ declare const DDSFilterPanelComposite_base: {
         getBoundingClientRect(): DOMRect;
         getClientRects(): DOMRectList;
         getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_14 extends keyof HTMLElementTagNameMap>(qualifiedName: K_14): HTMLCollectionOf<HTMLElementTagNameMap[K_14]>;
-        getElementsByTagName<K_15 extends keyof SVGElementTagNameMap>(qualifiedName: K_15): HTMLCollectionOf<SVGElementTagNameMap[K_15]>;
+        getElementsByTagName<K_15 extends keyof HTMLElementTagNameMap>(qualifiedName: K_15): HTMLCollectionOf<HTMLElementTagNameMap[K_15]>;
+        getElementsByTagName<K_16 extends keyof SVGElementTagNameMap>(qualifiedName: K_16): HTMLCollectionOf<SVGElementTagNameMap[K_16]>;
         getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
@@ -458,8 +790,8 @@ declare const DDSFilterPanelComposite_base: {
         lookupNamespaceURI(prefix: string | null): string | null;
         lookupPrefix(namespace: string | null): string | null;
         normalize(): void;
-        removeChild<T_6 extends Node>(child: T_6): T_6;
-        replaceChild<T_7 extends Node>(node: Node, child: T_7): T_7;
+        removeChild<T_2 extends Node>(child: T_2): T_2;
+        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
         readonly ATTRIBUTE_NODE: number;
         readonly CDATA_SECTION_NODE: number;
         readonly COMMENT_NODE: number;
@@ -530,12 +862,12 @@ declare const DDSFilterPanelComposite_base: {
         readonly lastElementChild: Element | null;
         append(...nodes: (string | Node)[]): void;
         prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_16 extends keyof HTMLElementTagNameMap>(selectors: K_16): HTMLElementTagNameMap[K_16] | null;
-        querySelector<K_17 extends keyof SVGElementTagNameMap>(selectors: K_17): SVGElementTagNameMap[K_17] | null;
-        querySelector<E_4 extends Element = Element>(selectors: string): E_4 | null;
-        querySelectorAll<K_18 extends keyof HTMLElementTagNameMap>(selectors: K_18): NodeListOf<HTMLElementTagNameMap[K_18]>;
-        querySelectorAll<K_19 extends keyof SVGElementTagNameMap>(selectors: K_19): NodeListOf<SVGElementTagNameMap[K_19]>;
-        querySelectorAll<E_5 extends Element = Element>(selectors: string): NodeListOf<E_5>;
+        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
         oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
@@ -693,6 +1025,7 @@ declare class DDSFilterPanelComposite extends DDSFilterPanelComposite_base {
      * @private
      */
     protected _handleClearSelection: () => void;
+    _headingSlot: any;
     /**
      * `true` to open the locale modal.
      */
@@ -708,17 +1041,13 @@ declare class DDSFilterPanelComposite extends DDSFilterPanelComposite_base {
      */
     _contents: any[];
     /**
-     * sets the array for the filter button title
+     * Sets the heading text, to be composed with the current count.
      */
-    _title: any[];
+    _heading: string;
     /**
      * sets the selected values into an array
      */
     _selectedValues: string[];
-    /**
-     * sets the filter button title
-     */
-    _filterButtonTitle: string;
     /**
      * stores which filter groups have revealed filters
      */
@@ -731,7 +1060,7 @@ declare class DDSFilterPanelComposite extends DDSFilterPanelComposite_base {
      * An element to set focus to on render.
      */
     _focusElement: string | null;
-    private _handleWindowResize;
+    protected mediaQueryCallbackMaxLG(): void;
     protected _querySelectorMobile(id: string): Promise<Element | null>;
     protected _querySelectorDesktop(id: string): Promise<Element | null>;
     protected _querySelector(id: string): Promise<Element | null>;
@@ -741,18 +1070,20 @@ declare class DDSFilterPanelComposite extends DDSFilterPanelComposite_base {
      * @param event The event.
      */
     protected _handleSlotChange({ target }: Event): void;
-    protected renderStatus(): void;
+    protected _getComposedHeadingFilterCount(): string;
     /**
-     * Handles `slotchange` event.
+     * Handles `slotchange` event for the heading slot.
      *
      * @param event The event.
      */
-    protected _handleTitleSlotChange({ target }: Event): void;
+    protected _handleHeadingSlotChange({ target }: Event): void;
+    protected _setHeadingFromSlot(slot: HTMLSlotElement): void;
     /**
      * Renders original content into the modal and listens for changes to this
-     * content to then be stored in `this._title` and `this._content`.
+     * content to then be stored in `this._heading` and `this._contents`.
      */
     protected _renderModal: () => TemplateResult;
+    protected _renderMobile: () => TemplateResult;
     /**
      * Renders copies of slotted elements into the desktop presentation.
      */

package/es/components/filter-panel/filter-panel-composite.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/filter-panel/filter-panel-composite.ts"],"names":[],"mappings":"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","file":"filter-panel-composite.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, property, state, TemplateResult } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport Filter from '../../internal/vendor/@carbon/web-components/icons/filter/16.js';\nimport HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport './filter-group';\nimport './filter-panel';\nimport './filter-panel-modal';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport styles from './filter-panel.scss';\nimport '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox.js';\nimport DDSFilterGroupItem from './filter-group-item';\nimport DDSFilterPanelCheckbox from './filter-panel-checkbox';\nimport DDSFilterPanelInputSelect from './filter-panel-input-select';\nimport DDSFilterPanelInputSelectItem from './filter-panel-input-select-item';\nimport { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * Filter panel composite\n *\n * @element dds-filter-panel-composite\n */\n@customElement(`${ddsPrefix}-filter-panel-composite`)\nclass DDSFilterPanelComposite extends HostListenerMixin(\n  StableSelectorMixin(LitElement)\n) {\n  /**\n   * Host listener for handling the state change when a input select item is selected.\n   *\n   * @param event content state change\n   * @private\n   */\n  @HostListener('document:eventInputSelectItem')\n  protected _handleInputSelectItemStateChange = (event: CustomEvent) => {\n    const { value, lastValue, headerValue } = event.detail;\n\n    const { stableSelector } = DDSFilterPanelInputSelectItem;\n    this._focusElement = `${stableSelector}[value=\"${value}\"]`;\n\n    // remove the DDSInputSelect (header) value from list to add an inner child instead\n    this._selectedValues = this._selectedValues.filter(\n      (e) => e !== headerValue\n    );\n\n    if (!value) {\n      this._selectedValues = this._selectedValues.filter((e) => e !== value);\n      return;\n    }\n\n    if (!this._selectedValues.includes(value)) {\n      this._selectedValues.push(value);\n    }\n\n    if (lastValue && this._selectedValues.includes(lastValue)) {\n      this._selectedValues = this._selectedValues.filter(\n        (e) => e !== lastValue\n      );\n    }\n    this.renderStatus();\n  };\n\n  /**\n   * Host listener for handling the state change when a checkbox is selected.\n   *\n   * @param event checkbox select event\n   * @private\n   */\n  @HostListener('document:eventCheckboxSelect')\n  protected _handleCheckboxStateChange = (event: CustomEvent) => {\n    const { value } = event.detail;\n\n    // toggle checkbox in filter panel modal\n    this.querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`).forEach((e) => {\n      if (e.getAttribute('value') === value) {\n        e.toggleAttribute('checked');\n        e.closest(`${ddsPrefix}-filter-group-item`)?.setAttribute('open', '');\n\n        const { stableSelector } = DDSFilterPanelCheckbox;\n        this._focusElement = `${stableSelector}[value=\"${value}\"]`;\n      }\n    });\n\n    const filterGroupItems = this.querySelectorAll(\n      `${ddsPrefix}-filter-group-item`\n    );\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-group-item`)\n      .forEach((filterGroupItem, index) => {\n        if ((filterGroupItem as DDSFilterGroupItem).open) {\n          (filterGroupItems[index] as DDSFilterGroupItem).open = true;\n        }\n      });\n\n    // toggle value in list\n    if (!this._selectedValues.includes(value)) {\n      this._selectedValues.push(value);\n    } else {\n      this._selectedValues = this._selectedValues.filter((e) => e !== value);\n    }\n\n    this.renderStatus();\n  };\n\n  /**\n   * Host listener for caching filter group items' view all states.\n   *\n   * @param event filter group item view all toggle event\n   * @private\n   */\n  @HostListener('document:eventFilterGroupViewAllToggle')\n  protected _handleFilterGroupViewAllToggle = (event: CustomEvent) => {\n    const match = this._filterGroupsAllRevealed.findIndex((entry) => {\n      return entry.id === event.detail.id;\n    });\n\n    if (match !== -1) {\n      this._filterGroupsAllRevealed[match].value = event.detail.value;\n    } else {\n      this._filterGroupsAllRevealed.push(event.detail);\n    }\n  };\n\n  /**\n   * handles modal close event\n   */\n  @HostListener('document:eventModalClose')\n  protected modalCloseEvent = () => {\n    this.openFilterModal = false;\n  };\n\n  /**\n   * Handles the state change when an input select is selected.\n   *\n   * @param event title state change\n   * @private\n   */\n  @HostListener('document:eventInputSelect')\n  protected _handleInputSelectStateChange = (event: CustomEvent) => {\n    const { headerValue } = event.detail;\n\n    const { stableSelector } = DDSFilterPanelInputSelect;\n    this._focusElement = `${stableSelector}[header-value=\"${headerValue}\"]`;\n\n    // toggle checkbox in filter panel modal\n    this.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`).forEach(\n      (e) => {\n        // capture the element counterpart in Filter Panel Modal\n        if (e.getAttribute('header-value') === headerValue) {\n          const currentGroup = e.closest(`${ddsPrefix}-filter-group-item`);\n          currentGroup?.setAttribute('open', '');\n\n          // Clears all other sibling items in the Filter Group\n          currentGroup\n            ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)\n            .forEach((inputSelect) => {\n              if (inputSelect === e) return;\n              this._selectedValues = this._selectedValues.filter(\n                (str) => str !== inputSelect.getAttribute('header-value')\n              );\n              inputSelect.removeAttribute('selected');\n              inputSelect.removeAttribute('is-open');\n            });\n\n          e.toggleAttribute('selected');\n          e.toggleAttribute('is-open');\n        }\n      }\n    );\n\n    // toggle value in list\n    if (!this._selectedValues.includes(headerValue)) {\n      this._selectedValues.push(headerValue);\n    } else {\n      this._selectedValues = this._selectedValues.filter(\n        (e) => e !== headerValue\n      );\n    }\n    this.renderStatus();\n  };\n\n  @HostListener('document:eventHeadingChange')\n  protected _handleHeadingChange = () => {\n    this.renderStatus();\n  };\n\n  /**\n   * selected value property\n   */\n  @property({ type: String, reflect: true })\n  selectValue = '';\n\n  /**\n   * Event handler for the clearing functionality\n   *\n   * @private\n   */\n  @HostListener('document:eventSelectionClear')\n  protected _handleClearSelection = () => {\n    this._selectedValues = [];\n\n    // handles clear when clearing from the static filter panel modal\n    this._contents.forEach((group) => {\n      group\n        .querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`)\n        .forEach((e) => {\n          e.removeAttribute('checked');\n        });\n      group\n        .querySelectorAll(`${ddsPrefix}-filter-panel-input-select-item`)\n        .forEach((e) => {\n          e.removeAttribute('selected');\n          e.removeAttribute('is-open');\n        });\n      group\n        .querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)\n        .forEach((e) => {\n          e.removeAttribute('selected');\n          e.removeAttribute('is-open');\n        });\n    });\n\n    // handles clear when clearing from the filter panel static\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`)\n      .forEach((e) => {\n        e.removeAttribute('checked');\n      });\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select-item`)\n      .forEach((e) => {\n        e.removeAttribute('selected');\n        e.removeAttribute('is-open');\n      });\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)\n      .forEach((e) => {\n        e.removeAttribute('selected');\n        e.removeAttribute('is-open');\n      });\n\n    this.renderStatus();\n  };\n\n  /**\n   * `true` to open the locale modal.\n   */\n  @property({ type: Boolean })\n  openFilterModal = false;\n\n  /**\n   * Sets the open modal to true\n   *\n   * @private\n   */\n  protected _openModal() {\n    this.openFilterModal = true;\n  }\n\n  /**\n   *\n   */\n  @property()\n  _contents: any[] = [];\n\n  /**\n   * sets the array for the filter button title\n   */\n  @property()\n  _title: any[] = [];\n\n  /**\n   * sets the selected values into an array\n   */\n  @property()\n  _selectedValues: string[] = [];\n\n  /**\n   * sets the filter button title\n   */\n  @property()\n  _filterButtonTitle: string = '';\n\n  /**\n   * stores which filter groups have revealed filters\n   */\n  @property()\n  _filterGroupsAllRevealed: { id: string; value: boolean }[] = [];\n\n  @property()\n  _isMobile: boolean = window.innerWidth < breakpoint;\n\n  /**\n   * An element to set focus to on render.\n   */\n  @state()\n  _focusElement: string | null = null;\n\n  @HostListener('window:resize')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleWindowResize = (): void => {\n    this._isMobile = window.innerWidth < breakpoint;\n  };\n\n  protected async _querySelectorMobile(id: string): Promise<Element | null> {\n    return this.querySelector(id);\n  }\n\n  protected async _querySelectorDesktop(id: string): Promise<Element | null> {\n    let element;\n    if (this.shadowRoot) {\n      element = this.shadowRoot.querySelector(id);\n    }\n    return element;\n  }\n\n  protected async _querySelector(id: string): Promise<Element | null> {\n    const { _isMobile } = this;\n    let element;\n\n    if (_isMobile) {\n      element = await this._querySelectorMobile(id);\n    } else {\n      element = await this._querySelectorDesktop(id);\n    }\n    return element;\n  }\n\n  /**\n   * Handles `slotchange` event.\n   *\n   * @param event The event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const contents = (this._contents = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      ));\n    // Calculate initial this._selectedValues. Look at the first node, which is\n    // expected to be <dds-filter-group>.\n    if (contents[0] instanceof Element) {\n      const items = Array.from(\n        contents[0].querySelectorAll(\n          `${ddsPrefix}-filter-panel-checkbox[checked],\n            ${ddsPrefix}-filter-panel-input-select[selected],\n            ${ddsPrefix}-filter-panel-input-select-item[selected]`\n        )\n      );\n      this._selectedValues = items\n        .map((item) => {\n          return item.getAttribute('value') ?? '';\n        })\n        .filter((item) => !!item);\n    }\n  }\n\n  protected renderStatus() {\n    this._filterButtonTitle = `\n      ${this._title[0].innerText}${\n      this._selectedValues.length > 0 ? ` (${this._selectedValues.length})` : ''\n    }\n    `;\n  }\n\n  /**\n   * Handles `slotchange` event.\n   *\n   * @param event The event.\n   */\n  protected _handleTitleSlotChange({ target }: Event) {\n    this._title = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    this._filterButtonTitle = this._title[0].innerText;\n  }\n\n  /**\n   * Renders original content into the modal and listens for changes to this\n   * content to then be stored in `this._title` and `this._content`.\n   */\n  protected _renderModal = (): TemplateResult => html`\n    <dds-filter-panel-modal\n      ?open=${this.openFilterModal}\n      heading=\"${this._filterButtonTitle}\"\n      ?has-selections=\"${this._selectedValues.length}\">\n      <slot name=\"heading\" @slotchange=\"${this._handleTitleSlotChange}\"></slot>\n      <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n    </dds-filter-panel-modal>\n  `;\n\n  /**\n   * Renders copies of slotted elements into the desktop presentation.\n   */\n  protected _renderDesktop = (): TemplateResult => html`\n    <dds-filter-panel\n      heading=\"${this._filterButtonTitle}\"\n      ?has-selections=\"${this._selectedValues.length}\">\n      ${this._title.map((e) => {\n        return html` ${unsafeHTML((e as HTMLElement).outerHTML)} `;\n      })}\n      ${this._contents.map((e) => {\n        return html` ${unsafeHTML((e as HTMLElement).outerHTML)} `;\n      })}\n    </dds-filter-panel>\n  `;\n\n  render() {\n    return html`\n      <button class=\"bx--filter-button\" @click=${this._openModal}>\n        <div class=\"${prefix}--filter__modal__button\">\n          ${this._filterButtonTitle} ${Filter()}\n        </div>\n      </button>\n      ${this._renderModal()} ${this._renderDesktop()}\n    `;\n  }\n\n  protected async updated() {\n    const { _focusElement } = this;\n\n    if (_focusElement) {\n      const targetElement = await this._querySelector(_focusElement);\n\n      if (targetElement instanceof HTMLElement) {\n        targetElement?.focus();\n      }\n\n      this._focusElement = null;\n    }\n  }\n\n  /**\n   * The name of the custom event captured upon selecting a checkbox\n   */\n\n  static get eventCheckboxSelect() {\n    return `${ddsPrefix}-checkbox-select`;\n  }\n\n  /**\n   * The name of the custom event captured upon selecting an input select item.\n   */\n\n  static get eventInputSelectItem() {\n    return `${ddsPrefix}-filter-panel-input-select`;\n  }\n\n  /**\n   * The name of the custom event captured upon activating \"view all\" button in\n   * a filter group item\n   */\n\n  static get eventFilterGroupViewAllToggle() {\n    return `${ddsPrefix}-filter-group-view-all-toggle`;\n  }\n\n  /**\n   * The name of the custom event captured upon closing the modal\n   */\n\n  static get eventModalClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event capture upon selecting an input select item\n   */\n\n  static get eventInputSelect() {\n    return `${ddsPrefix}-filter-panel-input-select-title`;\n  }\n\n  /**\n   * The name of the custom event fired to clear selections\n   */\n\n  static get eventSelectionClear() {\n    return `${ddsPrefix}-selection-clear`;\n  }\n\n  /**\n   * The name of the custom event capture when the heading changes\n   */\n\n  static get eventHeadingChange() {\n    return `${ddsPrefix}-filter-panel-heading-change`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}-filter-panel-composite`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSFilterPanelComposite;\n"]}
+{"version":3,"sources":["components/filter-panel/filter-panel-composite.ts"],"names":[],"mappings":"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","file":"filter-panel-composite.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  html,\n  LitElement,\n  property,\n  state,\n  TemplateResult,\n  query,\n} from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport Filter from '../../internal/vendor/@carbon/web-components/icons/filter/16.js';\nimport HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';\nimport './filter-group';\nimport './filter-panel';\nimport './filter-panel-modal';\nimport HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport styles from './filter-panel.scss';\nimport '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox.js';\nimport DDSFilterGroupItem from './filter-group-item';\nimport DDSFilterPanelCheckbox from './filter-panel-checkbox';\nimport DDSFilterPanelInputSelect from './filter-panel-input-select';\nimport DDSFilterPanelInputSelectItem from './filter-panel-input-select-item';\nimport { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';\nimport MediaQueryMixin, {\n  MQBreakpoints,\n  MQDirs,\n} from '../../component-mixins/media-query/media-query';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * Filter panel composite\n *\n * @element dds-filter-panel-composite\n */\n@customElement(`${ddsPrefix}-filter-panel-composite`)\nclass DDSFilterPanelComposite extends MediaQueryMixin(\n  HostListenerMixin(StableSelectorMixin(LitElement)),\n  { [MQBreakpoints.LG]: MQDirs.MAX }\n) {\n  /**\n   * Host listener for handling the state change when a input select item is selected.\n   *\n   * @param event content state change\n   * @private\n   */\n  @HostListener('document:eventInputSelectItem')\n  protected _handleInputSelectItemStateChange = (event: CustomEvent) => {\n    const { value, lastValue, headerValue } = event.detail;\n\n    const { stableSelector } = DDSFilterPanelInputSelectItem;\n    this._focusElement = `${stableSelector}[value=\"${value}\"]`;\n\n    // Remove the DDSInputSelect (header) value from list to add an inner child instead.\n    this._selectedValues = this._selectedValues.filter(\n      (e) => e !== headerValue\n    );\n\n    if (!value) {\n      this._selectedValues = this._selectedValues.filter((e) => e !== value);\n      return;\n    }\n\n    if (!this._selectedValues.includes(value)) {\n      this._selectedValues = [...this._selectedValues, value];\n    }\n\n    if (lastValue && this._selectedValues.includes(lastValue)) {\n      this._selectedValues = this._selectedValues.filter(\n        (e) => e !== lastValue\n      );\n    }\n  };\n\n  /**\n   * Host listener for handling the state change when a checkbox is selected.\n   *\n   * @param event checkbox select event\n   * @private\n   */\n  @HostListener('document:eventCheckboxSelect')\n  protected _handleCheckboxStateChange = (event: CustomEvent) => {\n    const { value } = event.detail;\n\n    // Toggle checkbox in filter panel modal.\n    this.querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`).forEach((e) => {\n      if (e.getAttribute('value') === value) {\n        e.toggleAttribute('checked');\n        e.closest(`${ddsPrefix}-filter-group-item`)?.setAttribute('open', '');\n\n        const { stableSelector } = DDSFilterPanelCheckbox;\n        this._focusElement = `${stableSelector}[value=\"${value}\"]`;\n      }\n    });\n\n    const filterGroupItems = this.querySelectorAll(\n      `${ddsPrefix}-filter-group-item`\n    );\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-group-item`)\n      .forEach((filterGroupItem, index) => {\n        if ((filterGroupItem as DDSFilterGroupItem).open) {\n          (filterGroupItems[index] as DDSFilterGroupItem).open = true;\n        }\n      });\n\n    // Toggle value in list.\n    if (!this._selectedValues.includes(value)) {\n      this._selectedValues = [...this._selectedValues, value];\n    } else {\n      this._selectedValues = this._selectedValues.filter((e) => e !== value);\n    }\n  };\n\n  /**\n   * Host listener for caching filter group items' view all states.\n   *\n   * @param event filter group item view all toggle event\n   * @private\n   */\n  @HostListener('document:eventFilterGroupViewAllToggle')\n  protected _handleFilterGroupViewAllToggle = (event: CustomEvent) => {\n    const match = this._filterGroupsAllRevealed.findIndex((entry) => {\n      return entry.id === event.detail.id;\n    });\n\n    if (match !== -1) {\n      this._filterGroupsAllRevealed[match].value = event.detail.value;\n    } else {\n      this._filterGroupsAllRevealed = [\n        ...this._filterGroupsAllRevealed,\n        event.detail,\n      ];\n    }\n  };\n\n  /**\n   * handles modal close event\n   */\n  @HostListener('document:eventModalClose')\n  protected modalCloseEvent = () => {\n    this.openFilterModal = false;\n  };\n\n  /**\n   * Handles the state change when an input select is selected.\n   *\n   * @param event title state change\n   * @private\n   */\n  @HostListener('document:eventInputSelect')\n  protected _handleInputSelectStateChange = (event: CustomEvent) => {\n    const { headerValue } = event.detail;\n\n    const { stableSelector } = DDSFilterPanelInputSelect;\n    this._focusElement = `${stableSelector}[header-value=\"${headerValue}\"]`;\n\n    // Toggle checkbox in filter panel modal.\n    this.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`).forEach(\n      (e) => {\n        // Capture the element counterpart in Filter Panel Modal.\n        if (e.getAttribute('header-value') === headerValue) {\n          const currentGroup = e.closest(`${ddsPrefix}-filter-group-item`);\n          currentGroup?.setAttribute('open', '');\n\n          // Clears all other sibling items in the Filter Group\n          currentGroup\n            ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)\n            .forEach((inputSelect) => {\n              if (inputSelect === e) return;\n              this._selectedValues = this._selectedValues.filter(\n                (str) => str !== inputSelect.getAttribute('header-value')\n              );\n              inputSelect.removeAttribute('selected');\n              inputSelect.removeAttribute('is-open');\n            });\n\n          e.toggleAttribute('selected');\n          e.toggleAttribute('is-open');\n        }\n      }\n    );\n\n    // Toggle value in list.\n    if (!this._selectedValues.includes(headerValue)) {\n      this._selectedValues = [...this._selectedValues, headerValue];\n    } else {\n      this._selectedValues = this._selectedValues.filter(\n        (e) => e !== headerValue\n      );\n    }\n  };\n\n  @HostListener('document:eventHeadingChange')\n  protected _handleHeadingChange = () => {\n    this._setHeadingFromSlot(this._headingSlot);\n  };\n\n  /**\n   * selected value property\n   */\n  @property({ type: String, reflect: true })\n  selectValue = '';\n\n  /**\n   * Event handler for the clearing functionality\n   *\n   * @private\n   */\n  @HostListener('document:eventSelectionClear')\n  protected _handleClearSelection = () => {\n    this._selectedValues = [];\n\n    // Handles clear when clearing from the static filter panel modal.\n    this._contents.forEach((group) => {\n      group\n        .querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`)\n        .forEach((e) => {\n          e.removeAttribute('checked');\n        });\n      group\n        .querySelectorAll(`${ddsPrefix}-filter-panel-input-select-item`)\n        .forEach((e) => {\n          e.removeAttribute('selected');\n          e.removeAttribute('is-open');\n        });\n      group\n        .querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)\n        .forEach((e) => {\n          e.removeAttribute('selected');\n          e.removeAttribute('is-open');\n        });\n    });\n\n    // handles clear when clearing from the filter panel static\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`)\n      .forEach((e) => {\n        e.removeAttribute('checked');\n      });\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select-item`)\n      .forEach((e) => {\n        e.removeAttribute('selected');\n        e.removeAttribute('is-open');\n      });\n    this.shadowRoot\n      ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)\n      .forEach((e) => {\n        e.removeAttribute('selected');\n        e.removeAttribute('is-open');\n      });\n  };\n\n  @query('slot[name=heading]')\n  _headingSlot;\n\n  /**\n   * `true` to open the locale modal.\n   */\n  @property({ type: Boolean })\n  openFilterModal = false;\n\n  /**\n   * Sets the open modal to true\n   *\n   * @private\n   */\n  protected _openModal() {\n    this.openFilterModal = true;\n  }\n\n  /**\n   *\n   */\n  @property()\n  _contents: any[] = [];\n\n  /**\n   * Sets the heading text, to be composed with the current count.\n   */\n  @property()\n  _heading: string = '';\n\n  /**\n   * sets the selected values into an array\n   */\n  @property()\n  _selectedValues: string[] = [];\n\n  /**\n   * stores which filter groups have revealed filters\n   */\n  @property()\n  _filterGroupsAllRevealed: { id: string; value: boolean }[] = [];\n\n  @state()\n  _isMobile = this.carbonBreakpoints.lg.matches;\n\n  /**\n   * An element to set focus to on render.\n   */\n  @state()\n  _focusElement: string | null = null;\n\n  protected mediaQueryCallbackMaxLG() {\n    this._isMobile = this.carbonBreakpoints.lg.matches;\n  }\n\n  protected async _querySelectorMobile(id: string): Promise<Element | null> {\n    return this.querySelector(id);\n  }\n\n  protected async _querySelectorDesktop(id: string): Promise<Element | null> {\n    let element;\n    if (this.shadowRoot) {\n      element = this.shadowRoot.querySelector(id);\n    }\n    return element;\n  }\n\n  protected async _querySelector(id: string): Promise<Element | null> {\n    const { _isMobile } = this;\n    let element;\n\n    if (_isMobile) {\n      element = await this._querySelectorMobile(id);\n    } else {\n      element = await this._querySelectorDesktop(id);\n    }\n    return element;\n  }\n\n  /**\n   * Handles `slotchange` event.\n   *\n   * @param event The event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    this._contents = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    // Calculate initial this._selectedValues. Look at the first node, which is\n    // expected to be <dds-filter-group>.\n    if (this._contents[0] instanceof Element) {\n      const items = Array.from(\n        this._contents[0].querySelectorAll(\n          `${ddsPrefix}-filter-panel-checkbox[checked],\n            ${ddsPrefix}-filter-panel-input-select[selected],\n            ${ddsPrefix}-filter-panel-input-select-item[selected]`\n        )\n      );\n      this._selectedValues = items\n        .map((item) => {\n          return (\n            item.getAttribute('value') ??\n            item.getAttribute('header-value') ??\n            ''\n          );\n        })\n        .filter((item) => !!item);\n    }\n  }\n\n  protected _getComposedHeadingFilterCount() {\n    const filterCount =\n      this._selectedValues.length > 0\n        ? ` (${this._selectedValues.length})`\n        : '';\n    return `${this._heading}${filterCount}`;\n  }\n\n  /**\n   * Handles `slotchange` event for the heading slot.\n   *\n   * @param event The event.\n   */\n  protected _handleHeadingSlotChange({ target }: Event) {\n    this._setHeadingFromSlot(target as HTMLSlotElement);\n  }\n\n  protected _setHeadingFromSlot(slot: HTMLSlotElement) {\n    // Clean slate.\n    this._heading = '';\n\n    // Work through candidate headings, ultimately we're only interested in the\n    // first non-empty node.\n    const candidateHeadings = slot\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n\n    // If we found something, lets retain it's textContent as the heading.\n    if (candidateHeadings.length > 0) {\n      this._heading = candidateHeadings[0].textContent\n        ? candidateHeadings[0].textContent.trim()\n        : '';\n    }\n  }\n\n  /**\n   * Renders original content into the modal and listens for changes to this\n   * content to then be stored in `this._heading` and `this._contents`.\n   */\n  protected _renderModal = (): TemplateResult => html`\n    <dds-filter-panel-modal\n      ?open=${this.openFilterModal}\n      heading=\"${this._getComposedHeadingFilterCount()}\"\n      ?has-selections=\"${this._selectedValues.length}\">\n      <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n    </dds-filter-panel-modal>\n  `;\n\n  protected _renderMobile = (): TemplateResult => html`\n    <button class=\"bx--filter-button\" @click=${this._openModal}>\n      <div class=\"${prefix}--filter__modal__button\">\n        ${this._getComposedHeadingFilterCount()} ${Filter()}\n      </div>\n    </button>\n    ${this._renderModal()}\n  `;\n\n  /**\n   * Renders copies of slotted elements into the desktop presentation.\n   */\n  protected _renderDesktop = (): TemplateResult => html`\n    <dds-filter-panel\n      heading=\"${this._getComposedHeadingFilterCount()}\"\n      ?has-selections=\"${this._selectedValues.length}\">\n      <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n    </dds-filter-panel>\n  `;\n\n  render() {\n    // Note that the <slot name=\"heading\"> contents, intended to be\n    // <dds-filter-panel-heading> are never shown as is. The text contents\n    // are composed, using this._getComposedHeadingFilterCount(), together with\n    // the current filter count, and passed as an attribute to\n    // <dds-filter-panel-modal> and <dds-filter-panel>.\n    return html`\n      <slot\n        name=\"heading\"\n        @slotchange=\"${this._handleHeadingSlotChange}\"></slot>\n      ${this._isMobile ? this._renderMobile() : this._renderDesktop()}\n    `;\n  }\n\n  protected async updated() {\n    const { _focusElement } = this;\n\n    if (_focusElement) {\n      const targetElement = await this._querySelector(_focusElement);\n\n      if (targetElement instanceof HTMLElement) {\n        targetElement?.focus();\n      }\n\n      this._focusElement = null;\n    }\n  }\n\n  /**\n   * The name of the custom event captured upon selecting a checkbox\n   */\n\n  static get eventCheckboxSelect() {\n    return `${ddsPrefix}-checkbox-select`;\n  }\n\n  /**\n   * The name of the custom event captured upon selecting an input select item.\n   */\n\n  static get eventInputSelectItem() {\n    return `${ddsPrefix}-filter-panel-input-select`;\n  }\n\n  /**\n   * The name of the custom event captured upon activating \"view all\" button in\n   * a filter group item\n   */\n\n  static get eventFilterGroupViewAllToggle() {\n    return `${ddsPrefix}-filter-group-view-all-toggle`;\n  }\n\n  /**\n   * The name of the custom event captured upon closing the modal\n   */\n\n  static get eventModalClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event capture upon selecting an input select item\n   */\n\n  static get eventInputSelect() {\n    return `${ddsPrefix}-filter-panel-input-select-title`;\n  }\n\n  /**\n   * The name of the custom event fired to clear selections\n   */\n\n  static get eventSelectionClear() {\n    return `${ddsPrefix}-selection-clear`;\n  }\n\n  /**\n   * The name of the custom event capture when the heading changes\n   */\n\n  static get eventHeadingChange() {\n    return `${ddsPrefix}-filter-panel-heading-change`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}-filter-panel-composite`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSFilterPanelComposite;\n"]}