@operato/popup 2.0.0-alpha.0 → 2.0.0-alpha.100

package/CHANGELOG.md

@@ -3,6 +3,226 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.98](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.97...v2.0.0-alpha.98) (2024-04-21)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
+
+
+### :bug: Bug Fix
+
+* support 'checkbox' type in ox-filters-form-base ([1ffe0e5](https://github.com/hatiolab/operato/commit/1ffe0e5fc16480240c8c5accf57d247bb3299867))
+
+
+
+## [2.0.0-alpha.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.90](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.89](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
+
+
+### :bug: Bug Fix
+
+* tweak filters-form style ([6fb293d](https://github.com/hatiolab/operato/commit/6fb293d7d34ea7b01b3011264f554158beb62621))
+
+
+
+## [2.0.0-alpha.82](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.81](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
+## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
+
+
+### :bug: Bug Fix
+
+* custom-alert in @operato/shell ([e628af8](https://github.com/hatiolab/operato/commit/e628af8d923de49960bfbcd04452b428105c0bc8))
+* renovation CustomAlert ([757f04f](https://github.com/hatiolab/operato/commit/757f04f44bdb50e087ecacdbf217f3d3b20e922c))
+
+
+
+## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
+
+
+### :bug: Bug Fix
+
+* upgrade lit ([e661c33](https://github.com/hatiolab/operato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
+
+
+
+## [2.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
+
+
+### :bug: Bug Fix
+
+* 폼 select가 왼쪽으로 가려질때 점점 왼쪽으로 가는 현상 수정 ([281bf40](https://github.com/hatiolab/operato/commit/281bf40fc1d37c35d837ee18d4489ed9da5982c5))
+
+
+
+## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
+
+
+### :bug: Bug Fix
+
+* upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
+
+
+
+## [2.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2024-01-20)
+
+
+### :bug: Bug Fix
+
+* use zbar-wasm for barcode scan ([41f632e](https://github.com/hatiolab/operato/commit/41f632e1e395e17364713e1ecb8f878615fc91ca))
+
+
+
+## [2.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.7...v2.0.0-alpha.8) (2024-01-20)
+
+
+### :bug: Bug Fix
+
+* comment for libraries ([bdf20d0](https://github.com/hatiolab/operato/commit/bdf20d057819187106b4a9e37d25c2c1f7febb39))
+
+
+
+## [2.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.3...v2.0.0-alpha.4) (2024-01-15)
+
+
+### :bug: Bug Fix
+
+* up z-index for ox-float-overlay ([57ff5ce](https://github.com/hatiolab/operato/commit/57ff5ceb0fd7dccbe5745e99a63f8cbba4a23ace))
+
+
+
+## [2.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.1...v2.0.0-alpha.2) (2024-01-09)
+
+
+### :bug: Bug Fix
+
+* typo event name 'context' => 'contextmenu' ([dcb6afa](https://github.com/hatiolab/operato/commit/dcb6afaafbfa9157b90b62a2f394ed71dcca3810))
+
+
+
 ## [2.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v1.13.1...v2.0.0-alpha.0) (2024-01-05)
 
 **Note:** Version bump only for package @operato/popup

package/demo/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -16,7 +16,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo"></div>
@@ -25,7 +36,7 @@
       import { html, render } from 'lit'
       import '../dist/src/ox-popup-menu.js'
       import '../dist/src/ox-popup-menuitem.js'
-      import '@material/mwc-icon'
+      import '@material/web/icon/icon.js'
       import '@operato/input/ox-checkbox.js'
 
       import { OxPopupMenu } from '../dist/src/ox-popup-menu.js'
@@ -41,11 +52,11 @@
                 console.log('first level article selected')
               }}
             >
-              <mwc-icon slot="icon">article</mwc-icon>
+              <md-icon slot="icon">article</md-icon>
             </ox-popup-menuitem>
 
             <ox-popup-menuitem label="home">
-              <mwc-icon slot="icon">home</mwc-icon>
+              <md-icon slot="icon">home</md-icon>
             </ox-popup-menuitem>
 
             <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
@@ -53,16 +64,16 @@
             <ox-popup-menuitem
               label="click me to toggle"
               @selected=${function (e) {
-                const icon = this.querySelector('mwc-icon')
+                const icon = this.querySelector('md-icon')
                 icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
               }}
               alive-on-select
             >
-              <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+              <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
             </ox-popup-menuitem>
 
             <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
-              <mwc-icon slot="icon">verified</mwc-icon>
+              <md-icon slot="icon">verified</md-icon>
               <ox-popup-menu>
                 <ox-popup-menuitem
                   label="article"
@@ -71,26 +82,26 @@
                   }}
                   alive-on-select
                 >
-                  <mwc-icon slot="icon">article</mwc-icon>
+                  <md-icon slot="icon">article</md-icon>
                 </ox-popup-menuitem>
 
                 <ox-popup-menuitem label="home">
-                  <mwc-icon slot="icon">home</mwc-icon>
+                  <md-icon slot="icon">home</md-icon>
                 </ox-popup-menuitem>
 
                 <ox-popup-menuitem label="verified">
-                  <mwc-icon slot="icon">verified</mwc-icon>
+                  <md-icon slot="icon">verified</md-icon>
                   <ox-popup-menu>
                     <ox-popup-menuitem label="article">
-                      <mwc-icon slot="icon">article</mwc-icon>
+                      <md-icon slot="icon">article</md-icon>
                     </ox-popup-menuitem>
 
                     <ox-popup-menuitem label="home">
-                      <mwc-icon slot="icon">home</mwc-icon>
+                      <md-icon slot="icon">home</md-icon>
                     </ox-popup-menuitem>
 
                     <ox-popup-menuitem label="verified">
-                      <mwc-icon slot="icon">verified</mwc-icon>
+                      <md-icon slot="icon">verified</md-icon>
                     </ox-popup-menuitem>
 
                     <ox-popup-menuitem label="checkbox">

package/demo/ox-popup-list.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -26,7 +26,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo-container">
@@ -37,7 +48,7 @@
     <script type="module">
       import { html, render } from 'lit'
       import '../dist/src/ox-popup-list.js'
-      import '@material/mwc-icon'
+      import '@material/web/icon/icon.js'
       import '@operato/input/ox-checkbox.js'
 
       import { OxPopupList } from '../dist/src/ox-popup-list.js'

package/demo/ox-popup-menu.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -16,7 +16,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo"></div>
@@ -25,7 +36,7 @@
       import { html, render } from 'lit'
       import '../dist/src/ox-popup-menu.js'
       import '../dist/src/ox-popup-menuitem.js'
-      import '@material/mwc-icon'
+      import '@material/web/icon/icon.js'
       import '@operato/input/ox-checkbox.js'
 
       import { OxPopupMenu } from '../dist/src/ox-popup-menu.js'
@@ -41,11 +52,11 @@
                 console.log('first level article selected')
               }}
             >
-              <mwc-icon slot="icon">article</mwc-icon>
+              <md-icon slot="icon">article</md-icon>
             </ox-popup-menuitem>
 
             <ox-popup-menuitem label="home">
-              <mwc-icon slot="icon">home</mwc-icon>
+              <md-icon slot="icon">home</md-icon>
             </ox-popup-menuitem>
 
             <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
@@ -53,16 +64,16 @@
             <ox-popup-menuitem
               label="click me to toggle"
               @selected=${function (e) {
-                const icon = this.querySelector('mwc-icon')
+                const icon = this.querySelector('md-icon')
                 icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
               }}
               alive-on-select
             >
-              <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+              <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
             </ox-popup-menuitem>
 
             <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
-              <mwc-icon slot="icon">verified</mwc-icon>
+              <md-icon slot="icon">verified</md-icon>
               <ox-popup-menu>
                 <ox-popup-menuitem
                   label="article"
@@ -71,26 +82,26 @@
                   }}
                   alive-on-select
                 >
-                  <mwc-icon slot="icon">article</mwc-icon>
+                  <md-icon slot="icon">article</md-icon>
                 </ox-popup-menuitem>
 
                 <ox-popup-menuitem label="home">
-                  <mwc-icon slot="icon">home</mwc-icon>
+                  <md-icon slot="icon">home</md-icon>
                 </ox-popup-menuitem>
 
                 <ox-popup-menuitem label="verified">
-                  <mwc-icon slot="icon">verified</mwc-icon>
+                  <md-icon slot="icon">verified</md-icon>
                   <ox-popup-menu>
                     <ox-popup-menuitem label="article">
-                      <mwc-icon slot="icon">article</mwc-icon>
+                      <md-icon slot="icon">article</md-icon>
                     </ox-popup-menuitem>
 
                     <ox-popup-menuitem label="home">
-                      <mwc-icon slot="icon">home</mwc-icon>
+                      <md-icon slot="icon">home</md-icon>
                     </ox-popup-menuitem>
 
                     <ox-popup-menuitem label="verified">
-                      <mwc-icon slot="icon">verified</mwc-icon>
+                      <md-icon slot="icon">verified</md-icon>
                     </ox-popup-menuitem>
 
                     <ox-popup-menuitem label="checkbox">

package/dist/src/ox-floating-overlay.d.ts

@@ -1,33 +1,94 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { LitElement, PropertyValues } from 'lit';
+/**
+ * Custom element for creating floating overlays.
+ * These overlays can have various properties like direction, size, title, and more.
+ * They are often used for modal dialogs, pop-ups, and similar UI elements.
+ */
 export declare class OxFloatingOverlay extends LitElement {
     static styles: import("lit").CSSResult[];
+    /**
+     * A boolean property that determines whether a backdrop should be displayed behind the overlay.
+     * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.
+     */
     backdrop?: boolean;
+    /**
+     * A string property that specifies the direction in which the overlay should appear.
+     * Possible values are: 'up', 'down', 'left', or 'right'.
+     */
     direction?: 'up' | 'down' | 'left' | 'right';
+    /**
+     * A string property that reflects the hovering state of the overlay.
+     * Possible values are: 'center', 'edge', or 'next'.
+     */
     hovering?: 'center' | 'edge' | 'next';
+    /**
+     * A string property that specifies the size of the overlay.
+     * Possible values are: 'small', 'medium', or 'large'.
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * A string property that represents the name of the overlay.
+     * This can be used for identification or other purposes.
+     */
     name?: string;
+    /**
+     * A string property that sets the title of the overlay.
+     * The title is typically displayed in the header of the overlay.
+     */
     title: string;
+    /**
+     * A boolean property that determines whether the overlay can be closed by the user.
+     * If set to true, a close button will be displayed in the header.
+     */
     closable?: boolean;
+    /**
+     * An object property that can hold custom properties for the template of the overlay.
+     * These properties can be used to customize the template's behavior.
+     */
     templateProperties: any;
+    /**
+     * An object property that can hold information related to help or assistance for the overlay.
+     * This information may be used to provide additional guidance to users.
+     */
     help: any;
+    /**
+     * A boolean property that determines whether the overlay is considered historical.
+     * Historical overlays may have specific behavior or interactions, such as navigating back in history.
+     */
     historical?: boolean;
+    /**
+     * A boolean property that determines whether the overlay can be moved by dragging.
+     * If set to true, the overlay can be repositioned by dragging its header.
+     */
     movable?: boolean;
+    /**
+     * An object property that can hold information related to a search feature within the overlay.
+     * It can include properties like 'value', 'handler', and 'placeholder'.
+     */
     search?: {
         value?: string;
         handler?: (instance: any, value: string) => void;
         placeholder?: string;
     };
+    /**
+     * An object property that can hold information related to a filter feature within the overlay.
+     * It can include a 'handler' function for filtering content.
+     */
     filter?: {
         handler?: (instance: any) => void;
     };
+    /**
+     * A numeric property that specifies the z-index of the overlay.
+     * The z-index determines the stacking order of the overlay in relation to other elements on the page.
+     */
     zIndex?: number;
     private dragStart?;
     private dragEndHandler;
     private dragMoveHandler;
     overlayed: HTMLDivElement;
     content: HTMLDivElement;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
     firstUpdated(): void;
     connectedCallback(): void;
@@ -35,6 +96,10 @@ export declare class OxFloatingOverlay extends LitElement {
     onDragStart(e: Event): false | undefined;
     onDragMove(e: Event): boolean;
     onDragEnd(e: Event): void;
+    /**
+     * A method that closes the overlay by removing it from its parent node in the DOM.
+     * When called, this method removes the overlay element, effectively hiding it from the user interface.
+     */
     close(): void;
     onClose(e: Event, escape?: boolean): true | undefined;
 }

package/dist/src/ox-floating-overlay.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -24,13 +24,38 @@ function getPoint(e) {
         return;
     }
 }
+/**
+ * Custom element for creating floating overlays.
+ * These overlays can have various properties like direction, size, title, and more.
+ * They are often used for modal dialogs, pop-ups, and similar UI elements.
+ */
 let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * A boolean property that determines whether a backdrop should be displayed behind the overlay.
+         * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.
+         */
         this.backdrop = false;
+        /**
+         * A string property that sets the title of the overlay.
+         * The title is typically displayed in the header of the overlay.
+         */
         this.title = '';
+        /**
+         * A boolean property that determines whether the overlay can be closed by the user.
+         * If set to true, a close button will be displayed in the header.
+         */
         this.closable = false;
+        /**
+         * A boolean property that determines whether the overlay is considered historical.
+         * Historical overlays may have specific behavior or interactions, such as navigating back in history.
+         */
         this.historical = false;
+        /**
+         * A boolean property that determines whether the overlay can be moved by dragging.
+         * If set to true, the overlay can be repositioned by dragging its header.
+         */
         this.movable = false;
         this.dragEndHandler = this.onDragEnd.bind(this);
         this.dragMoveHandler = this.onDragMove.bind(this);
@@ -82,8 +107,8 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
           @touchstart=${this.onDragStart.bind(this)}
           draggable="false"
         >
-          <mwc-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
-          ${this.movable ? html `<mwc-icon>drag_indicator</mwc-icon>` : html ``}
+          <md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>
+          ${this.movable ? html `<md-icon>drag_indicator</md-icon>` : html ``}
           <slot name="header">
             ${this.title || this.closable
             ? html `
@@ -109,9 +134,7 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
                 : html ``}
                     ${this.help && searchable ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>` : html ``}
                     ${filterable
-                ? html `<mwc-icon @click=${(e) => filterHandler(this.firstElementChild)}
-                          >tune</mwc-icon
-                        >`
+                ? html `<md-icon @click=${(e) => filterHandler(this.firstElementChild)}>tune</md-icon>`
                 : html ``}
                   </div>
                 `
@@ -120,7 +143,7 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
             ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
             : html ``}
           </slot>
-          <mwc-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</mwc-icon>
+          <md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>
         </div>
 
         <div content>
@@ -215,6 +238,10 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
             delete this.dragStart;
         }
     }
+    /**
+     * A method that closes the overlay by removing it from its parent node in the DOM.
+     * When called, this method removes the overlay element, effectively hiding it from the user interface.
+     */
     close() {
         var _a;
         (_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this);
@@ -245,7 +272,7 @@ OxFloatingOverlay.styles = [
       /* for layout style */
       :host {
         position: relative;
-        z-index: var(--z-index, 1);
+        z-index: var(--z-index, 10);
       }
 
       :host([hovering='edge']) {