@operato/popup 7.0.0-rc.9 → 7.0.0

package/.storybook/preview.js

@@ -0,0 +1,52 @@
+import { i18next } from '@operato/i18n'
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'ko', right: '🇰🇷', title: '한국어' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'ja', right: '🇯🇵', title: '日本語' },
+        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
+      ],
+      showName: true
+    }
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' }
+      ],
+      showName: true
+    }
+  }
+}
+
+export const decorators = [
+  (Story, context) => {
+    const { locale, theme } = context.globals
+
+    if (locale) {
+      i18next.changeLanguage(locale)
+    }
+
+    // Set the theme class for the document
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.add('light')
+      document.documentElement.classList.remove('dark')
+    }
+
+    return Story()
+  }
+]

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.0](https://github.com/hatiolab/operato/compare/v7.0.0-rc.13...v7.0.0) (2024-06-30)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [7.0.0-rc.13](https://github.com/hatiolab/operato/compare/v7.0.0-rc.12...v7.0.0-rc.13) (2024-06-30)
+
+
+### :bug: Bug Fix
+
+* storybook preview.js ([84d7682](https://github.com/hatiolab/operato/commit/84d7682af452554e8b0e83aa683bdc3726e264bb))
+* storybook preview.js ([c2e4f7b](https://github.com/hatiolab/operato/commit/c2e4f7babc46067fef8c0d47481ee2351fe77917))
+* storybook preview.js ([4c4b117](https://github.com/hatiolab/operato/commit/4c4b117b2a06ad9cc47c3f09badd3ee2cf57087a))
+* storybook preview.js ([8ed7305](https://github.com/hatiolab/operato/commit/8ed73059fd5b03718dc44e7b984cd47f4316c7da))
+
+
+
+## [7.0.0-rc.11](https://github.com/hatiolab/operato/compare/v7.0.0-rc.10...v7.0.0-rc.11) (2024-06-29)
+
+
+### :bug: Bug Fix
+
+* material design token ([bf70a97](https://github.com/hatiolab/operato/commit/bf70a9783aacfd6f58e945515d25120ace1ad1f3))
+
+
+
+## [7.0.0-rc.10](https://github.com/hatiolab/operato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
 ## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
 
 

package/dist/src/open-popup.js

@@ -45,7 +45,7 @@ function defaultOpenPopup(template, options = {}) {
         name,
         close: () => {
             const popup = document.body.querySelector(`#${name}`);
-            popup === null || popup === void 0 ? void 0 : popup.close();
+            popup?.close();
             popupHandle.onclosed && popupHandle.onclosed();
         },
         closed: false

package/dist/src/open-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"open-popup.js","sourceRoot":"","sources":["../../src/open-popup.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAkB,MAAM,KAAK,CAAA;AAqDlD;;;;;;;;GAQG;AACH,IAAI,aAAa,GAAG,CAAC,CAAA;AAErB;;;;;;GAMG;AACH,SAAS,gBAAgB,CAAC,QAAwB,EAAE,UAAwB,EAAE;IAC5E,MAAM,EACJ,KAAK,EACL,IAAI,GAAG,OAAO,EACd,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,MAAM,EACN,MAAM,EACP,GAAG,OAAO,CAAA;IACX,MAAM,IAAI,GAAG,UAAU,aAAa,EAAE,EAAE,CAAA;IAExC,MAAM,CACJ,IAAI,CAAA;;aAEK,IAAI;eACF,IAAI;oBACC,QAAQ;;oBAER,QAAQ;iBACX,KAAK,IAAI,EAAE;gBACZ,IAAI;gBACJ,IAAI;oBACA,QAAQ;sBACN,KAAK;mBACR,OAAO;kBACR,MAAM;kBACN,MAAM;WACb,QAAQ;;KAEd,EACD,QAAQ,CAAC,IAAI,CACd,CAAA;IAED,qBAAqB,CAAC,GAAG,EAAE;QACzB,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG;QAClB,IAAI;QACJ,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,EAAE,CAAsB,CAAA;YAC1E,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,EAAE,CAAA;YACd,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAA;QAChD,CAAC;QACD,MAAM,EAAE,KAAK;KACC,CAAA;IAEhB,OAAO,WAAW,CAAA;AACpB,CAAC;AAED,IAAI,aAAa,GAAqE,gBAAgB,CAAA;AAEtG;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CACxC,cAAgF;IAEhF,aAAa,GAAG,cAAc,CAAA;AAChC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAwB,EAAE,UAAwB,EAAE,EAAe,EAAE;IAC7F,OAAO,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;AACzC,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAoB,EAAQ,EAAE;IACvD,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,eAAe,EAAE;QAC/B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import './ox-floating-overlay.js'\n\nimport { html, render, TemplateResult } from 'lit'\n\nimport { OxFloatingOverlay } from './ox-floating-overlay.js'\n\n/**\n * Options for popup\n *\n * @typedef {Object} PopupOptions\n * @property {String} [title] - popup title\n * @property {'center' | 'next' | 'edge'} [hovering] - hovering position (default: 'center'). 'edge' : edge of the HEADERBAR, 'next' : next of the clicked position.\n * @property {'large' | 'medium' | small'} [size] - popup size\n * @property {Boolean} [closable] - set whether the close 'X' button is shown on top-right most position (default true)\n * @property {Boolean} [escapable] - set whether the close popup with 'ESC' key (default true)\n * @property {Boolean} [backdrop] - set whether to do background masking around the pop-up. If true, it becomes modal (default true)\n * @property {Boolean} [movable] - set whether to be able to movable by the gesture dragging on header once the hovering option is 'center'\n * @property {String} [help] - inline help link\n */\nexport type PopupOptions = {\n  title?: string\n  hovering?: 'center' | 'next' | 'edge'\n  size?: 'large' | 'medium' | 'small'\n  closable?: boolean\n  escapable?: boolean\n  backdrop?: boolean\n  movable?: boolean\n  help?: string\n  search?: {\n    value?: string\n    handler?: (closure: any, value: string) => void\n    placeholder?: string\n    autofocus?: boolean\n  }\n  filter?: {\n    handler?: (closure: any) => void\n  }\n}\n\n/**\n * Popup handle object that will be returned openPopup\n *\n * @typedef {Object} PopupHandle\n * @property {String} [name] - popup instance name\n * @property {Function} [close] - call this function to close the popup.\n * @property {Boolean} [closed] - state telling whether the popup is closed or not.\n * @property {Function} [onclosed] - set callback function on close. It will be called when the popup about to close.\n */\nexport type PopupHandle = {\n  name: string\n  close: () => void\n  closed: boolean\n  onclosed?: () => void\n}\n\n/*\n * popup handling\n *\n * popup은 overlay의 특별한 형태이다.\n * popup은 open될 때, viewpart를 append 하며, close 될 때 viewpart를 remove 한다.\n * - name: '$popup-${popupSequence}'\n * - position: VIEWPART_POSITION_HEADERBAR\n * - hovering: 'center' | 'next' | 'edge'\n */\nvar popupSequence = 0\n\n/**\n * default openPopup implementation for operato application environment\n *\n * @param {*} template html template to be rendered inside the popup\n * @param {PopupOptions} options\n * @returns popup handle object. This object is used to close the popup.\n */\nfunction defaultOpenPopup(template: TemplateResult, options: PopupOptions = {}): PopupHandle {\n  const {\n    title,\n    size = 'large',\n    closable = false,\n    escapable = false,\n    help,\n    hovering,\n    backdrop,\n    movable = false,\n    search,\n    filter\n  } = options\n  const name = `$popup-${popupSequence++}`\n\n  render(\n    html`\n      <ox-floating-overlay\n        id=${name}\n        name=${name}\n        .backdrop=${backdrop}\n        direction=\"down\"\n        .hovering=${hovering}\n        .title=${title || ''}\n        .help=${help}\n        .size=${size}\n        .closable=${closable}\n        .historical=${false}\n        .movable=${movable}\n        .search=${search}\n        .filter=${filter}\n        >${template}</ox-floating-overlay\n      >\n    `,\n    document.body\n  )\n\n  requestAnimationFrame(() => {\n    dispatchEvent(new Event('resize'))\n  })\n\n  const popupHandle = {\n    name,\n    close: () => {\n      const popup = document.body.querySelector(`#${name}`) as OxFloatingOverlay\n      popup?.close()\n      popupHandle.onclosed && popupHandle.onclosed()\n    },\n    closed: false\n  } as PopupHandle\n\n  return popupHandle\n}\n\nvar openPopupImpl: (template: TemplateResult, options: PopupOptions) => PopupHandle = defaultOpenPopup\n\n/**\n * replace default openPopup implementation\n *\n * @param {(template: TemplateResult, options: PopupOptions) => PopupHandle} implementation\n */\nexport function setOpenPopupImplementation(\n  implementation: (template: TemplateResult, options: PopupOptions) => PopupHandle\n) {\n  openPopupImpl = implementation\n}\n\n/**\n * open popup out of operato application environment\n *\n * @param {*} template html template to be rendered inside the popup\n * @param {PopupOptions} options\n * @returns popup handle object. This object is used to close the popup.\n */\nexport const openPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {\n  return openPopupImpl(template, options)\n}\n\n/**\n * open popup out of operato application environment\n *\n * @param {*} template html template to be rendered inside the popup\n * @param {PopupOptions} options\n * @returns popup handle object. This object is used to close the popup.\n */\nexport const closePopup = (element: HTMLElement): void => {\n  element.dispatchEvent(\n    new CustomEvent('close-overlay', {\n      bubbles: true,\n      composed: true\n    })\n  )\n}\n"]}
+{"version":3,"file":"open-popup.js","sourceRoot":"","sources":["../../src/open-popup.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAkB,MAAM,KAAK,CAAA;AAqDlD;;;;;;;;GAQG;AACH,IAAI,aAAa,GAAG,CAAC,CAAA;AAErB;;;;;;GAMG;AACH,SAAS,gBAAgB,CAAC,QAAwB,EAAE,UAAwB,EAAE;IAC5E,MAAM,EACJ,KAAK,EACL,IAAI,GAAG,OAAO,EACd,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,MAAM,EACN,MAAM,EACP,GAAG,OAAO,CAAA;IACX,MAAM,IAAI,GAAG,UAAU,aAAa,EAAE,EAAE,CAAA;IAExC,MAAM,CACJ,IAAI,CAAA;;aAEK,IAAI;eACF,IAAI;oBACC,QAAQ;;oBAER,QAAQ;iBACX,KAAK,IAAI,EAAE;gBACZ,IAAI;gBACJ,IAAI;oBACA,QAAQ;sBACN,KAAK;mBACR,OAAO;kBACR,MAAM;kBACN,MAAM;WACb,QAAQ;;KAEd,EACD,QAAQ,CAAC,IAAI,CACd,CAAA;IAED,qBAAqB,CAAC,GAAG,EAAE;QACzB,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG;QAClB,IAAI;QACJ,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,EAAE,CAAsB,CAAA;YAC1E,KAAK,EAAE,KAAK,EAAE,CAAA;YACd,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAA;QAChD,CAAC;QACD,MAAM,EAAE,KAAK;KACC,CAAA;IAEhB,OAAO,WAAW,CAAA;AACpB,CAAC;AAED,IAAI,aAAa,GAAqE,gBAAgB,CAAA;AAEtG;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CACxC,cAAgF;IAEhF,aAAa,GAAG,cAAc,CAAA;AAChC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAwB,EAAE,UAAwB,EAAE,EAAe,EAAE;IAC7F,OAAO,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;AACzC,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAoB,EAAQ,EAAE;IACvD,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,eAAe,EAAE;QAC/B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import './ox-floating-overlay.js'\n\nimport { html, render, TemplateResult } from 'lit'\n\nimport { OxFloatingOverlay } from './ox-floating-overlay.js'\n\n/**\n * Options for popup\n *\n * @typedef {Object} PopupOptions\n * @property {String} [title] - popup title\n * @property {'center' | 'next' | 'edge'} [hovering] - hovering position (default: 'center'). 'edge' : edge of the HEADERBAR, 'next' : next of the clicked position.\n * @property {'large' | 'medium' | small'} [size] - popup size\n * @property {Boolean} [closable] - set whether the close 'X' button is shown on top-right most position (default true)\n * @property {Boolean} [escapable] - set whether the close popup with 'ESC' key (default true)\n * @property {Boolean} [backdrop] - set whether to do background masking around the pop-up. If true, it becomes modal (default true)\n * @property {Boolean} [movable] - set whether to be able to movable by the gesture dragging on header once the hovering option is 'center'\n * @property {String} [help] - inline help link\n */\nexport type PopupOptions = {\n  title?: string\n  hovering?: 'center' | 'next' | 'edge'\n  size?: 'large' | 'medium' | 'small'\n  closable?: boolean\n  escapable?: boolean\n  backdrop?: boolean\n  movable?: boolean\n  help?: string\n  search?: {\n    value?: string\n    handler?: (closure: any, value: string) => void\n    placeholder?: string\n    autofocus?: boolean\n  }\n  filter?: {\n    handler?: (closure: any) => void\n  }\n}\n\n/**\n * Popup handle object that will be returned openPopup\n *\n * @typedef {Object} PopupHandle\n * @property {String} [name] - popup instance name\n * @property {Function} [close] - call this function to close the popup.\n * @property {Boolean} [closed] - state telling whether the popup is closed or not.\n * @property {Function} [onclosed] - set callback function on close. It will be called when the popup about to close.\n */\nexport type PopupHandle = {\n  name: string\n  close: () => void\n  closed: boolean\n  onclosed?: () => void\n}\n\n/*\n * popup handling\n *\n * popup은 overlay의 특별한 형태이다.\n * popup은 open될 때, viewpart를 append 하며, close 될 때 viewpart를 remove 한다.\n * - name: '$popup-${popupSequence}'\n * - position: VIEWPART_POSITION_HEADERBAR\n * - hovering: 'center' | 'next' | 'edge'\n */\nvar popupSequence = 0\n\n/**\n * default openPopup implementation for operato application environment\n *\n * @param {*} template html template to be rendered inside the popup\n * @param {PopupOptions} options\n * @returns popup handle object. This object is used to close the popup.\n */\nfunction defaultOpenPopup(template: TemplateResult, options: PopupOptions = {}): PopupHandle {\n  const {\n    title,\n    size = 'large',\n    closable = false,\n    escapable = false,\n    help,\n    hovering,\n    backdrop,\n    movable = false,\n    search,\n    filter\n  } = options\n  const name = `$popup-${popupSequence++}`\n\n  render(\n    html`\n      <ox-floating-overlay\n        id=${name}\n        name=${name}\n        .backdrop=${backdrop}\n        direction=\"down\"\n        .hovering=${hovering}\n        .title=${title || ''}\n        .help=${help}\n        .size=${size}\n        .closable=${closable}\n        .historical=${false}\n        .movable=${movable}\n        .search=${search}\n        .filter=${filter}\n        >${template}</ox-floating-overlay\n      >\n    `,\n    document.body\n  )\n\n  requestAnimationFrame(() => {\n    dispatchEvent(new Event('resize'))\n  })\n\n  const popupHandle = {\n    name,\n    close: () => {\n      const popup = document.body.querySelector(`#${name}`) as OxFloatingOverlay\n      popup?.close()\n      popupHandle.onclosed && popupHandle.onclosed()\n    },\n    closed: false\n  } as PopupHandle\n\n  return popupHandle\n}\n\nvar openPopupImpl: (template: TemplateResult, options: PopupOptions) => PopupHandle = defaultOpenPopup\n\n/**\n * replace default openPopup implementation\n *\n * @param {(template: TemplateResult, options: PopupOptions) => PopupHandle} implementation\n */\nexport function setOpenPopupImplementation(\n  implementation: (template: TemplateResult, options: PopupOptions) => PopupHandle\n) {\n  openPopupImpl = implementation\n}\n\n/**\n * open popup out of operato application environment\n *\n * @param {*} template html template to be rendered inside the popup\n * @param {PopupOptions} options\n * @returns popup handle object. This object is used to close the popup.\n */\nexport const openPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {\n  return openPopupImpl(template, options)\n}\n\n/**\n * open popup out of operato application environment\n *\n * @param {*} template html template to be rendered inside the popup\n * @param {PopupOptions} options\n * @returns popup handle object. This object is used to close the popup.\n */\nexport const closePopup = (element: HTMLElement): void => {\n  element.dispatchEvent(\n    new CustomEvent('close-overlay', {\n      bubbles: true,\n      composed: true\n    })\n  )\n}\n"]}

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

@@ -7,14 +7,13 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { isHandheldDevice } from '@operato/utils';
 function getPoint(e) {
-    var _a;
     if (e.button == 0) {
         return {
             x: e.clientX,
             y: e.clientY
         };
     }
-    else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
+    else if (e.touches?.length == 1) {
         const touch = e.touches[0];
         return {
             x: touch.clientX,
@@ -61,215 +60,9 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
         this.dragEndHandler = this.onDragEnd.bind(this);
         this.dragMoveHandler = this.onDragMove.bind(this);
     }
-    render() {
-        const direction = this.hovering == 'center' ? undefined : this.direction;
-        const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || {};
-        const { handler: filterHandler } = this.filter || {};
-        const searchable = typeof searchHandler == 'function';
-        const filterable = typeof filterHandler == 'function';
-        return html `
-      ${Boolean(this.backdrop)
-            ? html `
-            <div
-              id="backdrop"
-              ?hidden=${!this.backdrop}
-              @click=${(e) => this.onClose(e, true /* escape */)}
-            ></div>
-          `
-            : html ``}
-
-      <div
-        overlayed
-        hovering=${this.hovering || 'center'}
-        direction=${ifDefined(direction)}
-        size=${this.size || 'medium'}
-        @close-overlay=${(e) => {
-            e.stopPropagation();
-            this.onClose(e);
-        }}
-        @transitionstart=${(e) => {
-            /* to hide scrollbar during transition */
-            ;
-            e.target.removeAttribute('settled');
-        }}
-        @transitionend=${(e) => {
-            ;
-            e.target.setAttribute('settled', '');
-        }}
-        @click=${(e) => {
-            if (this.backdrop && e.target === this.content) {
-                this.onClose(e, true /* escape */);
-            }
-        }}
-      >
-        <div
-          header
-          @mousedown=${this.onDragStart.bind(this)}
-          @touchstart=${this.onDragStart.bind(this)}
-          draggable="false"
-        >
-          <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 `
-                  <h1>
-                    ${this.title || ''}&nbsp;${this.help
-                ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
-                : html ``}
-                  </h1>
-                `
-            : html ``}
-            ${searchable || filterable
-            ? html `
-                  <div search>
-                    ${searchable
-                ? html ` <ox-input-search
-                          .placeholder=${placeholder}
-                          .value=${value || ''}
-                          ?autofocus=${autofocus}
-                          @change=${(e) => {
-                    searchHandler(this.firstElementChild, e.target.value);
-                }}
-                        ></ox-input-search>`
-                : html ``}
-                    ${this.help && searchable ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>` : html ``}
-                    ${filterable
-                ? html `<md-icon @click=${(e) => filterHandler(this.firstElementChild)}>tune</md-icon>`
-                : html ``}
-                  </div>
-                `
-            : html ``}
-            ${this.help && !searchable && !this.title /* help only */
-            ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
-            : html ``}
-          </slot>
-          <md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>
-        </div>
-
-        <div content>
-          <slot> </slot>
-        </div>
-      </div>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('templateProperties') && this.templateProperties) {
-            var template = this.firstElementChild;
-            if (template) {
-                for (let prop in this.templateProperties) {
-                    //@ts-ignore
-                    template[prop] = this.templateProperties[prop];
-                }
-            }
-        }
-    }
-    firstUpdated() {
-        if (this.zIndex) {
-            this.style.setProperty('--z-index', String(this.zIndex));
-        }
-        requestAnimationFrame(() => {
-            var _a;
-            /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
-            (_a = this.overlayed) === null || _a === void 0 ? void 0 : _a.setAttribute('opened', 'true');
-        });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.movable = this.movable && !isHandheldDevice();
-        if (this.movable) {
-            document.addEventListener('mouseup', this.dragEndHandler);
-            document.addEventListener('touchend', this.dragEndHandler);
-            document.addEventListener('touchcancel', this.dragEndHandler);
-            document.addEventListener('mousemove', this.dragMoveHandler);
-            document.addEventListener('touchmove', this.dragMoveHandler);
-        }
-    }
-    disconnectedCallback() {
-        document.dispatchEvent(new CustomEvent('overlay-closed', {
-            detail: this.name
-        }));
-        if (this.movable) {
-            document.removeEventListener('mouseup', this.dragEndHandler);
-            document.removeEventListener('touchend', this.dragEndHandler);
-            document.removeEventListener('touchcancel', this.dragEndHandler);
-            document.removeEventListener('mousemove', this.dragMoveHandler);
-            document.removeEventListener('touchmove', this.dragMoveHandler);
-        }
-        super.disconnectedCallback();
-    }
-    onDragStart(e) {
-        if (!this.movable) {
-            return;
-        }
-        const point = getPoint(e);
-        if (point) {
-            this.dragStart = point;
-            e.stopPropagation();
-            return false;
-        }
-    }
-    onDragMove(e) {
-        if (!this.movable || !this.dragStart) {
-            return false;
-        }
-        const point = getPoint(e);
-        if (!point) {
-            return false;
-        }
-        e.stopPropagation();
-        e.preventDefault();
-        const dragStart = point;
-        var { x, y } = point;
-        x -= this.dragStart.x;
-        y -= this.dragStart.y;
-        this.dragStart = dragStart;
-        const overlayed = this.overlayed;
-        var boundingRect = overlayed.getBoundingClientRect();
-        overlayed.style.left =
-            Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px';
-        overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px';
-        overlayed.style.transform = 'initial';
-        return false;
-    }
-    onDragEnd(e) {
-        if (this.movable && this.dragStart) {
-            e.stopPropagation();
-            e.preventDefault();
-            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);
-    }
-    onClose(e, escape) {
-        e.stopPropagation();
-        /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
-        if (this.historical) {
-            var state = history.state;
-            var overlay = (state || {}).overlay;
-            if (!overlay || overlay.name !== this.name) {
-                return;
-            }
-            /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
-            if (escape && !overlay.escapable) {
-                return true;
-            }
-            history.back();
-        }
-        else {
-            this.close();
-        }
-    }
-};
-OxFloatingOverlay.styles = [
-    ScrollbarStyles,
-    css `
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
       /* for layout style */
       :host {
         position: relative;
@@ -418,7 +211,7 @@ OxFloatingOverlay.styles = [
         }
       }
     `,
-    css `
+        css `
       /* for header style */
       [header] {
         display: flex;
@@ -515,7 +308,211 @@ OxFloatingOverlay.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        const direction = this.hovering == 'center' ? undefined : this.direction;
+        const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || {};
+        const { handler: filterHandler } = this.filter || {};
+        const searchable = typeof searchHandler == 'function';
+        const filterable = typeof filterHandler == 'function';
+        return html `
+      ${Boolean(this.backdrop)
+            ? html `
+            <div
+              id="backdrop"
+              ?hidden=${!this.backdrop}
+              @click=${(e) => this.onClose(e, true /* escape */)}
+            ></div>
+          `
+            : html ``}
+
+      <div
+        overlayed
+        hovering=${this.hovering || 'center'}
+        direction=${ifDefined(direction)}
+        size=${this.size || 'medium'}
+        @close-overlay=${(e) => {
+            e.stopPropagation();
+            this.onClose(e);
+        }}
+        @transitionstart=${(e) => {
+            /* to hide scrollbar during transition */
+            ;
+            e.target.removeAttribute('settled');
+        }}
+        @transitionend=${(e) => {
+            ;
+            e.target.setAttribute('settled', '');
+        }}
+        @click=${(e) => {
+            if (this.backdrop && e.target === this.content) {
+                this.onClose(e, true /* escape */);
+            }
+        }}
+      >
+        <div
+          header
+          @mousedown=${this.onDragStart.bind(this)}
+          @touchstart=${this.onDragStart.bind(this)}
+          draggable="false"
+        >
+          <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 `
+                  <h1>
+                    ${this.title || ''}&nbsp;${this.help
+                ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
+                : html ``}
+                  </h1>
+                `
+            : html ``}
+            ${searchable || filterable
+            ? html `
+                  <div search>
+                    ${searchable
+                ? html ` <ox-input-search
+                          .placeholder=${placeholder}
+                          .value=${value || ''}
+                          ?autofocus=${autofocus}
+                          @change=${(e) => {
+                    searchHandler(this.firstElementChild, e.target.value);
+                }}
+                        ></ox-input-search>`
+                : html ``}
+                    ${this.help && searchable ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>` : html ``}
+                    ${filterable
+                ? html `<md-icon @click=${(e) => filterHandler(this.firstElementChild)}>tune</md-icon>`
+                : html ``}
+                  </div>
+                `
+            : html ``}
+            ${this.help && !searchable && !this.title /* help only */
+            ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
+            : html ``}
+          </slot>
+          <md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>
+        </div>
+
+        <div content>
+          <slot> </slot>
+        </div>
+      </div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('templateProperties') && this.templateProperties) {
+            var template = this.firstElementChild;
+            if (template) {
+                for (let prop in this.templateProperties) {
+                    //@ts-ignore
+                    template[prop] = this.templateProperties[prop];
+                }
+            }
+        }
+    }
+    firstUpdated() {
+        if (this.zIndex) {
+            this.style.setProperty('--z-index', String(this.zIndex));
+        }
+        requestAnimationFrame(() => {
+            /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
+            this.overlayed?.setAttribute('opened', 'true');
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.movable = this.movable && !isHandheldDevice();
+        if (this.movable) {
+            document.addEventListener('mouseup', this.dragEndHandler);
+            document.addEventListener('touchend', this.dragEndHandler);
+            document.addEventListener('touchcancel', this.dragEndHandler);
+            document.addEventListener('mousemove', this.dragMoveHandler);
+            document.addEventListener('touchmove', this.dragMoveHandler);
+        }
+    }
+    disconnectedCallback() {
+        document.dispatchEvent(new CustomEvent('overlay-closed', {
+            detail: this.name
+        }));
+        if (this.movable) {
+            document.removeEventListener('mouseup', this.dragEndHandler);
+            document.removeEventListener('touchend', this.dragEndHandler);
+            document.removeEventListener('touchcancel', this.dragEndHandler);
+            document.removeEventListener('mousemove', this.dragMoveHandler);
+            document.removeEventListener('touchmove', this.dragMoveHandler);
+        }
+        super.disconnectedCallback();
+    }
+    onDragStart(e) {
+        if (!this.movable) {
+            return;
+        }
+        const point = getPoint(e);
+        if (point) {
+            this.dragStart = point;
+            e.stopPropagation();
+            return false;
+        }
+    }
+    onDragMove(e) {
+        if (!this.movable || !this.dragStart) {
+            return false;
+        }
+        const point = getPoint(e);
+        if (!point) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        const dragStart = point;
+        var { x, y } = point;
+        x -= this.dragStart.x;
+        y -= this.dragStart.y;
+        this.dragStart = dragStart;
+        const overlayed = this.overlayed;
+        var boundingRect = overlayed.getBoundingClientRect();
+        overlayed.style.left =
+            Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px';
+        overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px';
+        overlayed.style.transform = 'initial';
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.movable && this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            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() {
+        this.parentNode?.removeChild(this);
+    }
+    onClose(e, escape) {
+        e.stopPropagation();
+        /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
+        if (this.historical) {
+            var state = history.state;
+            var overlay = (state || {}).overlay;
+            if (!overlay || overlay.name !== this.name) {
+                return;
+            }
+            /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
+            if (escape && !overlay.escapable) {
+                return true;
+            }
+            history.back();
+        }
+        else {
+            this.close();
+        }
+    }
+};
 __decorate([
     property({ type: Boolean })
 ], OxFloatingOverlay.prototype, "backdrop", void 0);