@operato/popup 8.0.3 → 9.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAQhE;;;;;;;;GAQG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAwC4D,uBAAkB,GAAY,KAAK,CAAA;QAChD,aAAQ,GAAY,KAAK,CAAA;QAErE,eAAU,GAAgB,QAAQ,CAAC,aAA4B,CAAA;QAC7D,mBAAc,GAAY,KAAK,CAAA;QAS/B,gBAAW,GAA4B,UAAyB,CAAa;YACrF,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B,CAAA;YAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvB,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YACjE,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA+B,UAAyB,CAAgB;YAC1F,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,KAAK,CAAC,CAAC,cAAc;gBAC1B,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,EAAE,CAAA;oBACZ,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA+B,UAAyB,CAAgB;YACxF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA4B,UAAyB,CAAa;YACpF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,iBAAY,GAA4B,UAAyB,CAAa;YACtF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,mBAAc,GAAuB,UAAyB,CAAQ;YAC9E,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,eAAe;QACjB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA4B,UAAyB,CAAa;YAClF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAAuB,UAAyB,CAAQ;YACxE,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,gBAAW,GAAuB,UAAyB,CAAQ;YAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,kBAAa,GAAuB,UAAyB,CAAQ;YAC7E,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;QACjE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IA+Qd,CAAC;aAtXQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCF;KACF,AArCY,CAqCZ;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO;;KAEzF,CAAA;IACH,CAAC;IAuDD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QACnD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QACrD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QACzD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAChD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAEtD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA,CAAC,8BAA8B;QACjE,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,IAAI,CAAC,EACV,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,kBAAkB,EAClB,QAAQ,EAaT;QACC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;QAC5D,IAAI,kBAAkB,EAAE,CAAC;YACvB,MAAM,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;QAChD,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAA;QAC5B,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;QAC9B,CAAC;QAED,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAExB,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,sBAAsB,CAAC;gBACxD,IAAI;gBACJ,GAAG;gBACH,KAAK;gBACL,MAAM;gBACN,eAAe,EAAE,MAAqB;aACvC,CAAC,CAAA;QACJ,CAAC;QAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QACjC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAA;QAC5B,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAExD,OAAO,MAAM,CAAA;IACf,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EACH,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EAUd;QACC,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAA;YAC3B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;QAC/B,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;YAC7B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;QAC/B,CAAC;QAED,IAAI,IAAI,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YAC3F,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,mCAAmC,CAAA;YAC1D,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAA;YACvB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAA;QACxB,CAAC;aAAM,IAAI,KAAK,EAAE,CAAC;YACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,qBAAqB,EAAE,IAAI;gBAC9D,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;gBACR,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,CAAC;aACV,CAAA;YAED,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAA;YAE7B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAA;gBACrB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAA;YAC/B,CAAC;YACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAA;gBACnB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;YAC7B,CAAC;YACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,CAAA;gBACpD,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;YACjC,CAAC;YACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBACzB,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;gBACxD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;YACnC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAA;YAC/B,CAAC;YACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;YAC7B,CAAC;YACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;YACjC,CAAC;YACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;YACnC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QAE/B,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAA;YAC7B,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAA;YAE5B,IAAI,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;YAE3C,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAA;YACvB,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAA;YACtB,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAA;YACpB,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAA;YAErB,+DAA+D;YAC/D,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;gBAC1F,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;gBAC5B,CAAC,GAAG,EAAE,CAAA;YACR,CAAC;YAED,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;gBACzF,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;gBAC5B,CAAC,GAAG,EAAE,CAAA;YACR,CAAC;YAED,8DAA8D;YAC9D,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;YAE5C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAA;gBACvB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;YACxB,CAAC;iBAAM,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAA;gBACnB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YAC5B,CAAC;YAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,KAAK,CAAA;gBAC7D,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YACvB,CAAC;iBAAM,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAA;gBACtE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YACvB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,gBAAgB;QAChB,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAA;QAEhC,oEAAoE;QACpE,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACrD,CAAC;IAED,cAAc,CAAC,MAAoB;QACjC,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,aAAa,CAC9C,0HAA0H,CAC3H,CAAA;QAED,IAAI,SAAS,EAAE,CAAC;YACd,CAAC;YAAC,SAAyB,CAAC,KAAK,EAAE,CAAA;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;QAE9B,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAEtD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9C,gEAAgE;YAChE,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACtD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACpD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAChD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAChD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YACnD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACzD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACpD,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YACxD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAE5D,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YAEpC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;YAClD,CAAC;QACH,CAAC;IACH,CAAC;;AA9UgE;IAAhE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDAAoC;AAChD;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAA0B;AAzClE,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuXnB","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { convertToFixedPosition } from './position-converter.js'\n\ndeclare global {\n  interface Window {\n    POPUP_DEBUG?: boolean\n  }\n}\n\n/**\n * Custom element class representing the 'ox-popup' component.\n *\n * This component provides the functionality to display a popup with various configuration options.\n * It can be used to show additional information, notifications, or user interactions within a web application.\n *\n * @fires ox-close - Dispatched when the popup is closed.\n * @fires ox-collapse - Dispatched when the popup is collapsed.\n */\n@customElement('ox-popup')\nexport class OxPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        z-index: 1000; /* Increased z-index to ensure it's on top */\n        padding: 0;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        min-width: fit-content;\n        line-height: initial;\n        text-align: initial;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        margin: 0;\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      #backdrop {\n        position: fixed;\n        top: -100vh;\n        left: -100vw;\n        width: 300vw;\n        height: 300vh;\n        background-color: black;\n        opacity: 0.5;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n  @property({ type: Boolean, attribute: 'backdrop' }) backdrop: boolean = false\n\n  private lastActive: HTMLElement = document.activeElement as HTMLElement\n  protected removeAfterUse: boolean = false\n\n  render() {\n    return html`\n      ${this.backdrop ? html`<div id=\"backdrop\" @click=${() => this.close()}></div>` : nothing}\n      <slot></slot>\n    `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    // this.close()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Configuration for opening ox-popup\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the popup\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {Number} right The position-right where the pop-up will be displayed\n   * @property {Number} bottom The position-bottom where the pop-up will be displayed\n   * @property {string} width The maximum width of the popup (CSS string)\n   * @property {string} height The maximum height of the popup (CSS string)\n   * @property {HTMLElement} parent Popup's parent element\n   * @property {string} style Additional CSS styles for the popup\n   * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur\n   * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    style,\n    preventCloseOnBlur,\n    backdrop\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    style?: string\n    preventCloseOnBlur?: boolean\n    backdrop?: boolean\n  }): OxPopup {\n    const target = document.createElement('ox-popup') as OxPopup\n    if (preventCloseOnBlur) {\n      target.preventCloseOnBlur = preventCloseOnBlur\n    }\n\n    if (backdrop) {\n      target.backdrop = backdrop\n    }\n\n    if (style) {\n      target.style.cssText = style\n    }\n\n    render(template, target)\n\n    if (parent) {\n      var { left, top, right, bottom } = convertToFixedPosition({\n        left,\n        top,\n        right,\n        bottom,\n        relativeElement: parent as HTMLElement\n      })\n    }\n\n    document.body.appendChild(target)\n    target.removeAfterUse = true\n    target.open({ top, left, right, bottom, width, height })\n\n    return target\n  }\n\n  /**\n   * Opens the 'ox-popup' with the specified position and dimensions.\n   *\n   * @param {Object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} options.left - The left position (in pixels) where the popup should be displayed. If not provided, it will be centered horizontally.\n   * @param {number} options.top - The top position (in pixels) where the popup should be displayed. If not provided, it will be centered vertically.\n   * @param {number} options.right - The right position (in pixels) where the popup should be displayed. If provided, it will override the 'left' value.\n   * @param {number} options.bottom - The bottom position (in pixels) where the popup should be displayed. If provided, it will override the 'top' value.\n   * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.\n   * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.\n   * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.\n   * @param {boolean} [options.fixed=false] - A flag indicating whether the popup should be positioned fixed relative to the viewport. If set to true, the popup will be fixed.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false,\n    fixed = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n    fixed?: boolean\n  }) {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n      this.style.left = '50%'\n      this.style.top = '50%'\n    } else if (fixed) {\n      const bounding = this.parentElement?.getBoundingClientRect() || {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0\n      }\n\n      this.style.position = 'fixed'\n\n      if (left !== undefined) {\n        left += bounding.left\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        top += bounding.top\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        right = window.innerWidth - (bounding.right - right)\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        bottom = window.innerHeight - (bounding.bottom - bottom)\n        this.style.bottom = `${bottom}px`\n      }\n    } else {\n      if (left !== undefined) {\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        this.style.bottom = `${bottom}px`\n      }\n    }\n\n    this.setAttribute('active', '')\n\n    requestAnimationFrame(() => {\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = '10px'\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = ''\n        this.style.bottom = '10px'\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)`\n        this.style.right = ''\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the 'ox-popup'.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this.removeAfterUse && this.parentElement) {\n      /* this case is when the popup is opened by OxPopup.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this.parentElement.removeChild(this)\n\n      if (this.lastActive) {\n        this.lastActive.focus && this.lastActive.focus()\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { convertToFixedPosition } from './position-converter.js'\n\ndeclare global {\n  interface Window {\n    POPUP_DEBUG?: boolean\n  }\n}\n\n/**\n * Custom element class representing the 'ox-popup' component.\n *\n * This component provides the functionality to display a popup with various configuration options.\n * It can be used to show additional information, notifications, or user interactions within a web application.\n *\n * @fires ox-close - Dispatched when the popup is closed.\n * @fires ox-collapse - Dispatched when the popup is collapsed.\n */\n@customElement('ox-popup')\nexport class OxPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        z-index: 1000; /* Increased z-index to ensure it's on top */\n        padding: 0;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        min-width: fit-content;\n        line-height: initial;\n        text-align: initial;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        margin: 0;\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      #backdrop {\n        position: fixed;\n        top: -100vh;\n        left: -100vw;\n        width: 300vw;\n        height: 300vh;\n        background-color: black;\n        opacity: 0.5;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n  @property({ type: Boolean, attribute: 'backdrop' }) backdrop: boolean = false\n\n  private lastActive: HTMLElement = document.activeElement as HTMLElement\n  protected removeAfterUse: boolean = false\n\n  render() {\n    return html`\n      ${this.backdrop ? html`<div id=\"backdrop\" @click=${() => this.close()}></div>` : nothing}\n      <slot></slot>\n    `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    // this.close()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Configuration for opening ox-popup\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the popup\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {Number} right The position-right where the pop-up will be displayed\n   * @property {Number} bottom The position-bottom where the pop-up will be displayed\n   * @property {string} width The maximum width of the popup (CSS string)\n   * @property {string} height The maximum height of the popup (CSS string)\n   * @property {HTMLElement} parent Popup's parent element\n   * @property {string} style Additional CSS styles for the popup\n   * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur\n   * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    style,\n    preventCloseOnBlur,\n    backdrop\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    style?: string\n    preventCloseOnBlur?: boolean\n    backdrop?: boolean\n  }): OxPopup {\n    const target = document.createElement('ox-popup') as OxPopup\n    if (preventCloseOnBlur) {\n      target.preventCloseOnBlur = preventCloseOnBlur\n    }\n\n    if (backdrop) {\n      target.backdrop = backdrop\n    }\n\n    if (style) {\n      target.style.cssText = style\n    }\n\n    render(template, target)\n\n    if (parent) {\n      var { left, top, right, bottom } = convertToFixedPosition({\n        left,\n        top,\n        right,\n        bottom,\n        relativeElement: parent as HTMLElement\n      })\n    }\n\n    document.body.appendChild(target)\n    target.removeAfterUse = true\n    target.open({ top, left, right, bottom, width, height })\n\n    return target\n  }\n\n  /**\n   * Opens the 'ox-popup' with the specified position and dimensions.\n   *\n   * @param {Object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} options.left - The left position (in pixels) where the popup should be displayed. If not provided, it will be centered horizontally.\n   * @param {number} options.top - The top position (in pixels) where the popup should be displayed. If not provided, it will be centered vertically.\n   * @param {number} options.right - The right position (in pixels) where the popup should be displayed. If provided, it will override the 'left' value.\n   * @param {number} options.bottom - The bottom position (in pixels) where the popup should be displayed. If provided, it will override the 'top' value.\n   * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.\n   * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.\n   * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.\n   * @param {boolean} [options.fixed=false] - A flag indicating whether the popup should be positioned fixed relative to the viewport. If set to true, the popup will be fixed.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false,\n    fixed = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n    fixed?: boolean\n  }) {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n      this.style.left = '50%'\n      this.style.top = '50%'\n    } else if (fixed) {\n      const bounding = this.parentElement?.getBoundingClientRect() || {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0\n      }\n\n      this.style.position = 'fixed'\n\n      if (left !== undefined) {\n        left += bounding.left\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        top += bounding.top\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        right = window.innerWidth - (bounding.right - right)\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        bottom = window.innerHeight - (bounding.bottom - bottom)\n        this.style.bottom = `${bottom}px`\n      }\n    } else {\n      if (left !== undefined) {\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        this.style.bottom = `${bottom}px`\n      }\n    }\n\n    this.setAttribute('active', '')\n\n    requestAnimationFrame(() => {\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = '10px'\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = ''\n        this.style.bottom = '10px'\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)`\n        this.style.right = ''\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the 'ox-popup'.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this.removeAfterUse && this.parentElement) {\n      /* this case is when the popup is opened by OxPopup.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this.parentElement.removeChild(this)\n\n      if (this.lastActive) {\n        this.lastActive.focus && this.lastActive.focus()\n      }\n    }\n  }\n}\n"]}

package/dist/src/ox-prompt.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import '@material/web/button/filled-button.js';
 import '@material/web/button/outlined-button.js';
 import '@material/web/icon/icon.js';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { css, html, nothing, LitElement } from 'lit';
 import { render } from 'lit-html';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -18,73 +18,7 @@ const TYPES_ICON = {
  * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.
  */
 let OxPrompt = class OxPrompt extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Specifies the title of the popup.
-         */
-        this.titler = '';
-        /**
-         * Prevents the popup from closing when it loses focus (blur event).
-         */
-        this.preventCloseOnBlur = false;
-        this.resolveFn = null;
-        this._onfocusout = function (e) {
-            const to = e.relatedTarget;
-            if (!this.contains(to)) {
-                /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
-                // @ts-ignore for debug
-                if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
-                    return;
-                }
-                this.resolve(false);
-                this.close();
-            }
-        }.bind(this);
-        this._onkeydown = function (e) {
-            e.stopPropagation();
-            switch (e.key) {
-                case 'Esc': // for IE/Edge
-                case 'Escape':
-                    this.resolve(false);
-                    this.close();
-                    break;
-            }
-        }.bind(this);
-        this._onkeyup = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onmouseup = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onmousedown = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._oncontextmenu = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onclick = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onclose = function (e) {
-            this.resolve(false);
-            this.close();
-        }.bind(this);
-        this._oncollapse = function (e) {
-            e.stopPropagation();
-            this.resolve(false);
-            this.close();
-        }.bind(this);
-        this._onwindowblur = function (e) {
-            // @ts-ignore for debug
-            if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
-                return;
-            }
-            this.resolve(false);
-            this.close();
-        }.bind(this);
-    }
-    static { this.styles = [
+    static styles = [
         MDTypeScaleStyles,
         ScrollbarStyles,
         css `
@@ -183,7 +117,49 @@ let OxPrompt = class OxPrompt extends LitElement {
         --md-outlined-button-trailing-space: var(--spacing-large);
       }
     `
-    ]; }
+    ];
+    /**
+     * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.
+     */
+    type;
+    /**
+     * Specifies the icon of the popup.
+     */
+    icon;
+    /**
+     * Specifies the title of the popup.
+     */
+    titler = '';
+    /**
+     * Specifies the text content of the popup.
+     */
+    text;
+    /**
+     * Specifies the footer (additional information at the bottom) of the popup.
+     */
+    footer;
+    /**
+     * Determines whether the popup is displayed as a toast.
+     */
+    toast;
+    /**
+     * Specifies settings for the confirmation button.
+     */
+    confirmButton;
+    /**
+     * Specifies settings for the cancel button.
+     */
+    cancelButton;
+    /**
+     * Prevents the popup from closing when it loses focus (blur event).
+     */
+    preventCloseOnBlur = false;
+    /**
+     * A callback function called when the popup is closed, providing the result of the user's interaction.
+     */
+    callback;
+    _parent;
+    resolveFn = null;
     render() {
         return html `
       ${this.titler ? html ` <div titler class="md-typescale-title-large">${this.titler}</div> ` : nothing}
@@ -233,6 +209,60 @@ let OxPrompt = class OxPrompt extends LitElement {
         this.resolve(false);
         this.close();
     }
+    _onfocusout = function (e) {
+        const to = e.relatedTarget;
+        if (!this.contains(to)) {
+            /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
+            // @ts-ignore for debug
+            if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
+                return;
+            }
+            this.resolve(false);
+            this.close();
+        }
+    }.bind(this);
+    _onkeydown = function (e) {
+        e.stopPropagation();
+        switch (e.key) {
+            case 'Esc': // for IE/Edge
+            case 'Escape':
+                this.resolve(false);
+                this.close();
+                break;
+        }
+    }.bind(this);
+    _onkeyup = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onmouseup = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onmousedown = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _oncontextmenu = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onclick = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onclose = function (e) {
+        this.resolve(false);
+        this.close();
+    }.bind(this);
+    _oncollapse = function (e) {
+        e.stopPropagation();
+        this.resolve(false);
+        this.close();
+    }.bind(this);
+    _onwindowblur = function (e) {
+        // @ts-ignore for debug
+        if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
+            return;
+        }
+        this.resolve(false);
+        this.close();
+    }.bind(this);
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('focusout', this._onfocusout);
@@ -245,6 +275,7 @@ let OxPrompt = class OxPrompt extends LitElement {
         this.addEventListener('ox-close', this._onclose);
         this.addEventListener('ox-collapse', this._oncollapse);
         this.setAttribute('tabindex', '0'); // make this element focusable
+        this.guaranteeFocus();
     }
     /**
      * Static method to open the `ox-prompt` popup.
@@ -369,9 +400,7 @@ let OxPrompt = class OxPrompt extends LitElement {
             }
         });
         // auto focusing
-        requestAnimationFrame(() => {
-            !silent && this.guaranteeFocus();
-        });
+        !silent && this.guaranteeFocus();
         /* When the window is out of focus, all pop-ups should disappear. */
         window.addEventListener('blur', this._onwindowblur);
         return new Promise(resolve => {
@@ -379,7 +408,7 @@ let OxPrompt = class OxPrompt extends LitElement {
         });
     }
     guaranteeFocus(target) {
-        const focusible = (target || this.renderRoot)?.querySelector(':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex="-1"]), :host [type="button"]');
+        const focusible = (target || this).querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
         if (focusible) {
             ;
             focusible.focus();

package/dist/src/ox-prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/icon/icon.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst TYPES_ICON = {\n  success: 'verified',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  question: 'question_mark'\n}\n\n/**\n * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.\n */\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-gap, var(--spacing-medium));\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        z-index: 100;\n        padding: var(--ox-prompt-container-padding, var(--spacing-medium));\n        box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));\n        border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));\n        box-sizing: border-box;\n        min-width: 300;\n        line-height: initial;\n        text-align: initial;\n      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      [titler] {\n        padding: var(--ox-prompt-title-padding, var(--spacing-medium));\n        padding-bottom: 0;\n        color: var(--ox-prompt-title-color, var(--md-sys-color-primary));\n        font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        text-align: var(--ox-prompt-title-text-align, 'left');\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-content-gap, var(--spacing-medium));\n        padding: var(--ox-prompt-content-padding, var(--spacing-medium));\n        color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));\n        word-break: keep-all;\n        white-space: pre-line;\n        text-align: var(--ox-prompt-content-text-align, 'left');\n\n        md-icon {\n          align-self: center;\n          --md-icon-size: var(--icon-size-huge);\n          color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));\n        }\n      }\n\n      [content].warning md-icon {\n        color: var(--status-warning-color, #ee8d03);\n      }\n\n      [content].error md-icon {\n        color: var(--md-sys-color-error, var(--md-sys-color-error));\n      }\n\n      [content].info md-icon {\n        color: var(--status-info-color, #398ace);\n      }\n\n      [content].success md-icon {\n        color: var(--status-success-color, #35a24a);\n      }\n\n      [buttons] {\n        display: flex;\n        border-top: 1px solid var(--md-sys-color-surface-variant);\n        gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));\n        padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));\n        padding-top: var(--spacing-large);\n        justify-content: center;\n      }\n\n      #confirm {\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-on-primary);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n      }\n\n      #cancel {\n        --md-outlined-button-container-color: var(--md-sys-color-surface-variant);\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n      }\n    `\n  ]\n\n  /**\n   * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.\n   */\n  @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n\n  /**\n   * Specifies the icon of the popup.\n   */\n  @property({ type: String }) icon?: string\n\n  /**\n   * Specifies the title of the popup.\n   */\n  @property({ type: String }) titler?: string = ''\n\n  /**\n   * Specifies the text content of the popup.\n   */\n  @property({ type: String }) text?: string\n\n  /**\n   * Specifies the footer (additional information at the bottom) of the popup.\n   */\n  @property({ type: String }) footer?: string\n\n  /**\n   * Determines whether the popup is displayed as a toast.\n   */\n  @property({ type: Boolean }) toast?: boolean\n\n  /**\n   * Specifies settings for the confirmation button.\n   */\n  @property({ type: Object }) confirmButton?: { text: string; color?: string }\n\n  /**\n   * Specifies settings for the cancel button.\n   */\n  @property({ type: Object }) cancelButton?: { text: string; color?: string }\n\n  /**\n   * Prevents the popup from closing when it loses focus (blur event).\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n  /**\n   * A callback function called when the popup is closed, providing the result of the user's interaction.\n   */\n  @property({ type: Object }) callback?: (result: { value: boolean }) => void\n\n  @state() _parent?: Element\n\n  private resolveFn: ((value: boolean) => void) | null = null\n\n  render() {\n    return html`\n      ${this.titler ? html` <div titler class=\"md-typescale-title-large\">${this.titler}</div> ` : nothing}\n      <div content class=\"${this.type || 'info'} md-typescale-body-large\">\n        ${this.icon || this.type\n          ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `\n          : nothing}\n        ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n        <slot> </slot>\n        ${this.footer ? html` <div footer class=\"md-typescale-body-large\">${this.footer}</div> ` : nothing}\n      </div>\n      <div buttons>\n        ${this.confirmButton\n          ? html`\n              <md-filled-button id=\"confirm\" type=\"button\" @click=${(e: Event) => this.onConfirm()}\n                >${this.confirmButton?.text}</md-filled-button\n              >\n            `\n          : nothing}\n        ${this.cancelButton\n          ? html`\n              <md-outlined-button id=\"cancel\" type=\"button\" @click=${(e: Event) => this.onCancel()}\n                >${this.cancelButton?.text}</md-outlined-button\n              >\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  resolve(result: boolean) {\n    if (this.resolveFn) {\n      this.resolveFn(result)\n      this.resolveFn = null\n    }\n  }\n\n  /**\n   * Function called when the confirm button is clicked.\n   */\n  onConfirm() {\n    this.resolve(true)\n    this.close()\n  }\n\n  /**\n   * Function called when the cancel button is clicked.\n   */\n  onCancel() {\n    this.resolve(false)\n    this.close()\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPrompt, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */\n      // @ts-ignore for debug\n      if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n        return\n      }\n\n      this.resolve(false)\n      this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.resolve(false)\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    // @ts-ignore for debug\n    if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n      return\n    }\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n  }\n\n  /**\n   * Static method to open the `ox-prompt` popup.\n   * @param {object} options - An object containing popup options.\n   * @param {unknown} [options.template] - An optional content template to render inside the popup.\n   * @param {'success' | 'error' | 'warning' | 'info' | 'question'} [options.type] - The type of the popup, which can be one of: 'success', 'error', 'warning', 'info', 'question'.\n   * @param {string} [options.icon] - The icon to be displayed in the popup header.\n   * @param {string} [options.title] - The title to be displayed in the popup header.\n   * @param {string} [options.text] - The main text content of the popup.\n   * @param {string} [options.footer] - Additional information to be displayed at the bottom of the popup.\n   * @param {object} [options.confirmButton] - Configuration for the confirmation button in the popup.\n   * @param {string} options.confirmButton.text - The text to be displayed on the confirmation button.\n   * @param {string} [options.confirmButton.color] - The color of the confirmation button (CSS color).\n   * @param {object} [options.cancelButton] - Configuration for the cancel button in the popup.\n   * @param {string} options.cancelButton.text - The text to be displayed on the cancel button.\n   * @param {string} [options.cancelButton.color] - The color of the cancel button (CSS color).\n   * @param {number} [options.top] - The top position of the popup (in pixels).\n   * @param {number} [options.left] - The left position of the popup (in pixels).\n   * @param {number} [options.right] - The right position of the popup (in pixels).\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels).\n   * @param {string} [options.width] - The maximum width of the popup (CSS string).\n   * @param {string} [options.height] - The maximum height of the popup (CSS string).\n   * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.\n   * @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).\n   * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  public static async open({\n    template,\n    type,\n    icon,\n    title,\n    text,\n    footer,\n    confirmButton,\n    cancelButton,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    preventCloseOnBlur,\n    callback\n  }: {\n    template?: unknown\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: string\n    title?: string\n    text?: string\n    footer?: string\n    confirmButton?: { text: string; color?: string }\n    cancelButton?: { text: string; color?: string }\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    preventCloseOnBlur?: boolean\n    callback?: (result: { value: boolean }) => void\n  }): Promise<boolean> {\n    const owner = parent || document.body\n    const target = document.createElement('ox-prompt') as OxPrompt\n\n    target.type = type\n    target.icon = icon\n    target.text = text\n    target.titler = title\n    target.footer = footer\n    target.confirmButton = confirmButton\n    target.cancelButton = cancelButton\n    target.preventCloseOnBlur = !!preventCloseOnBlur\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    const result = await target.open({ top, left, right, bottom, width, height })\n\n    if (callback) {\n      await callback.call(null, { value: result })\n    }\n\n    return result\n  }\n\n  /**\n   * Opens the popup with specified position and dimensions.\n   * @param {object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} [options.left] - The left position of the popup (in pixels). If not provided, the popup will be horizontally centered.\n   * @param {number} [options.top] - The top position of the popup (in pixels). If not provided, the popup will be vertically centered.\n   * @param {number} [options.right] - The right position of the popup (in pixels). Overrides 'left' if both 'left' and 'right' are provided.\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels). Overrides 'top' if both 'top' and 'bottom' are provided.\n   * @param {string} [options.width] - The maximum width of the popup (CSS string). If not provided, no width restriction is applied.\n   * @param {string} [options.height] - The maximum height of the popup (CSS string). If not provided, no height restriction is applied.\n   * @param {boolean} [options.silent=false] - Determines whether to focus the popup automatically (true) or not (false).\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n  }): Promise<boolean> {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.left = '50%'\n      this.style.top = '50%'\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n    } else {\n      if (left !== undefined) this.style.left = `${left}px`\n      if (top !== undefined) this.style.top = `${top}px`\n      if (right !== undefined) this.style.right = `${right}px`\n      if (bottom !== undefined) this.style.bottom = `${bottom}px`\n    }\n\n    this.setAttribute('active', '')\n\n    // adjust popup position\n    requestAnimationFrame(() => {\n      const vh = document.body.clientHeight\n      const vw = document.body.clientWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = `calc(${computedStyle.top} + ${t}px)`\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)`\n        this.style.bottom = ''\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} + ${l}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)`\n        this.style.right = ''\n      }\n    })\n\n    // auto focusing\n    requestAnimationFrame(() => {\n      !silent && this.guaranteeFocus()\n    })\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n\n    return new Promise(resolve => {\n      this.resolveFn = resolve\n    })\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this.renderRoot)?.querySelector(\n      ':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex=\"-1\"]), :host [type=\"button\"]'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the popup.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the popup is opened by OxPrompt.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this._parent.removeChild(this)\n      delete this._parent\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/icon/icon.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst TYPES_ICON = {\n  success: 'verified',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  question: 'question_mark'\n}\n\n/**\n * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.\n */\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-gap, var(--spacing-medium));\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        z-index: 100;\n        padding: var(--ox-prompt-container-padding, var(--spacing-medium));\n        box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));\n        border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));\n        box-sizing: border-box;\n        min-width: 300;\n        line-height: initial;\n        text-align: initial;\n      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      [titler] {\n        padding: var(--ox-prompt-title-padding, var(--spacing-medium));\n        padding-bottom: 0;\n        color: var(--ox-prompt-title-color, var(--md-sys-color-primary));\n        font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        text-align: var(--ox-prompt-title-text-align, 'left');\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-content-gap, var(--spacing-medium));\n        padding: var(--ox-prompt-content-padding, var(--spacing-medium));\n        color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));\n        word-break: keep-all;\n        white-space: pre-line;\n        text-align: var(--ox-prompt-content-text-align, 'left');\n\n        md-icon {\n          align-self: center;\n          --md-icon-size: var(--icon-size-huge);\n          color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));\n        }\n      }\n\n      [content].warning md-icon {\n        color: var(--status-warning-color, #ee8d03);\n      }\n\n      [content].error md-icon {\n        color: var(--md-sys-color-error, var(--md-sys-color-error));\n      }\n\n      [content].info md-icon {\n        color: var(--status-info-color, #398ace);\n      }\n\n      [content].success md-icon {\n        color: var(--status-success-color, #35a24a);\n      }\n\n      [buttons] {\n        display: flex;\n        border-top: 1px solid var(--md-sys-color-surface-variant);\n        gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));\n        padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));\n        padding-top: var(--spacing-large);\n        justify-content: center;\n      }\n\n      #confirm {\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-on-primary);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n      }\n\n      #cancel {\n        --md-outlined-button-container-color: var(--md-sys-color-surface-variant);\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n      }\n    `\n  ]\n\n  /**\n   * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.\n   */\n  @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n\n  /**\n   * Specifies the icon of the popup.\n   */\n  @property({ type: String }) icon?: string\n\n  /**\n   * Specifies the title of the popup.\n   */\n  @property({ type: String }) titler?: string = ''\n\n  /**\n   * Specifies the text content of the popup.\n   */\n  @property({ type: String }) text?: string\n\n  /**\n   * Specifies the footer (additional information at the bottom) of the popup.\n   */\n  @property({ type: String }) footer?: string\n\n  /**\n   * Determines whether the popup is displayed as a toast.\n   */\n  @property({ type: Boolean }) toast?: boolean\n\n  /**\n   * Specifies settings for the confirmation button.\n   */\n  @property({ type: Object }) confirmButton?: { text: string; color?: string }\n\n  /**\n   * Specifies settings for the cancel button.\n   */\n  @property({ type: Object }) cancelButton?: { text: string; color?: string }\n\n  /**\n   * Prevents the popup from closing when it loses focus (blur event).\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n  /**\n   * A callback function called when the popup is closed, providing the result of the user's interaction.\n   */\n  @property({ type: Object }) callback?: (result: { value: boolean }) => void\n\n  @state() _parent?: Element\n\n  private resolveFn: ((value: boolean) => void) | null = null\n\n  render() {\n    return html`\n      ${this.titler ? html` <div titler class=\"md-typescale-title-large\">${this.titler}</div> ` : nothing}\n      <div content class=\"${this.type || 'info'} md-typescale-body-large\">\n        ${this.icon || this.type\n          ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `\n          : nothing}\n        ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n        <slot> </slot>\n        ${this.footer ? html` <div footer class=\"md-typescale-body-large\">${this.footer}</div> ` : nothing}\n      </div>\n      <div buttons>\n        ${this.confirmButton\n          ? html`\n              <md-filled-button id=\"confirm\" type=\"button\" @click=${(e: Event) => this.onConfirm()}\n                >${this.confirmButton?.text}</md-filled-button\n              >\n            `\n          : nothing}\n        ${this.cancelButton\n          ? html`\n              <md-outlined-button id=\"cancel\" type=\"button\" @click=${(e: Event) => this.onCancel()}\n                >${this.cancelButton?.text}</md-outlined-button\n              >\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  resolve(result: boolean) {\n    if (this.resolveFn) {\n      this.resolveFn(result)\n      this.resolveFn = null\n    }\n  }\n\n  /**\n   * Function called when the confirm button is clicked.\n   */\n  onConfirm() {\n    this.resolve(true)\n    this.close()\n  }\n\n  /**\n   * Function called when the cancel button is clicked.\n   */\n  onCancel() {\n    this.resolve(false)\n    this.close()\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPrompt, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */\n      // @ts-ignore for debug\n      if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n        return\n      }\n\n      this.resolve(false)\n      this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.resolve(false)\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    // @ts-ignore for debug\n    if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n      return\n    }\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Static method to open the `ox-prompt` popup.\n   * @param {object} options - An object containing popup options.\n   * @param {unknown} [options.template] - An optional content template to render inside the popup.\n   * @param {'success' | 'error' | 'warning' | 'info' | 'question'} [options.type] - The type of the popup, which can be one of: 'success', 'error', 'warning', 'info', 'question'.\n   * @param {string} [options.icon] - The icon to be displayed in the popup header.\n   * @param {string} [options.title] - The title to be displayed in the popup header.\n   * @param {string} [options.text] - The main text content of the popup.\n   * @param {string} [options.footer] - Additional information to be displayed at the bottom of the popup.\n   * @param {object} [options.confirmButton] - Configuration for the confirmation button in the popup.\n   * @param {string} options.confirmButton.text - The text to be displayed on the confirmation button.\n   * @param {string} [options.confirmButton.color] - The color of the confirmation button (CSS color).\n   * @param {object} [options.cancelButton] - Configuration for the cancel button in the popup.\n   * @param {string} options.cancelButton.text - The text to be displayed on the cancel button.\n   * @param {string} [options.cancelButton.color] - The color of the cancel button (CSS color).\n   * @param {number} [options.top] - The top position of the popup (in pixels).\n   * @param {number} [options.left] - The left position of the popup (in pixels).\n   * @param {number} [options.right] - The right position of the popup (in pixels).\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels).\n   * @param {string} [options.width] - The maximum width of the popup (CSS string).\n   * @param {string} [options.height] - The maximum height of the popup (CSS string).\n   * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.\n   * @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).\n   * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  public static async open({\n    template,\n    type,\n    icon,\n    title,\n    text,\n    footer,\n    confirmButton,\n    cancelButton,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    preventCloseOnBlur,\n    callback\n  }: {\n    template?: unknown\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: string\n    title?: string\n    text?: string\n    footer?: string\n    confirmButton?: { text: string; color?: string }\n    cancelButton?: { text: string; color?: string }\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    preventCloseOnBlur?: boolean\n    callback?: (result: { value: boolean }) => void\n  }): Promise<boolean> {\n    const owner = parent || document.body\n    const target = document.createElement('ox-prompt') as OxPrompt\n\n    target.type = type\n    target.icon = icon\n    target.text = text\n    target.titler = title\n    target.footer = footer\n    target.confirmButton = confirmButton\n    target.cancelButton = cancelButton\n    target.preventCloseOnBlur = !!preventCloseOnBlur\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    const result = await target.open({ top, left, right, bottom, width, height })\n\n    if (callback) {\n      await callback.call(null, { value: result })\n    }\n\n    return result\n  }\n\n  /**\n   * Opens the popup with specified position and dimensions.\n   * @param {object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} [options.left] - The left position of the popup (in pixels). If not provided, the popup will be horizontally centered.\n   * @param {number} [options.top] - The top position of the popup (in pixels). If not provided, the popup will be vertically centered.\n   * @param {number} [options.right] - The right position of the popup (in pixels). Overrides 'left' if both 'left' and 'right' are provided.\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels). Overrides 'top' if both 'top' and 'bottom' are provided.\n   * @param {string} [options.width] - The maximum width of the popup (CSS string). If not provided, no width restriction is applied.\n   * @param {string} [options.height] - The maximum height of the popup (CSS string). If not provided, no height restriction is applied.\n   * @param {boolean} [options.silent=false] - Determines whether to focus the popup automatically (true) or not (false).\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n  }): Promise<boolean> {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.left = '50%'\n      this.style.top = '50%'\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n    } else {\n      if (left !== undefined) this.style.left = `${left}px`\n      if (top !== undefined) this.style.top = `${top}px`\n      if (right !== undefined) this.style.right = `${right}px`\n      if (bottom !== undefined) this.style.bottom = `${bottom}px`\n    }\n\n    this.setAttribute('active', '')\n\n    // adjust popup position\n    requestAnimationFrame(() => {\n      const vh = document.body.clientHeight\n      const vw = document.body.clientWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = `calc(${computedStyle.top} + ${t}px)`\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)`\n        this.style.bottom = ''\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} + ${l}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)`\n        this.style.right = ''\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n\n    return new Promise(resolve => {\n      this.resolveFn = resolve\n    })\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the popup.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the popup is opened by OxPrompt.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this._parent.removeChild(this)\n      delete this._parent\n    }\n  }\n}\n"]}

package/dist/stories/open-popup.stories.js

@@ -1,7 +1,7 @@
 import '@material/web/all.js';
 import { html } from 'lit';
-import { openPopup } from '../src/open-popup';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { openPopup } from '../src/open-popup.js';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'openPopup',
     component: 'ox-popup',

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

@@ -1 +1 @@
-{"version":3,"file":"open-popup.stories.js","sourceRoot":"","sources":["../../stories/open-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAgB,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QACpE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAA;AAkBD,SAAS,KAAK,CAAC,CAAa,EAAE,OAAqB;IACjD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,SAAS,CAAC,IAAI,CAAA,YAAY,OAAO,KAAK,EAAE,OAAO,CAAC,CAAA;AACzD,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;aAgBlB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;;;CAKvG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,EAAE;CACT,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { openPopup, PopupOptions } from '../src/open-popup'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'openPopup',\n  component: 'ox-popup',\n  argTypes: {\n    title: { constol: 'string' },\n    size: { control: 'select', options: ['large', 'medium', 'small'] },\n    hovering: { control: 'select', options: ['center', 'next', 'edge'] },\n    closable: { control: 'boolean' },\n    escapable: { control: 'boolean' },\n    backdrop: { control: 'boolean' },\n    help: { constol: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title: string\n  size: 'large' | 'medium' | 'small'\n  hovering: 'center' | 'next' | 'edge'\n  closable: boolean\n  escapable: boolean\n  backdrop: boolean\n  help: string\n}\n\nfunction popup(e: MouseEvent, options: PopupOptions) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  return openPopup(html`<img src=${noImage} />`, options)\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = '',\n  size = 'medium',\n  hovering = 'center',\n  closable,\n  escapable,\n  backdrop,\n  help\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div\n    id=\"place\"\n    @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}\n    class=\"md-typescale-display-medium\"\n  >\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  title: 'Regular popup',\n  size: 'medium',\n  hovering: 'center',\n  closable: true,\n  escapable: true,\n  backdrop: true,\n  help: ''\n}\n"]}
+{"version":3,"file":"open-popup.stories.js","sourceRoot":"","sources":["../../stories/open-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAgB,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QACpE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAA;AAkBD,SAAS,KAAK,CAAC,CAAa,EAAE,OAAqB;IACjD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,SAAS,CAAC,IAAI,CAAA,YAAY,OAAO,KAAK,EAAE,OAAO,CAAC,CAAA;AACzD,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;aAgBlB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;;;CAKvG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,EAAE;CACT,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { openPopup, PopupOptions } from '../src/open-popup.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'openPopup',\n  component: 'ox-popup',\n  argTypes: {\n    title: { constol: 'string' },\n    size: { control: 'select', options: ['large', 'medium', 'small'] },\n    hovering: { control: 'select', options: ['center', 'next', 'edge'] },\n    closable: { control: 'boolean' },\n    escapable: { control: 'boolean' },\n    backdrop: { control: 'boolean' },\n    help: { constol: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title: string\n  size: 'large' | 'medium' | 'small'\n  hovering: 'center' | 'next' | 'edge'\n  closable: boolean\n  escapable: boolean\n  backdrop: boolean\n  help: string\n}\n\nfunction popup(e: MouseEvent, options: PopupOptions) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  return openPopup(html`<img src=${noImage} />`, options)\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = '',\n  size = 'medium',\n  hovering = 'center',\n  closable,\n  escapable,\n  backdrop,\n  help\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div\n    id=\"place\"\n    @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}\n    class=\"md-typescale-display-medium\"\n  >\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  title: 'Regular popup',\n  size: 'medium',\n  hovering: 'center',\n  closable: true,\n  escapable: true,\n  backdrop: true,\n  help: ''\n}\n"]}

package/dist/stories/ox-popup-list-sortable.stories.js

@@ -3,7 +3,7 @@ import '@material/web/button/outlined-button.js';
 import '@operato/input/ox-checkbox.js';
 import '../src/ox-popup-list.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'sortable OxPopupList',
     component: 'ox-popup-list',

package/dist/stories/ox-popup-list-sortable.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,IAAI;KACb;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;CACF,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCA6EI,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;kBAI5C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;kBAC7C,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAC,UAAU,EAAG,CAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AACpG,CAAC;;;iCAGwB,kBAAkB;;;UAGzC,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;iDACyB,CAAC,MAAM,CAAC,MAAM,UAAU,MAAM,CAAC,IAAI,aAAa,MAAM,CAAC,IAAI;OACrG,CACE;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/outlined-button.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'sortable OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst columns = [\n  {\n    name: 'AAAAAA',\n    hidden: false\n  },\n  {\n    name: 'BBBBBB',\n    hidden: true\n  },\n  {\n    name: 'CCCCCC',\n    hidden: false\n  },\n  {\n    name: 'DDDDDD',\n    hidden: false\n  },\n  {\n    name: 'EEEEEE',\n    hidden: false\n  },\n  {\n    name: 'FFFFFF',\n    hidden: false\n  },\n  {\n    name: 'GGGGGG',\n    hidden: false\n  },\n  {\n    name: 'HHHHHH',\n    hidden: false\n  },\n  {\n    name: 'IIIIII',\n    hidden: false\n  },\n  {\n    name: 'JJJJJJ',\n    hidden: false\n  },\n  {\n    name: 'KKKKKK',\n    hidden: false\n  },\n  {\n    name: 'LLLLLL',\n    hidden: false\n  },\n  {\n    name: 'MMMMMM',\n    hidden: false\n  }\n]\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      position: relative;\n      width: 100%;\n      height: 100px;\n      background: lightgreen;\n      text-align: center;\n      line-height: 100px;\n      padding: 20px;\n      margin: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    #place-child {\n      position: relative;\n      display: block;\n      width: 100%;\n      height: 100%;\n      background-color: var(--md-sys-color-primary);\n      color: var(--md-sys-color-on-primary);\n    }\n\n    ox-popup-list {\n      width: 240px;\n      max-height: 240px;\n      overflow: hidden;\n    }\n\n    [titler] {\n      --md-icon-size: 1.2em;\n      --md-outlined-button-container-height: 24px;\n      --md-outlined-button-container-shape: 4px;\n      --md-outlined-button-leading-space: 4px;\n      --md-outlined-button-trailing-space: 4px;\n\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-transform: capitalize;\n    }\n\n    md-outlined-button {\n      margin-left: auto;\n    }\n\n    [option] {\n      position: relative; /* 상대 위치 설정 */\n      cursor: move; /* 커서를 이동 가능 표시로 변경 */\n      user-select: none;\n    }\n\n    [option]::after {\n      content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */\n      position: absolute; /* 절대 위치 설정 */\n      top: 0; /* 위에서부터 10px */\n      right: 10px; /* 오른쪽에서부터 10px */\n      font-size: 20px; /* 폰트 크기 설정 */\n      color: #888; /* 폰트 색상 설정 */\n    }\n\n    div[overlay] {\n      display: block;\n      width: 300px;\n      height: 300px;\n      left: 100px;\n      top: 100px;\n      z-index: 10000;\n      background-color: var(--md-sys-color-surface);\n    }\n  </style>\n\n  <div id=\"place\">\n    <div id=\"place-child\" @click=${(e: MouseEvent) => popup(e)}>\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        @sorted=${(e: Event) => {\n          console.log('sorted\\n', (e as CustomEvent).detail.map((element: any) => element.value).join('\\n'))\n        }}\n        multiple\n        sortable\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div slot=\"header\" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>\n        ${columns.map(\n          column => html`\n        <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>\n      `\n        )}\n      </ox-popup-list>\n    </div>\n  </div>\n  <div overlay>OVERLAYED</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,IAAI;KACb;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;CACF,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCA6EI,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;kBAI5C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;kBAC7C,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAC,UAAU,EAAG,CAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AACpG,CAAC;;;iCAGwB,kBAAkB;;;UAGzC,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;iDACyB,CAAC,MAAM,CAAC,MAAM,UAAU,MAAM,CAAC,IAAI,aAAa,MAAM,CAAC,IAAI;OACrG,CACE;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/outlined-button.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'sortable OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst columns = [\n  {\n    name: 'AAAAAA',\n    hidden: false\n  },\n  {\n    name: 'BBBBBB',\n    hidden: true\n  },\n  {\n    name: 'CCCCCC',\n    hidden: false\n  },\n  {\n    name: 'DDDDDD',\n    hidden: false\n  },\n  {\n    name: 'EEEEEE',\n    hidden: false\n  },\n  {\n    name: 'FFFFFF',\n    hidden: false\n  },\n  {\n    name: 'GGGGGG',\n    hidden: false\n  },\n  {\n    name: 'HHHHHH',\n    hidden: false\n  },\n  {\n    name: 'IIIIII',\n    hidden: false\n  },\n  {\n    name: 'JJJJJJ',\n    hidden: false\n  },\n  {\n    name: 'KKKKKK',\n    hidden: false\n  },\n  {\n    name: 'LLLLLL',\n    hidden: false\n  },\n  {\n    name: 'MMMMMM',\n    hidden: false\n  }\n]\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      position: relative;\n      width: 100%;\n      height: 100px;\n      background: lightgreen;\n      text-align: center;\n      line-height: 100px;\n      padding: 20px;\n      margin: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    #place-child {\n      position: relative;\n      display: block;\n      width: 100%;\n      height: 100%;\n      background-color: var(--md-sys-color-primary);\n      color: var(--md-sys-color-on-primary);\n    }\n\n    ox-popup-list {\n      width: 240px;\n      max-height: 240px;\n      overflow: hidden;\n    }\n\n    [titler] {\n      --md-icon-size: 1.2em;\n      --md-outlined-button-container-height: 24px;\n      --md-outlined-button-container-shape: 4px;\n      --md-outlined-button-leading-space: 4px;\n      --md-outlined-button-trailing-space: 4px;\n\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-transform: capitalize;\n    }\n\n    md-outlined-button {\n      margin-left: auto;\n    }\n\n    [option] {\n      position: relative; /* 상대 위치 설정 */\n      cursor: move; /* 커서를 이동 가능 표시로 변경 */\n      user-select: none;\n    }\n\n    [option]::after {\n      content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */\n      position: absolute; /* 절대 위치 설정 */\n      top: 0; /* 위에서부터 10px */\n      right: 10px; /* 오른쪽에서부터 10px */\n      font-size: 20px; /* 폰트 크기 설정 */\n      color: #888; /* 폰트 색상 설정 */\n    }\n\n    div[overlay] {\n      display: block;\n      width: 300px;\n      height: 300px;\n      left: 100px;\n      top: 100px;\n      z-index: 10000;\n      background-color: var(--md-sys-color-surface);\n    }\n  </style>\n\n  <div id=\"place\">\n    <div id=\"place-child\" @click=${(e: MouseEvent) => popup(e)}>\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        @sorted=${(e: Event) => {\n          console.log('sorted\\n', (e as CustomEvent).detail.map((element: any) => element.value).join('\\n'))\n        }}\n        multiple\n        sortable\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div slot=\"header\" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>\n        ${columns.map(\n          column => html`\n        <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>\n      `\n        )}\n      </ox-popup-list>\n    </div>\n  </div>\n  <div overlay>OVERLAYED</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-popup-list.stories.js

@@ -2,7 +2,7 @@ import '@material/web/all.js';
 import '@operato/input/ox-checkbox.js';
 import '../src/ox-popup-list.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'OxPopupList',
     component: 'ox-popup-list',

package/dist/stories/ox-popup-list.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoBlD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div option>Plain Text</div>\n\n        <div option>\n          <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n        </div>\n\n        <div option>\n          <input id=\"checkbox-01\" type=\"checkbox\" />\n          <label for=\"checkbox-01\">custom option</label>\n        </div>\n\n        <div option>\n          <label for=\"text-01\">value</label>\n          <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n        </div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}
+{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoBlD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div option>Plain Text</div>\n\n        <div option>\n          <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n        </div>\n\n        <div option>\n          <input id=\"checkbox-01\" type=\"checkbox\" />\n          <label for=\"checkbox-01\">custom option</label>\n        </div>\n\n        <div option>\n          <label for=\"text-01\">value</label>\n          <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n        </div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

package/dist/stories/ox-popup-menu.stories.js

@@ -3,7 +3,7 @@ import '@operato/input/ox-checkbox.js';
 import '../src/ox-popup-menu.js';
 import '../src/ox-popup-menuitem.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { OxPopupMenu } from '../src/ox-popup-menu.js';
 export default {
     title: 'OxPopuMenu',