@operato/layout 1.0.0-beta.5 → 1.0.0-beta.50

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent layout following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.50",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -36,13 +36,13 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.25.3",
-    "@material/mwc-icon": "^0.25.3",
-    "@operato/popup": "^1.0.0-beta.5",
-    "@operato/shell": "^1.0.0-beta.5",
-    "@operato/styles": "^1.0.0-beta.5",
-    "@operato/utils": "^1.0.0-beta.5",
-    "lit": "^2.2.1",
+    "@material/mwc-button": "^0.26.1",
+    "@material/mwc-icon": "^0.26.1",
+    "@operato/popup": "^1.0.0-beta.50",
+    "@operato/shell": "^1.0.0-beta.50",
+    "@operato/styles": "^1.0.0-beta.50",
+    "@operato/utils": "^1.0.0-beta.50",
+    "lit": "^2.2.7",
     "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
@@ -53,12 +53,12 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -77,5 +77,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "23c51cd9e53b2b9222855ef090db06fd7b23ed98"
+  "gitHead": "9b3a8e88bfb7b868f30c7c049447d3c65e32f7df"
 }

package/src/actions/layout.ts

@@ -1,5 +1,6 @@
-import { OxPopup } from '@operato/popup'
 import { TemplateResult } from 'lit'
+
+import { PopupHandle, PopupOptions, setOpenPopupImplementation } from '@operato/popup'
 import { store } from '@operato/shell'
 
 export type Viewpart = {
@@ -158,43 +159,6 @@ export const toggleOverlay = (name: string, options: any) => {
  */
 var popupSequence = 0
 
-/**
- * Options for popup
- *
- * @typedef {Object} PopupOptions
- * @property {String} [title] - popup title
- * @property {'center' | 'next' | 'edge'} [hovering] - hovering position (default: 'center'). 'edge' : edge of the HEADERBAR, 'next' : next of the clicked position.
- * @property {'large' | 'medium' | small'} [size] - popup size
- * @property {Boolean} [closable] - set whether the close 'X' button is shown on top-right most position (default true)
- * @property {Boolean} [escapable] - set whether the close popup with 'ESC' key (default true)
- * @property {Boolean} [backdrop] - set whether to do background masking around the pop-up. If true, it becomes modal (default true)
- */
-export type PopupOptions = {
-  title?: string
-  hovering?: 'center' | 'next' | 'edge'
-  size?: 'large' | 'medium' | 'small'
-  closable?: boolean
-  escapable?: boolean
-  backdrop?: boolean
-  help?: string
-}
-
-/**
- * Popup handle object that will be returned openPopup
- *
- * @typedef {Object} PopupHandle
- * @property {String} [name] - popup instance name
- * @property {Function} [close] - call this function to close the popup.
- * @property {Boolean} [closed] - state telling whether the popup is closed or not.
- * @property {Function} [onclosed] - set callback function on close. It will be called when the popup about to close.
- */
-export type PopupHandle = {
-  name: string
-  close: () => void
-  closed: boolean
-  onclosed?: () => void
-}
-
 /**
  * open popup in operato application environment
  *
@@ -202,7 +166,7 @@ export type PopupHandle = {
  * @param {PopupOptions} options
  * @returns popup handle object. This object is used to close the popup.
  */
-export const layoutOpenPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {
+export const openPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {
   var name = `$popup-${popupSequence++}`
 
   appendViewpart({
@@ -244,36 +208,4 @@ export const layoutOpenPopup = (template: TemplateResult, options: PopupOptions
   return popup
 }
 
-/**
- * open popup out of operato application environment
- *
- * @param {*} template html template to be rendered inside the popup
- * @param {PopupOptions} options
- * @returns popup handle object. This object is used to close the popup.
- */
-const liteOpenPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {
-  history.pushState({}, '', location.href)
-
-  const popup = OxPopup.open({
-    template,
-    width: '90%',
-    height: '90%'
-  })
-
-  popup.style.setProperty('--overlay-center-normal-width', '100%')
-  popup.style.setProperty('--overlay-center-normal-height', '100%')
-
-  requestAnimationFrame(() => {
-    dispatchEvent(new Event('resize'))
-  })
-
-  return {
-    close: () => {
-      popup.close()
-      history.back()
-    }
-  } as PopupHandle
-}
-
-export const openPopup: (template: TemplateResult, options: PopupOptions) => PopupHandle =
-  'operato' in window ? liteOpenPopup : layoutOpenPopup
+setOpenPopupImplementation(openPopup)

package/src/index.ts

@@ -1,5 +1,7 @@
 import './initializer'
 
+export { PopupHandle, PopupOptions } from '@operato/popup'
+
 export * from './layouts/ox-snack-bar.js'
 export * from './layouts/ox-header-bar.js'
 export * from './layouts/ox-nav-bar.js'

package/src/layouts/ox-aside-bar.ts

@@ -1,4 +1,4 @@
-import '../components/ox-floating-overlay.js'
+import '@operato/popup/ox-floating-overlay.js'
 import '../components/ox-resize-splitter.js'
 
 import { css, html, LitElement } from 'lit'
@@ -68,6 +68,7 @@ class AsideBar extends connect(store)(LitElement) {
                 .help=${asidebar.help}
                 .closable=${asidebar.closable}
                 .templateProperties=${asidebar.templateProperties}
+                .historical=${true}
                 >${asidebar.template}</ox-floating-overlay
               >
             `

package/src/layouts/ox-footer-bar.ts

@@ -1,4 +1,4 @@
-import '../components/ox-floating-overlay.js'
+import '@operato/popup/ox-floating-overlay.js'
 import '../components/ox-resize-splitter.js'
 
 import { css, html, LitElement } from 'lit'
@@ -69,6 +69,7 @@ class FooterBar extends connect(store)(LitElement) {
                 .size=${footerbar.size}
                 .closable=${footerbar.closable}
                 .templateProperties=${footerbar.templateProperties}
+                .historical=${true}
                 >${footerbar.template}</ox-floating-overlay
               >
             `

package/src/layouts/ox-header-bar.ts

@@ -1,4 +1,4 @@
-import '../components/ox-floating-overlay.js'
+import '@operato/popup/ox-floating-overlay.js'
 import '../components/ox-resize-splitter.js'
 
 import { css, html, LitElement } from 'lit'
@@ -66,6 +66,7 @@ class HeaderBar extends connect(store)(LitElement) {
                 .size=${headerbar.size}
                 .closable=${headerbar.closable}
                 .templateProperties=${headerbar.templateProperties}
+                .historical=${true}
                 >${headerbar.template}</ox-floating-overlay
               >
             `

package/src/layouts/ox-nav-bar.ts

@@ -1,4 +1,4 @@
-import '../components/ox-floating-overlay.js'
+import '@operato/popup/ox-floating-overlay.js'
 import '../components/ox-resize-splitter.js'
 
 import { css, html, LitElement } from 'lit'
@@ -70,6 +70,7 @@ class NavBar extends connect(store)(LitElement) {
                 .size=${navbar.size}
                 .closable=${navbar.closable}
                 .templateProperties=${navbar.templateProperties}
+                .historical=${true}
                 >${navbar.template}</ox-floating-overlay
               >
             `

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

@@ -1,2 +0,0 @@
-import '@operato/help/ox-help-icon.js';
-import '@material/mwc-icon';

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

@@ -1,333 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/help/ox-help-icon.js';
-import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
-let FloatingOverlay = class FloatingOverlay extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.backdrop = false;
-        this.title = '';
-        this.closable = false;
-    }
-    render() {
-        var direction = this.hovering == 'center' ? false : this.direction;
-        return html `
-      ${Boolean(this.backdrop)
-            ? html ` <div id="backdrop" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `
-            : html ``}
-
-      <div
-        overlayed
-        hovering=${this.hovering || 'center'}
-        direction=${direction}
-        size=${this.size || 'normal'}
-        @close-overlay=${() => this.onClose()}
-        @transitionstart=${(e) => {
-            /* to hide scrollbar during transition */
-            ;
-            e.target.removeAttribute('settled');
-        }}
-        @transitionend=${(e) => {
-            ;
-            e.target.setAttribute('settled', '');
-        }}
-      >
-        <div header>
-          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
-          <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 ``}</slot
-          >
-          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-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() {
-        requestAnimationFrame(() => {
-            var _a;
-            /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
-            (_a = this.renderRoot.querySelector('[overlayed]')) === null || _a === void 0 ? void 0 : _a.setAttribute('opened', 'true');
-        });
-    }
-    disconnectedCallback() {
-        document.dispatchEvent(new CustomEvent('overlay-closed', {
-            detail: this.name
-        }));
-        super.disconnectedCallback();
-    }
-    onClose(escape) {
-        /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
-        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();
-    }
-};
-FloatingOverlay.styles = [
-    ScrollbarStyles,
-    css `
-      /* for layout style */
-      :host {
-        position: relative;
-        z-index: 1;
-      }
-
-      :host([hovering='edge']) {
-        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */
-        position: initial;
-      }
-
-      #backdrop {
-        position: fixed;
-        left: 0;
-        top: 0;
-
-        width: 100vw;
-        height: 100vh;
-
-        background-color: var(--overlay-background-color);
-      }
-
-      [overlayed] {
-        position: absolute;
-
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        background: transparent;
-        pointer-events: none;
-      }
-
-      [overlayed][hovering='center'] {
-        position: fixed;
-
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-
-        opacity: 0;
-      }
-
-      [overlayed][hovering='center'][opened] {
-        opacity: 1;
-        transition: opacity 0.3s ease-in;
-      }
-
-      [hovering='center'] {
-        width: var(--overlay-center-normal-width, 60%);
-        height: var(--overlay-center-normal-height, 60%);
-      }
-
-      [hovering='center'][size='small'] {
-        width: var(--overlay-center-small-width, 40%);
-        height: var(--overlay-center-small-height, 40%);
-      }
-
-      [hovering='center'][size='large'] {
-        width: var(--overlay-center-large-width, 100%);
-        height: var(--overlay-center-large-height, 100%);
-      }
-
-      [header] {
-        --help-icon-color: #fff;
-        --help-icon-hover-color: #fff;
-
-        pointer-events: initial;
-      }
-
-      [content] {
-        flex: 1;
-
-        overflow: hidden;
-      }
-
-      ::slotted(*) {
-        box-sizing: border-box;
-        pointer-events: initial;
-      }
-
-      [hovering='center'] [content] ::slotted(*) {
-        width: 100%;
-        height: 100%;
-      }
-      [direction='up'],
-      [direction='down'] {
-        width: 100%;
-
-        max-height: 0;
-        transition: max-height 0.7s ease-in;
-      }
-      [direction='up'] {
-        bottom: 0;
-      }
-      [direction='down'] {
-        top: 0;
-      }
-
-      [direction='up'][opened],
-      [direction='down'][opened] {
-        max-height: 100vh;
-      }
-
-      [settled][direction='down'] [content],
-      [settled][direction='up'] [content] {
-        overflow-y: auto;
-      }
-
-      [direction='left'],
-      [direction='right'] {
-        height: 100%;
-
-        max-width: 0;
-        transition: max-width 0.5s ease-in;
-      }
-      [direction='left'] {
-        right: 0;
-      }
-      [direction='right'] {
-        left: 0;
-      }
-
-      [direction='left'][opened],
-      [direction='right'][opened] {
-        max-width: 100vw;
-      }
-
-      [settled][direction='left'] [content],
-      [settled][direction='right'] [content] {
-        overflow-x: auto;
-      }
-
-      @media screen and (max-width: 460px) {
-        [direction='up'],
-        [direction='down'] {
-          max-height: 100vh;
-        }
-
-        [direction='left'],
-        [direction='right'] {
-          max-width: 100vw;
-        }
-      }
-    `,
-    css `
-      /* for header style */
-      [header] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        background-color: var(--overlay-header-background-color);
-        color: var(--overlay-header-color);
-      }
-
-      slot[name='header'] {
-        flex: 1;
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-      }
-
-      [name='header']::slotted(*) {
-        margin: 0 auto;
-      }
-
-      [name='header'] > h1 {
-        text-transform: capitalize;
-        font: var(--overlay-header-font);
-      }
-
-      [historyback] {
-        margin-left: 10px;
-        margin-right: auto;
-      }
-
-      [close] {
-        margin-left: auto;
-        margin-right: 10px;
-      }
-
-      [historyback],
-      [close] {
-        display: none;
-      }
-
-      [closable][close] {
-        display: block;
-      }
-
-      @media screen and (max-width: 460px) {
-        [closable][historyback] {
-          display: block;
-        }
-
-        [closable][close] {
-          display: none;
-        }
-      }
-    `
-];
-__decorate([
-    property({ type: Boolean })
-], FloatingOverlay.prototype, "backdrop", void 0);
-__decorate([
-    property({ type: String })
-], FloatingOverlay.prototype, "direction", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], FloatingOverlay.prototype, "hovering", void 0);
-__decorate([
-    property({ type: String })
-], FloatingOverlay.prototype, "size", void 0);
-__decorate([
-    property({ type: String })
-], FloatingOverlay.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], FloatingOverlay.prototype, "title", void 0);
-__decorate([
-    property({ type: Boolean })
-], FloatingOverlay.prototype, "closable", void 0);
-__decorate([
-    property({ type: Object })
-], FloatingOverlay.prototype, "templateProperties", void 0);
-__decorate([
-    property({ type: Object })
-], FloatingOverlay.prototype, "help", void 0);
-FloatingOverlay = __decorate([
-    customElement('ox-floating-overlay')
-], FloatingOverlay);
-//# sourceMappingURL=ox-floating-overlay.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../../src/components/ox-floating-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAgN+B,aAAQ,GAAY,KAAK,CAAA;QAK1B,UAAK,GAAW,EAAE,CAAA;QACjB,aAAQ,GAAY,KAAK,CAAA;IA+FxD,CAAC;IA3FC,MAAM;QACJ,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAA;QAElE,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA,+BAA+B,CAAC,IAAI,CAAC,QAAQ,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU;YAChG,CAAC,CAAC,IAAI,CAAA,EAAE;;;;mBAIG,IAAI,CAAC,QAAQ,IAAI,QAAQ;oBACxB,SAAS;eACd,IAAI,CAAC,IAAI,IAAI,QAAQ;yBACX,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;2BAClB,CAAC,CAAQ,EAAE,EAAE;YAC9B,yCAAyC;YACzC,CAAC;YAAC,CAAC,CAAC,MAAsB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QACvD,CAAC;yBACgB,CAAC,CAAQ,EAAE,EAAE;YAC5B,CAAC;YAAC,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QACxD,CAAC;;;6BAGoB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,IAAI,CAAC,QAAQ;;cAE9D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAA;;sBAEE,IAAI,CAAC,KAAK,IAAI,EAAE,SAAS,IAAI,CAAC,IAAI;gBAClC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,IAAI,kBAAkB;gBAC1D,CAAC,CAAC,IAAI,CAAA,EAAE;;iBAEb;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;6BAEO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,IAAI,CAAC,QAAQ;;;;;;;KAOvE,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAChE,IAAI,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAA;YACrC,IAAI,QAAQ,EAAE;gBACZ,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,EAAE;oBACxC,YAAY;oBACZ,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAA;iBAC/C;aACF;SACF;IACH,CAAC;IAED,YAAY;QACV,qBAAqB,CAAC,GAAG,EAAE;;YACzB,sDAAsD;YACtD,MAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,0CAAE,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC9E,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CACH,CAAA;QAED,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,OAAO,CAAC,MAAgB;QACtB,qEAAqE;QAErE,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QACzB,IAAI,OAAO,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAA;QAEnC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAC1C,OAAM;SACP;QAED,mFAAmF;QACnF,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;YAChC,OAAO,IAAI,CAAA;SACZ;QAED,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AApTQ,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgJF;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDF;CACF,CAAA;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA6C;AAC7B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAA6B;AAC3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoC;AACnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAU;AAxNjC,eAAe;IADpB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,eAAe,CAqTpB","sourcesContent":["import '@operato/help/ox-help-icon.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-floating-overlay')\nclass FloatingOverlay extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      /* for layout style */\n      :host {\n        position: relative;\n        z-index: 1;\n      }\n\n      :host([hovering='edge']) {\n        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */\n        position: initial;\n      }\n\n      #backdrop {\n        position: fixed;\n        left: 0;\n        top: 0;\n\n        width: 100vw;\n        height: 100vh;\n\n        background-color: var(--overlay-background-color);\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background: transparent;\n        pointer-events: none;\n      }\n\n      [overlayed][hovering='center'] {\n        position: fixed;\n\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n\n        opacity: 0;\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n      }\n\n      [hovering='center'] {\n        width: var(--overlay-center-normal-width, 60%);\n        height: var(--overlay-center-normal-height, 60%);\n      }\n\n      [hovering='center'][size='small'] {\n        width: var(--overlay-center-small-width, 40%);\n        height: var(--overlay-center-small-height, 40%);\n      }\n\n      [hovering='center'][size='large'] {\n        width: var(--overlay-center-large-width, 100%);\n        height: var(--overlay-center-large-height, 100%);\n      }\n\n      [header] {\n        --help-icon-color: #fff;\n        --help-icon-hover-color: #fff;\n\n        pointer-events: initial;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n      }\n\n      ::slotted(*) {\n        box-sizing: border-box;\n        pointer-events: initial;\n      }\n\n      [hovering='center'] [content] ::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n      [direction='up'],\n      [direction='down'] {\n        width: 100%;\n\n        max-height: 0;\n        transition: max-height 0.7s ease-in;\n      }\n      [direction='up'] {\n        bottom: 0;\n      }\n      [direction='down'] {\n        top: 0;\n      }\n\n      [direction='up'][opened],\n      [direction='down'][opened] {\n        max-height: 100vh;\n      }\n\n      [settled][direction='down'] [content],\n      [settled][direction='up'] [content] {\n        overflow-y: auto;\n      }\n\n      [direction='left'],\n      [direction='right'] {\n        height: 100%;\n\n        max-width: 0;\n        transition: max-width 0.5s ease-in;\n      }\n      [direction='left'] {\n        right: 0;\n      }\n      [direction='right'] {\n        left: 0;\n      }\n\n      [direction='left'][opened],\n      [direction='right'][opened] {\n        max-width: 100vw;\n      }\n\n      [settled][direction='left'] [content],\n      [settled][direction='right'] [content] {\n        overflow-x: auto;\n      }\n\n      @media screen and (max-width: 460px) {\n        [direction='up'],\n        [direction='down'] {\n          max-height: 100vh;\n        }\n\n        [direction='left'],\n        [direction='right'] {\n          max-width: 100vw;\n        }\n      }\n    `,\n    css`\n      /* for header style */\n      [header] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n\n        background-color: var(--overlay-header-background-color);\n        color: var(--overlay-header-color);\n      }\n\n      slot[name='header'] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        text-transform: capitalize;\n        font: var(--overlay-header-font);\n      }\n\n      [historyback] {\n        margin-left: 10px;\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: 10px;\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n      }\n\n      @media screen and (max-width: 460px) {\n        [closable][historyback] {\n          display: block;\n        }\n\n        [closable][close] {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) backdrop: boolean = false\n  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge'\n  @property({ type: String }) size?: 'small' | 'normal' | 'large'\n  @property({ type: String }) name?: string\n  @property({ type: String }) title: string = ''\n  @property({ type: Boolean }) closable: boolean = false\n  @property({ type: Object }) templateProperties: any\n  @property({ type: Object }) help: any\n\n  render() {\n    var direction = this.hovering == 'center' ? false : this.direction\n\n    return html`\n      ${Boolean(this.backdrop)\n        ? html` <div id=\"backdrop\" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `\n        : html``}\n\n      <div\n        overlayed\n        hovering=${this.hovering || 'center'}\n        direction=${direction}\n        size=${this.size || 'normal'}\n        @close-overlay=${() => this.onClose()}\n        @transitionstart=${(e: Event) => {\n          /* to hide scrollbar during transition */\n          ;(e.target as HTMLElement).removeAttribute('settled')\n        }}\n        @transitionend=${(e: Event) => {\n          ;(e.target as HTMLElement).setAttribute('settled', '')\n        }}\n      >\n        <div header>\n          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\n          <slot name=\"header\">\n            ${this.title || this.closable\n              ? html`\n                  <h1>\n                    ${this.title || ''}&nbsp;${this.help\n                      ? html` <ox-help-icon .topic=${this.help}></ox-help-icon>`\n                      : html``}\n                  </h1>\n                `\n              : html``}</slot\n          >\n          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>\n        </div>\n\n        <div content>\n          <slot> </slot>\n        </div>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('templateProperties') && this.templateProperties) {\n      var template = this.firstElementChild\n      if (template) {\n        for (let prop in this.templateProperties) {\n          //@ts-ignore\n          template[prop] = this.templateProperties[prop]\n        }\n      }\n    }\n  }\n\n  firstUpdated() {\n    requestAnimationFrame(() => {\n      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n      this.renderRoot.querySelector('[overlayed]')?.setAttribute('opened', 'true')\n    })\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('overlay-closed', {\n        detail: this.name\n      })\n    )\n\n    super.disconnectedCallback()\n  }\n\n  onClose(escape?: boolean) {\n    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */\n\n    var state = history.state\n    var overlay = (state || {}).overlay\n\n    if (!overlay || overlay.name !== this.name) {\n      return\n    }\n\n    /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n    if (escape && !overlay.escapable) {\n      return true\n    }\n\n    history.back()\n  }\n}\n"]}