npm - @operato/popup - Versions diffs - 2.0.0-alpha.142 → 2.0.0-alpha.148 - Mend

@operato/popup 2.0.0-alpha.142 → 2.0.0-alpha.148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/CHANGELOG.md +25 -0
package/dist/src/ox-floating-overlay.js +19 -14
package/dist/src/ox-floating-overlay.js.map +1 -1
package/dist/src/ox-popup-list.js +20 -16
package/dist/src/ox-popup-list.js.map +1 -1
package/dist/src/ox-popup-menu.js +21 -16
package/dist/src/ox-popup-menu.js.map +1 -1
package/dist/src/ox-popup-menuitem.js +5 -5
package/dist/src/ox-popup-menuitem.js.map +1 -1
package/dist/src/ox-popup.js +2 -1
package/dist/src/ox-popup.js.map +1 -1
package/dist/src/ox-prompt.js +55 -26
package/dist/src/ox-prompt.js.map +1 -1
package/dist/stories/open-popup.stories.d.ts +6 -0
package/dist/stories/open-popup.stories.js +26 -6
package/dist/stories/open-popup.stories.js.map +1 -1
package/dist/stories/ox-popup-list.stories.d.ts +8 -2
package/dist/stories/ox-popup-list.stories.js +52 -32
package/dist/stories/ox-popup-list.stories.js.map +1 -1
package/dist/stories/ox-popup-menu.stories.d.ts +8 -2
package/dist/stories/ox-popup-menu.stories.js +26 -7
package/dist/stories/ox-popup-menu.stories.js.map +1 -1
package/dist/stories/ox-popup.stories.d.ts +8 -1
package/dist/stories/ox-popup.stories.js +47 -13
package/dist/stories/ox-popup.stories.js.map +1 -1
package/dist/stories/ox-prompt-icon.stories.d.ts +6 -0
package/dist/stories/ox-prompt-icon.stories.js +24 -9
package/dist/stories/ox-prompt-icon.stories.js.map +1 -1
package/dist/stories/ox-prompt-normal.stories.d.ts +8 -1
package/dist/stories/ox-prompt-normal.stories.js +25 -7
package/dist/stories/ox-prompt-normal.stories.js.map +1 -1
package/dist/stories/ox-prompt.stories.d.ts +7 -1
package/dist/stories/ox-prompt.stories.js +24 -7
package/dist/stories/ox-prompt.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +4 -4
package/src/ox-floating-overlay.ts +19 -14
package/src/ox-popup-list.ts +20 -16
package/src/ox-popup-menu.ts +21 -16
package/src/ox-popup-menuitem.ts +5 -5
package/src/ox-popup.ts +2 -1
package/src/ox-prompt.ts +55 -26
package/stories/open-popup.stories.ts +28 -6
package/stories/ox-popup-list.stories.ts +55 -34
package/stories/ox-popup-menu.stories.ts +29 -8
package/stories/ox-popup.stories.ts +51 -16
package/stories/ox-prompt-icon.stories.ts +30 -9
package/stories/ox-prompt-normal.stories.ts +28 -8
package/stories/ox-prompt.stories.ts +28 -8
package/themes/dark-hc.css +151 -0
package/themes/dark-mc.css +151 -0
package/themes/dark.css +151 -0
package/themes/grist-theme.css +169 -0
package/themes/light-hc.css +151 -0
package/themes/light-mc.css +151 -0
package/themes/light.css +151 -0
package/themes/md-typescale-styles.css +100 -0
package/themes/spacing.css +43 -0
package/themes/state-color.css +6 -0
package/themes/app-theme.css +0 -145
package/themes/input-theme.css +0 -19
package/themes/material-theme.css +0 -88

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
+### :rocket: New Features
+* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
+* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
+### :sparkles: Styling
+* list, grid, card ([773b57c](https://github.com/hatiolab/operato/commit/773b57c8f85536ddfc2bd883f0209341c0ff2a0b))
+* popup ([f881e3b](https://github.com/hatiolab/operato/commit/f881e3b1b70acd957a4ba5565bc0b90f0ef18d00))
+* themes update, ox-buttons-radio, ox-checkbo ([0da66c4](https://github.com/hatiolab/operato/commit/0da66c47f053ee6675a247d6968ceaf818f06ad3))
+## [2.0.0-alpha.145](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.144...v2.0.0-alpha.145) (2024-05-28)
+**Note:** Version bump only for package @operato/popup
 ## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
 **Note:** Version bump only for package @operato/popup

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

@@ -273,6 +273,7 @@ OxFloatingOverlay.styles = [
       :host {
         position: relative;
         z-index: var(--z-index, 10);
+        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
       }
       :host([hovering='edge']) {
@@ -289,7 +290,8 @@ OxFloatingOverlay.styles = [
         height: 100vh;
         height: 100dvh;
-        background-color: var(--overlay-background-color);
+        background-color: var(--md-sys-color-primary);
+        opacity:.2
       }
       [overlayed] {
@@ -298,7 +300,8 @@ OxFloatingOverlay.styles = [
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        background: transparent;
+        background: var(--md-sys-color-on-primary);
+        border-radius:var(--md-sys-shape-corner-medium);
       }
       [overlayed][hovering='center'] {
@@ -332,8 +335,8 @@ OxFloatingOverlay.styles = [
       }
       [header] {
-        --help-icon-color: #fff;
-        --help-icon-hover-color: #fff;
+        --help-icon-color:var(--md-sys-color-on-primary);
+        --help-icon-hover-color:var(--md-sys-color-on-primary);
         pointer-events: initial;
       }
@@ -420,9 +423,9 @@ OxFloatingOverlay.styles = [
         display: flex;
         flex-direction: row;
         align-items: center;
-        background-color: var(--overlay-header-background-color);
-        color: var(--overlay-header-color);
+        background-color:var(--md-sys-color-primary-container);
+        font-weight:var(--md-sys-typescale-label-large-weight);
+        color:var(--md-sys-color-primary)
       }
       slot[name='header'] {
@@ -432,6 +435,7 @@ OxFloatingOverlay.styles = [
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        text-transform: capitalize;
       }
       [name='header']::slotted(*) {
@@ -439,18 +443,18 @@ OxFloatingOverlay.styles = [
       }
       [name='header'] > h1 {
-        text-transform: capitalize;
-        font: var(--overlay-header-font);
+        font-size:var(--md-sys-typescale-label-large-size);
       }
       [historyback] {
-        margin-left: 10px;
+        margin-left: var(--spacing-medium);
         margin-right: auto;
       }
       [close] {
         margin-left: auto;
-        margin-right: 10px;
+        margin-right: var(--spacing-medium);
       }
       [historyback],
@@ -460,10 +464,11 @@ OxFloatingOverlay.styles = [
       [closable][close] {
         display: block;
+        cursor:pointer;
       }
       [search] ox-help-icon {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
       }
       [search] {
@@ -472,10 +477,10 @@ OxFloatingOverlay.styles = [
         align-items: center;
         align-self: center;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         background-color: var(--opacity-light-color);
         border-radius: 999em;
-        padding: 0 10px;
+        padding: 0 var(--spacing-medium);
       }
       [search] > * {

package/dist/src/ox-floating-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,SAAS,QAAQ,CAAC,CAAQ;;IACxB,IAAK,CAAgB,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QAClC,OAAO;YACL,CAAC,EAAG,CAAgB,CAAC,OAAO;YAC5B,CAAC,EAAG,CAAgB,CAAC,OAAO;SAC7B,CAAA;IACH,CAAC;SAAM,IAAI,CAAA,MAAC,CAAgB,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,EAAE,CAAC;QAClD,MAAM,KAAK,GAAI,CAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAC1C,OAAO;YACL,CAAC,EAAE,KAAK,CAAC,OAAO;YAChB,CAAC,EAAE,KAAK,CAAC,OAAO;SACjB,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAM;IACR,CAAC;AACH,CAAC;AAED;;;;GAIG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAqOL;;;WAGG;QAC0B,aAAQ,GAAa,KAAK,CAAA;QA0BvD;;;WAGG;QACyB,UAAK,GAAW,EAAE,CAAA;QAE9C;;;WAGG;QAC0B,aAAQ,GAAa,KAAK,CAAA;QAcvD;;;WAGG;QAC0B,eAAU,GAAa,KAAK,CAAA;QAEzD;;;WAGG;QAC0B,YAAO,GAAa,KAAK,CAAA;QAyB9C,mBAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC3D,oBAAe,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;IAkPvE,CAAC;IA7OC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAA;QAExE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,GAAG,EAAE,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAK,EAAU,CAAA;QAC7G,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,IAAK,EAAU,CAAA;QAE7D,MAAM,UAAU,GAAG,OAAO,aAAa,IAAI,UAAU,CAAA;QACrD,MAAM,UAAU,GAAG,OAAO,aAAa,IAAI,UAAU,CAAA;QAErD,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;;wBAGU,CAAC,IAAI,CAAC,QAAQ;uBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC;;WAE5D;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;mBAIG,IAAI,CAAC,QAAQ,IAAI,QAAQ;oBACxB,SAAS,CAAC,SAAS,CAAC;eACzB,IAAI,CAAC,IAAI,IAAI,QAAQ;yBACX,CAAC,CAAQ,EAAE,EAAE;YAC5B,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACjB,CAAC;2BACkB,CAAC,CAAQ,EAAE,EAAE;YAC9B,yCAAyC;YACzC,CAAC;YAAC,CAAC,CAAC,MAAsB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QACvD,CAAC;yBACgB,CAAC,CAAQ,EAAE,EAAE;YAC5B,CAAC;YAAC,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QACxD,CAAC;iBACQ,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YACpC,CAAC;QACH,CAAC;;;;uBAIc,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;wBAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;;4BAGvB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;YACxE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;cAE7D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAA;;sBAEE,IAAI,CAAC,KAAK,IAAI,EAAE,SAAS,IAAI,CAAC,IAAI;gBAClC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,IAAI,kBAAkB;gBACzD,CAAC,CAAC,IAAI,CAAA,EAAE;;iBAEb;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;cACR,UAAU,IAAI,UAAU;YACxB,CAAC,CAAC,IAAI,CAAA;;sBAEE,UAAU;gBACV,CAAC,CAAC,IAAI,CAAA;yCACa,WAAW;mCACjB,KAAK,IAAI,EAAE;uCACP,SAAS;oCACZ,CAAC,CAAQ,EAAE,EAAE;oBACrB,aAAa,CAAC,IAAI,CAAC,iBAAiB,EAAG,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC,CAAA;gBAChE,CAAC;4CACiB;gBACtB,CAAC,CAAC,IAAI,CAAA,EAAE;sBACR,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;sBAC1F,UAAU;gBACV,CAAC,CAAC,IAAI,CAAA,mBAAmB,CAAC,CAAa,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB;gBAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;iBAEb;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;cACR,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe;YACvD,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,IAAI,kBAAkB;YACzD,CAAC,CAAC,IAAI,CAAA,EAAE;;4BAEM,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;;;;;;KAO/E,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACjE,IAAI,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAA;YACrC,IAAI,QAAQ,EAAE,CAAC;gBACb,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBACzC,YAAY;oBACZ,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAA;gBAChD,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QAC1D,CAAC;QAED,qBAAqB,CAAC,GAAG,EAAE;;YACzB,sDAAsD;YACtD,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAChD,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAA;QAElD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YACzD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAC1D,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAC7D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;YAC5D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC9D,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CACH,CAAA;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;YAC7D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;YACjE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAgB,CAAC,CAAA;YAChE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAgB,CAAC,CAAA;QAClE,CAAC;QAED,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzB,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAQ;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,OAAO,KAAK,CAAA;QACd,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,KAAK,CAAA;QACd,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,SAAS,GAAG,KAAK,CAAA;QACvB,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAA;QAEpB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;QACrB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;QAErB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;QAE1B,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAEhC,IAAI,YAAY,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAA;QAEpD,SAAS,CAAC,KAAK,CAAC,IAAI;YAClB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;QAC9G,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;QAEzG,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;QAErC,OAAO,KAAK,CAAA;IACd,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnC,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAElB,OAAO,IAAI,CAAC,SAAS,CAAA;QACvB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,KAAK;;QACH,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC;IAED,OAAO,CAAC,CAAQ,EAAE,MAAgB;QAChC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,qEAAqE;QAErE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;YACzB,IAAI,OAAO,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAA;YAEnC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC3C,OAAM;YACR,CAAC;YAED,mFAAmF;YACnF,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBACjC,OAAO,IAAI,CAAA;YACb,CAAC;YAED,OAAO,CAAC,IAAI,EAAE,CAAA;QAChB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;;AA/iBM,wBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiJF;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6EF;CACF,AAlOY,CAkOZ;AAM4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAA2B;AAM3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA6C;AAM7B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAsC;AAMpD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoC;AAMnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AAMb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AAMjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAA2B;AAM3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAwB;AAMvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAU;AAMR;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA6B;AAM5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA0B;AAM1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAI1B;AAM2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA+C;AAMxB;IAAjD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;iDAAgB;AAM3C;IAArB,KAAK,CAAC,aAAa,CAAC;oDAA2B;AAC5B;IAAnB,KAAK,CAAC,WAAW,CAAC;kDAAyB;AAlUjC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAijB7B","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isHandheldDevice } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } \| undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n/*\n Custom element for creating floating overlays.\n * These overlays can have various properties like direction, size, title, and more.\n * They are often used for modal dialogs, pop-ups, and similar UI elements.\n /\n@customElement('ox-floating-overlay')\nexport class OxFloatingOverlay extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n / for layout style /\n :host {\n position: relative;\n z-index: var(--z-index, 10);\n }\n\n :host([hovering='edge']) {\n / edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. /\n position: initial;\n }\n\n #backdrop {\n position: fixed;\n left: 0;\n top: 0;\n\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n\n background-color: var(--overlay-background-color);\n }\n\n [overlayed] {\n position: absolute;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: transparent;\n }\n\n [overlayed][hovering='center'] {\n position: fixed;\n\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n opacity: 0;\n }\n\n [overlayed][hovering='center'][opened] {\n opacity: 1;\n transition: opacity 0.3s ease-in;\n }\n\n [hovering='center'] {\n width: var(--overlay-center-normal-width, 60%);\n height: var(--overlay-center-normal-height, 60%);\n }\n\n [hovering='center'][size='small'] {\n width: var(--overlay-center-small-width, 40%);\n height: var(--overlay-center-small-height, 40%);\n }\n\n [hovering='center'][size='large'] {\n width: var(--overlay-center-large-width, 100%);\n height: var(--overlay-center-large-height, 100%);\n }\n\n [header] {\n --help-icon-color: #fff;\n --help-icon-hover-color: #fff;\n\n pointer-events: initial;\n }\n\n [content] {\n flex: 1;\n overflow: hidden;\n }\n\n ::slotted() {\n box-sizing: border-box;\n pointer-events: initial;\n }\n\n [hovering='center'] [content] ::slotted() {\n width: 100%;\n height: 100%;\n }\n [direction='up'],\n [direction='down'] {\n width: 100%;\n\n max-height: 0;\n transition: max-height 0.7s ease-in;\n }\n [direction='up'] {\n bottom: 0;\n }\n [direction='down'] {\n top: 0;\n }\n\n [direction='up'][opened],\n [direction='down'][opened] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [settled][direction='down'] [content],\n [settled][direction='up'] [content] {\n overflow-y: auto;\n }\n\n [direction='left'],\n [direction='right'] {\n height: 100%;\n\n max-width: 0;\n transition: max-width 0.5s ease-in;\n }\n [direction='left'] {\n right: 0;\n }\n [direction='right'] {\n left: 0;\n }\n\n [direction='left'][opened],\n [direction='right'][opened] {\n max-width: 100vw;\n }\n\n [settled][direction='left'] [content],\n [settled][direction='right'] [content] {\n overflow-x: auto;\n }\n\n @media screen and (max-width: 460px) {\n [direction='up'],\n [direction='down'] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [direction='left'],\n [direction='right'] {\n max-width: 100vw;\n }\n }\n `,\n css`\n / for header style /\n [header] {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n background-color: var(--overlay-header-background-color);\n color: var(--overlay-header-color);\n }\n\n slot[name='header'] {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n\n [name='header']::slotted() {\n margin: 0 auto;\n }\n\n [name='header'] > h1 {\n text-transform: capitalize;\n font: var(--overlay-header-font);\n }\n\n [historyback] {\n margin-left: 10px;\n margin-right: auto;\n }\n\n [close] {\n margin-left: auto;\n margin-right: 10px;\n }\n\n [historyback],\n [close] {\n display: none;\n }\n\n [closable][close] {\n display: block;\n }\n\n [search] ox-help-icon {\n color: var(--secondary-color);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--secondary-color);\n background-color: var(--opacity-light-color);\n border-radius: 999em;\n padding: 0 10px;\n }\n\n [search] > * {\n align-self: center;\n }\n\n @media screen and (max-width: 460px) {\n [closable][historyback] {\n display: block;\n }\n\n [closable][close] {\n display: none;\n }\n }\n `\n ]\n\n /*\n A boolean property that determines whether a backdrop should be displayed behind the overlay.\n * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.\n /\n @property({ type: Boolean }) backdrop?: boolean = false\n\n /\n A string property that specifies the direction in which the overlay should appear.\n * Possible values are: 'up', 'down', 'left', or 'right'.\n /\n @property({ type: String }) direction?: 'up' \| 'down' \| 'left' \| 'right'\n\n /\n A string property that reflects the hovering state of the overlay.\n * Possible values are: 'center', 'edge', or 'next'.\n /\n @property({ type: String, reflect: true }) hovering?: 'center' \| 'edge' \| 'next'\n\n /\n A string property that specifies the size of the overlay.\n * Possible values are: 'small', 'medium', or 'large'.\n /\n @property({ type: String }) size?: 'small' \| 'medium' \| 'large'\n\n /\n A string property that represents the name of the overlay.\n * This can be used for identification or other purposes.\n /\n @property({ type: String }) name?: string\n\n /\n A string property that sets the title of the overlay.\n * The title is typically displayed in the header of the overlay.\n /\n @property({ type: String }) title: string = ''\n\n /\n A boolean property that determines whether the overlay can be closed by the user.\n * If set to true, a close button will be displayed in the header.\n /\n @property({ type: Boolean }) closable?: boolean = false\n\n /\n An object property that can hold custom properties for the template of the overlay.\n * These properties can be used to customize the template's behavior.\n /\n @property({ type: Object }) templateProperties: any\n\n /\n An object property that can hold information related to help or assistance for the overlay.\n * This information may be used to provide additional guidance to users.\n /\n @property({ type: Object }) help: any\n\n /\n A boolean property that determines whether the overlay is considered historical.\n * Historical overlays may have specific behavior or interactions, such as navigating back in history.\n /\n @property({ type: Boolean }) historical?: boolean = false\n\n /\n A boolean property that determines whether the overlay can be moved by dragging.\n * If set to true, the overlay can be repositioned by dragging its header.\n /\n @property({ type: Boolean }) movable?: boolean = false\n\n /\n An object property that can hold information related to a search feature within the overlay.\n * It can include properties like 'value', 'handler', and 'placeholder'.\n /\n @property({ type: Object }) search?: {\n value?: string\n handler?: (instance: any, value: string) => void\n placeholder?: string\n }\n\n /\n An object property that can hold information related to a filter feature within the overlay.\n * It can include a 'handler' function for filtering content.\n /\n @property({ type: Object }) filter?: { handler?: (instance: any) => void }\n\n /\n A numeric property that specifies the z-index of the overlay.\n * The z-index determines the stacking order of the overlay in relation to other elements on the page.\n /\n @property({ type: Number, attribute: 'z-index' }) zIndex?: number\n\n private dragStart?: { x: number; y: number }\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n @query('[overlayed]') overlayed!: HTMLDivElement\n @query('[content]') content!: HTMLDivElement\n\n render() {\n const direction = this.hovering == 'center' ? undefined : this.direction\n\n const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search \|\| ({} as any)\n const { handler: filterHandler } = this.filter \|\| ({} as any)\n\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n return html`\n ${Boolean(this.backdrop)\n ? html`\n <div\n id=\"backdrop\"\n ?hidden=${!this.backdrop}\n @click=${(e: Event) => this.onClose(e, true / escape /)}\n ></div>\n `\n : html``}\n\n <div\n overlayed\n hovering=${this.hovering \|\| 'center'}\n direction=${ifDefined(direction)}\n size=${this.size \|\| 'medium'}\n @close-overlay=${(e: Event) => {\n e.stopPropagation()\n this.onClose(e)\n }}\n @transitionstart=${(e: Event) => {\n / to hide scrollbar during transition /\n ;(e.target as HTMLElement).removeAttribute('settled')\n }}\n @transitionend=${(e: Event) => {\n ;(e.target as HTMLElement).setAttribute('settled', '')\n }}\n @click=${(e: MouseEvent) => {\n if (this.backdrop && e.target === this.content) {\n this.onClose(e, true / escape /)\n }\n }}\n >\n <div\n header\n @mousedown=${this.onDragStart.bind(this)}\n @touchstart=${this.onDragStart.bind(this)}\n draggable=\"false\"\n >\n <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>\n ${this.movable ? html`<md-icon>drag_indicator</md-icon>` : html``}\n <slot name=\"header\">\n ${this.title \|\| this.closable\n ? html`\n <h1>\n ${this.title \|\| ''} ${this.help\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </h1>\n `\n : html``}\n ${searchable \|\| filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value \|\| ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler(this.firstElementChild, (e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${this.help && searchable ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>` : html``}\n ${filterable\n ? html`<md-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}>tune</md-icon>`\n : html``}\n </div>\n `\n : html``}\n ${this.help && !searchable && !this.title / help only /\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </slot>\n <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>\n </div>\n\n <div content>\n <slot> </slot>\n </div>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('templateProperties') && this.templateProperties) {\n var template = this.firstElementChild\n if (template) {\n for (let prop in this.templateProperties) {\n //@ts-ignore\n template[prop] = this.templateProperties[prop]\n }\n }\n }\n }\n\n firstUpdated() {\n if (this.zIndex) {\n this.style.setProperty('--z-index', String(this.zIndex))\n }\n\n requestAnimationFrame(() => {\n / transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. /\n this.overlayed?.setAttribute('opened', 'true')\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.movable = this.movable && !isHandheldDevice()\n\n if (this.movable) {\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n }\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('overlay-closed', {\n detail: this.name\n })\n )\n\n if (this.movable) {\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n }\n\n super.disconnectedCallback()\n }\n\n onDragStart(e: Event) {\n if (!this.movable) {\n return\n }\n\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.movable \|\| !this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const overlayed = this.overlayed\n\n var boundingRect = overlayed.getBoundingClientRect()\n\n overlayed.style.left =\n Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px'\n overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px'\n\n overlayed.style.transform = 'initial'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.movable && this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n /\n A method that closes the overlay by removing it from its parent node in the DOM.\n * When called, this method removes the overlay element, effectively hiding it from the user interface.\n /\n close() {\n this.parentNode?.removeChild(this)\n }\n\n onClose(e: Event, escape?: boolean) {\n e.stopPropagation()\n / 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. /\n\n if (this.historical) {\n var state = history.state\n var overlay = (state \|\| {}).overlay\n\n if (!overlay \|\| overlay.name !== this.name) {\n return\n }\n\n / Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n if (escape && !overlay.escapable) {\n return true\n }\n\n history.back()\n } else {\n this.close()\n }\n }\n}\n"]}
1	+ {"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isHandheldDevice } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } \| undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n/*\n Custom element for creating floating overlays.\n * These overlays can have various properties like direction, size, title, and more.\n * They are often used for modal dialogs, pop-ups, and similar UI elements.\n /\n@customElement('ox-floating-overlay')\nexport class OxFloatingOverlay extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n / for layout style /\n :host {\n position: relative;\n z-index: var(--z-index, 10);\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n }\n\n :host([hovering='edge']) {\n / edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. /\n position: initial;\n }\n\n #backdrop {\n position: fixed;\n left: 0;\n top: 0;\n\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n\n background-color: var(--md-sys-color-primary);\n opacity:.2\n }\n\n [overlayed] {\n position: absolute;\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--md-sys-color-on-primary);\n border-radius:var(--md-sys-shape-corner-medium);\n }\n\n [overlayed][hovering='center'] {\n position: fixed;\n\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n opacity: 0;\n }\n\n [overlayed][hovering='center'][opened] {\n opacity: 1;\n transition: opacity 0.3s ease-in;\n }\n\n [hovering='center'] {\n width: var(--overlay-center-normal-width, 60%);\n height: var(--overlay-center-normal-height, 60%);\n }\n\n [hovering='center'][size='small'] {\n width: var(--overlay-center-small-width, 40%);\n height: var(--overlay-center-small-height, 40%);\n }\n\n [hovering='center'][size='large'] {\n width: var(--overlay-center-large-width, 100%);\n height: var(--overlay-center-large-height, 100%);\n }\n\n [header] {\n --help-icon-color:var(--md-sys-color-on-primary);\n --help-icon-hover-color:var(--md-sys-color-on-primary);\n\n pointer-events: initial;\n }\n\n [content] {\n flex: 1;\n overflow: hidden;\n }\n\n ::slotted() {\n box-sizing: border-box;\n pointer-events: initial;\n }\n\n [hovering='center'] [content] ::slotted() {\n width: 100%;\n height: 100%;\n }\n [direction='up'],\n [direction='down'] {\n width: 100%;\n\n max-height: 0;\n transition: max-height 0.7s ease-in;\n }\n [direction='up'] {\n bottom: 0;\n }\n [direction='down'] {\n top: 0;\n }\n\n [direction='up'][opened],\n [direction='down'][opened] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [settled][direction='down'] [content],\n [settled][direction='up'] [content] {\n overflow-y: auto;\n }\n\n [direction='left'],\n [direction='right'] {\n height: 100%;\n\n max-width: 0;\n transition: max-width 0.5s ease-in;\n }\n [direction='left'] {\n right: 0;\n }\n [direction='right'] {\n left: 0;\n }\n\n [direction='left'][opened],\n [direction='right'][opened] {\n max-width: 100vw;\n }\n\n [settled][direction='left'] [content],\n [settled][direction='right'] [content] {\n overflow-x: auto;\n }\n\n @media screen and (max-width: 460px) {\n [direction='up'],\n [direction='down'] {\n max-height: 100vh;\n max-height: 100dvh;\n }\n\n [direction='left'],\n [direction='right'] {\n max-width: 100vw;\n }\n }\n `,\n css`\n / for header style /\n [header] {\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color:var(--md-sys-color-primary-container);\n font-weight:var(--md-sys-typescale-label-large-weight);\n color:var(--md-sys-color-primary)\n }\n\n slot[name='header'] {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n text-transform: capitalize;\n }\n\n [name='header']::slotted() {\n margin: 0 auto;\n }\n\n [name='header'] > h1 {\n \n font-size:var(--md-sys-typescale-label-large-size);\n }\n\n [historyback] {\n margin-left: var(--spacing-medium);\n margin-right: auto;\n }\n\n [close] {\n margin-left: auto;\n margin-right: var(--spacing-medium);\n }\n\n [historyback],\n [close] {\n display: none;\n }\n\n [closable][close] {\n display: block;\n cursor:pointer;\n }\n\n [search] ox-help-icon {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--opacity-light-color);\n border-radius: 999em;\n padding: 0 var(--spacing-medium);\n }\n\n [search] > * {\n align-self: center;\n }\n\n @media screen and (max-width: 460px) {\n [closable][historyback] {\n display: block;\n }\n\n [closable][close] {\n display: none;\n }\n }\n `\n ]\n\n /*\n A boolean property that determines whether a backdrop should be displayed behind the overlay.\n * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.\n /\n @property({ type: Boolean }) backdrop?: boolean = false\n\n /\n A string property that specifies the direction in which the overlay should appear.\n * Possible values are: 'up', 'down', 'left', or 'right'.\n /\n @property({ type: String }) direction?: 'up' \| 'down' \| 'left' \| 'right'\n\n /\n A string property that reflects the hovering state of the overlay.\n * Possible values are: 'center', 'edge', or 'next'.\n /\n @property({ type: String, reflect: true }) hovering?: 'center' \| 'edge' \| 'next'\n\n /\n A string property that specifies the size of the overlay.\n * Possible values are: 'small', 'medium', or 'large'.\n /\n @property({ type: String }) size?: 'small' \| 'medium' \| 'large'\n\n /\n A string property that represents the name of the overlay.\n * This can be used for identification or other purposes.\n /\n @property({ type: String }) name?: string\n\n /\n A string property that sets the title of the overlay.\n * The title is typically displayed in the header of the overlay.\n /\n @property({ type: String }) title: string = ''\n\n /\n A boolean property that determines whether the overlay can be closed by the user.\n * If set to true, a close button will be displayed in the header.\n /\n @property({ type: Boolean }) closable?: boolean = false\n\n /\n An object property that can hold custom properties for the template of the overlay.\n * These properties can be used to customize the template's behavior.\n /\n @property({ type: Object }) templateProperties: any\n\n /\n An object property that can hold information related to help or assistance for the overlay.\n * This information may be used to provide additional guidance to users.\n /\n @property({ type: Object }) help: any\n\n /\n A boolean property that determines whether the overlay is considered historical.\n * Historical overlays may have specific behavior or interactions, such as navigating back in history.\n /\n @property({ type: Boolean }) historical?: boolean = false\n\n /\n A boolean property that determines whether the overlay can be moved by dragging.\n * If set to true, the overlay can be repositioned by dragging its header.\n /\n @property({ type: Boolean }) movable?: boolean = false\n\n /\n An object property that can hold information related to a search feature within the overlay.\n * It can include properties like 'value', 'handler', and 'placeholder'.\n /\n @property({ type: Object }) search?: {\n value?: string\n handler?: (instance: any, value: string) => void\n placeholder?: string\n }\n\n /\n An object property that can hold information related to a filter feature within the overlay.\n * It can include a 'handler' function for filtering content.\n /\n @property({ type: Object }) filter?: { handler?: (instance: any) => void }\n\n /\n A numeric property that specifies the z-index of the overlay.\n * The z-index determines the stacking order of the overlay in relation to other elements on the page.\n /\n @property({ type: Number, attribute: 'z-index' }) zIndex?: number\n\n private dragStart?: { x: number; y: number }\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n @query('[overlayed]') overlayed!: HTMLDivElement\n @query('[content]') content!: HTMLDivElement\n\n render() {\n const direction = this.hovering == 'center' ? undefined : this.direction\n\n const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search \|\| ({} as any)\n const { handler: filterHandler } = this.filter \|\| ({} as any)\n\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n return html`\n ${Boolean(this.backdrop)\n ? html`\n <div\n id=\"backdrop\"\n ?hidden=${!this.backdrop}\n @click=${(e: Event) => this.onClose(e, true / escape /)}\n ></div>\n `\n : html``}\n\n <div\n overlayed\n hovering=${this.hovering \|\| 'center'}\n direction=${ifDefined(direction)}\n size=${this.size \|\| 'medium'}\n @close-overlay=${(e: Event) => {\n e.stopPropagation()\n this.onClose(e)\n }}\n @transitionstart=${(e: Event) => {\n / to hide scrollbar during transition /\n ;(e.target as HTMLElement).removeAttribute('settled')\n }}\n @transitionend=${(e: Event) => {\n ;(e.target as HTMLElement).setAttribute('settled', '')\n }}\n @click=${(e: MouseEvent) => {\n if (this.backdrop && e.target === this.content) {\n this.onClose(e, true / escape /)\n }\n }}\n >\n <div\n header\n @mousedown=${this.onDragStart.bind(this)}\n @touchstart=${this.onDragStart.bind(this)}\n draggable=\"false\"\n >\n <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>\n ${this.movable ? html`<md-icon>drag_indicator</md-icon>` : html``}\n <slot name=\"header\">\n ${this.title \|\| this.closable\n ? html`\n <h1>\n ${this.title \|\| ''} ${this.help\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </h1>\n `\n : html``}\n ${searchable \|\| filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value \|\| ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler(this.firstElementChild, (e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${this.help && searchable ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>` : html``}\n ${filterable\n ? html`<md-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}>tune</md-icon>`\n : html``}\n </div>\n `\n : html``}\n ${this.help && !searchable && !this.title / help only /\n ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n : html``}\n </slot>\n <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>\n </div>\n\n <div content>\n <slot> </slot>\n </div>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('templateProperties') && this.templateProperties) {\n var template = this.firstElementChild\n if (template) {\n for (let prop in this.templateProperties) {\n //@ts-ignore\n template[prop] = this.templateProperties[prop]\n }\n }\n }\n }\n\n firstUpdated() {\n if (this.zIndex) {\n this.style.setProperty('--z-index', String(this.zIndex))\n }\n\n requestAnimationFrame(() => {\n / transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. /\n this.overlayed?.setAttribute('opened', 'true')\n })\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.movable = this.movable && !isHandheldDevice()\n\n if (this.movable) {\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n }\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('overlay-closed', {\n detail: this.name\n })\n )\n\n if (this.movable) {\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n }\n\n super.disconnectedCallback()\n }\n\n onDragStart(e: Event) {\n if (!this.movable) {\n return\n }\n\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.movable \|\| !this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const overlayed = this.overlayed\n\n var boundingRect = overlayed.getBoundingClientRect()\n\n overlayed.style.left =\n Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px'\n overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px'\n\n overlayed.style.transform = 'initial'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.movable && this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n /\n A method that closes the overlay by removing it from its parent node in the DOM.\n * When called, this method removes the overlay element, effectively hiding it from the user interface.\n /\n close() {\n this.parentNode?.removeChild(this)\n }\n\n onClose(e: Event, escape?: boolean) {\n e.stopPropagation()\n / 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. /\n\n if (this.historical) {\n var state = history.state\n var overlay = (state \|\| {}).overlay\n\n if (!overlay \|\| overlay.name !== this.name) {\n return\n }\n\n / Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n if (escape && !overlay.escapable) {\n return true\n }\n\n history.back()\n } else {\n this.close()\n }\n }\n}\n"]}

package/dist/src/ox-popup-list.js CHANGED Viewed

@@ -329,7 +329,13 @@ OxPopupList.styles = [
       :host {
         display: none;
         align-items: stretch;
-        color: var(--theme-primary-text-color, #3c3938);
+        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
+        z-index: 100;
+        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
+        padding: var(--spacing-small) 0;
+        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
+        font-size: var(--md-sys-typescale-label-medium-size);
         font:
           normal 14px 'Roboto',
           sans-serif;
@@ -353,10 +359,11 @@ OxPopupList.styles = [
       }
       ::slotted(*) {
-        padding: 5px 10px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        padding: var(--spacing-medium);
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
         cursor: pointer;
         outline: none;
+        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));
       }
       ::slotted(*:focus) {
@@ -365,23 +372,20 @@ OxPopupList.styles = [
       ::slotted([option][active]),
       ::slotted([option]:hover) {
-        background-color: #f6f6f6;
+        background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
+        color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
       }
       ::slotted([option][selected]) {
-        border-left: 3px solid var(--primary-color, #38a25b);
-        font-weight: bold;
+        border-left: 3px solid var(--md-ref-palette-primary50);
+        font-weight: var(--md-sys-typescale-label-large-weight);
       }
       ::slotted([separator]) {
         height: 1px;
         width: 100%;
         padding: 0;
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([option] > input) {
-        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));
+        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
       }
       ::slotted([hidden]) {
@@ -392,22 +396,22 @@ OxPopupList.styles = [
         display: flex;
         position: relative;
         align-items: center;
-        padding: 5px 10px;
+        padding: var(--spacing-small) var(--spacing-medium);
-        --md-icon-size: 20px;
+        --md-icon-size: var(--icon-size-small);
       }
       [search] [type='text'] {
         flex: 1;
         background-color: transparent;
         border: 0;
-        padding: 0 0 0 25px;
+        padding: 0 0 0 var(--spacing-huge);
         outline: none;
         width: 50px;
       }
       [search] md-icon {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
       }
       [search] md-icon[search-icon] {
@@ -416,7 +420,7 @@ OxPopupList.styles = [
       [search] md-icon[delete-icon] {
         opacity: 0.5;
-        --md-icon-size: 14px;
+        --md-icon-size: var(--icon-size-tiny);
       }
       [nothing] {

package/dist/src/ox-popup-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-popup-list.js","sourceRoot":"","sources":["../../src/ox-popup-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, CSSResult, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { OxPopup } from './ox-popup'\n\nfunction guaranteeFocus(element: HTMLElement) {\n // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.\n const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n\n if (focusible) {\n ;(focusible as HTMLElement).focus()\n return\n }\n\n // 2. 자신을 포함해서 가장 가까운 부모에게 focus 기회를 준다.\n const closest = element.closest(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement\n\n closest?.focus()\n}\n\n/*\n A custom element representing a list-like popup menu.\n /\n@customElement('ox-popup-list')\nexport class OxPopupList extends OxPopup {\n static styles = [\n ...OxPopup.styles,\n css`\n :host {\n display: none;\n align-items: stretch;\n color: var(--theme-primary-text-color, #3c3938);\n font:\n normal 14px 'Roboto',\n sans-serif;\n }\n\n :host([active]) {\n display: flex;\n flex-direction: column;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n :host([nowrap]) ::slotted([option]) {\n white-space: nowrap;\n }\n\n ::slotted([option]) {\n border-left: 3px solid transparent;\n }\n\n ::slotted() {\n padding: 5px 10px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n cursor: pointer;\n outline: none;\n }\n\n ::slotted(:focus) {\n outline: none;\n }\n\n ::slotted([option][active]),\n ::slotted([option]:hover) {\n background-color: #f6f6f6;\n }\n\n ::slotted([option][selected]) {\n border-left: 3px solid var(--primary-color, #38a25b);\n font-weight: bold;\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: rgba(0, 0, 0, 0.15);\n }\n\n ::slotted([option] > input) {\n border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));\n }\n\n ::slotted([hidden]) {\n display: none;\n }\n\n [search] {\n display: flex;\n position: relative;\n align-items: center;\n padding: 5px 10px;\n\n --md-icon-size: 20px;\n }\n\n [search] [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n padding: 0 0 0 25px;\n outline: none;\n width: 50px;\n }\n\n [search] md-icon {\n color: var(--secondary-color);\n }\n\n [search] md-icon[search-icon] {\n position: absolute;\n }\n\n [search] md-icon[delete-icon] {\n opacity: 0.5;\n --md-icon-size: 14px;\n }\n\n [nothing] {\n opacity: 0.5;\n text-align: center;\n }\n\n div[body] {\n flex: 1;\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n overflow: auto;\n }\n `\n ]\n\n /*\n A boolean property that, when set to true, allows multiple options to be selected in the popup list.\n * @type {boolean}\n /\n @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false\n\n /\n An optional attribute that specifies the name of the attribute used to mark selected options in the list.\n * @type {string\|undefined}\n /\n @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string\n\n /\n A boolean property that, when set to true, enables the search functionality in the popup list.\n * Users can search/filter options by typing in a search bar.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean\n\n /\n A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.\n * This allows users to reorder the options in the list by dragging them into new positions.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false\n\n /\n The value(s) of the selected option(s) in the popup list.\n * This property can be a string or an array of strings, depending on whether multiple selections are allowed.\n * @type {string\|string[]\|undefined}\n /\n @property({ type: String }) value?: string \| string[]\n\n @state() activeIndex?: number\n @state() searchKeyword?: string\n @state() nothingToSelect: boolean = false\n\n @query('[search] input') searchInput!: HTMLInputElement\n @query('div[body]') body!: HTMLDivElement\n\n private sortableObject?: Sortable\n private locked: boolean = false\n\n render() {\n return html`\n <slot name=\"header\"> </slot>\n\n ${this.withSearch\n ? html`\n <label search for=\"search\" @input=${(e: InputEvent) => this._oninputsearch(e)}>\n <md-icon search-icon>search</md-icon>\n <input\n id=\"search\"\n type=\"text\"\n autocomplete=\"off\"\n @keydown=${(e: KeyboardEvent) => this._onkeydownsearch(e)}\n @change=${(e: InputEvent) => this._onchangesearch(e)}\n />\n <md-icon\n @click=${() => {\n this.searchInput.value = ''\n this.searchKeyword = ''\n }}\n delete-icon\n >delete</md-icon\n >\n </label>\n `\n : html``}\n\n <div body>\n <slot\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n </slot>\n </div>\n\n ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}\n `\n }\n\n protected _oninputsearch(e: InputEvent) {\n e.stopPropagation()\n e.preventDefault()\n\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onchangesearch(e: InputEvent) {\n e.stopPropagation()\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onkeydownsearch(e: KeyboardEvent) {\n const keys = ['Esc', 'Escape', 'Up', 'ArrowUp', 'Down', 'ArrowDown']\n if (!keys.includes(e.key)) {\n e.stopPropagation()\n }\n }\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, 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 case 'Left': // for IE/Edge\n case 'ArrowLeft':\n case 'Up': // for IE/Edge\n case 'ArrowUp':\n this.activeIndex!--\n break\n\n case 'Right': // for IE/Edge\n case 'ArrowRight':\n case 'Down': // for IE/Edge\n case 'ArrowDown':\n this.activeIndex!++\n break\n\n case 'Enter':\n case ' ':\n case 'Spacebar': // for old firefox\n this.setActive(this.activeIndex!, true)\n this.select()\n break\n }\n }.bind(this)\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {\n const to = e.relatedTarget as HTMLElement\n\n if (!this.contains(to)) {\n / 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. /\n // @ts-ignore for debug\n !this.debug && !window.POPUP_DEBUG && this.close()\n }\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {\n e.stopPropagation()\n\n const option = (e.target as HTMLElement)?.closest('[option]')\n if (option) {\n this.setActive(option, true)\n this.select()\n }\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('activeIndex')) {\n this.activeIndex !== undefined && this.setActive(this.activeIndex)\n }\n\n if (changes.has('sortable')) {\n this.sortableObject && this.sortableObject.destroy()\n\n if (this.sortable) {\n this.sortableObject = Sortable.create(this, {\n handle: '[option]',\n draggable: '[option]',\n direction: 'vertical',\n animation: 150,\n touchStartThreshold: 10,\n onEnd: e => {\n this.locked = false\n this.dispatchEvent(\n new CustomEvent('sorted', {\n detail: Array.from(this.querySelectorAll('[option]'))\n })\n )\n },\n onMove: e => {\n this.locked = true\n }\n })\n }\n }\n\n if (changes.has('searchKeyword')) {\n const attrSelected = this.attrSelected \|\| 'selected'\n this.querySelectorAll(`[option]`).forEach(item => {\n if (!this.searchKeyword \|\| item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {\n item.removeAttribute('hidden')\n } else {\n item.removeAttribute('selected')\n item.setAttribute('hidden', '')\n }\n })\n this.nothingToSelect = this.querySelectorAll(`[option]:not([hidden])`).length === 0\n }\n\n if (changes.has('value')) {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [values as string]\n }\n\n options.forEach(option => {\n if (values?.includes((option as HTMLElement).getAttribute('value') \|\| '')) {\n option.setAttribute(this.attrSelected \|\| 'selected', '')\n } else {\n option.removeAttribute(this.attrSelected \|\| 'selected')\n }\n })\n }\n }\n\n /\n Retrieves the labels of the selected options in the popup list.\n * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.\n * @returns {string\|string[]} The label(s) of the selected option(s).\n /\n public getSelectedLabels(): string \| string[] {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.textContent \|\| '')\n\n return this.multiple ? selected : selected[0]\n }\n\n /\n Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).\n * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.\n * Also, it checks whether the selected option should remain alive and whether the popup should be closed.\n /\n async select() {\n await this.updateComplete\n\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.getAttribute('value'))\n\n this.dispatchEvent(\n new CustomEvent('select', {\n bubbles: true,\n composed: true,\n detail: this.multiple ? selected : selected[0]\n })\n )\n\n const option = options[this.activeIndex!]\n if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {\n this.close()\n }\n }\n\n /\n Sets the active option within the popup list based on the given index or Element.\n * If 'withSelect' is true, it also manages the selection state of the option.\n \n @param {number \| Element \| null} active - The index or Element of the option to set as active.\n * @param {boolean \| undefined} withSelect - Indicates whether to manage the selection state of the option.\n /\n setActive(active: number \| Element \| null, withSelect?: boolean) {\n var options = Array.from(this.querySelectorAll('[option]:not([hidden])'))\n if (this.withSearch) {\n options.push(this.renderRoot.querySelector('[search]')!)\n }\n\n if (active instanceof Element) {\n const index = options.findIndex(option => option === active)\n this.setActive(index === -1 ? 0 : index, withSelect)\n return\n }\n\n const attrSelected = this.attrSelected \|\| 'selected'\n\n options.forEach(async (option, index) => {\n if (typeof active === 'number' && index === (active + options.length) % options.length) {\n option.setAttribute('active', '')\n\n if (withSelect && !this.attrSelected) {\n / being set attribute attrs-selected means, that element should know how to do when event happened. /\n this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')\n }\n\n guaranteeFocus(option as HTMLElement)\n\n this.activeIndex = index\n } else {\n option.removeAttribute('active')\n / even thought attribute attrs-selected set, ox-popup-list have to unset others. /\n !this.multiple && withSelect && option.removeAttribute(attrSelected)\n }\n })\n }\n\n /\n Overrides the 'open' method of the base class 'OxPopup' to set the initial active index\n * when the popup list is opened. It ensures that an option is initially selected for user interaction.\n \n @param {object} params - The parameters for opening the popup, including position and size.\n /\n override open(params: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n silent?: boolean\n }) {\n super.open(params)\n\n if (this.activeIndex === undefined) {\n this.activeIndex = 0\n } else {\n this.setActive(this.activeIndex)\n }\n }\n\n /\n Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event\n * indicating that the popup list is being closed. This event can be used for further interactions\n * or logic in the application.\n /\n override close() {\n if (this.locked) {\n return\n }\n\n if (this.hasAttribute('active')) {\n this.dispatchEvent(\n new CustomEvent('close', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n super.close()\n }\n\n /\n Open OxPopup\n \n @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n right,\n bottom,\n parent,\n multiple,\n sortable,\n attrSelected,\n styles,\n debug\n }: {\n template: unknown\n top?: number\n left?: number\n right?: number\n bottom?: number\n parent?: Element \| null\n multiple?: boolean\n sortable?: boolean\n debug?: boolean\n attrSelected?: string\n styles: CSSResult\n }): OxPopupList {\n const owner = parent \|\| document.body\n const target = document.createElement('ox-popup-list') as OxPopupList\n\n if (styles) {\n const style = document.createElement('style')\n style.textContent = styles.cssText\n\n const shadow = target.attachShadow({ mode: 'open' })\n shadow.appendChild(style)\n }\n\n if (!!debug) {\n target.setAttribute('debug', '')\n }\n\n if (!!multiple) {\n target.setAttribute('multiple', '')\n }\n\n if (!!sortable) {\n target.setAttribute('sortable', '')\n }\n\n if (attrSelected) {\n target.setAttribute('attr-selected', attrSelected)\n }\n\n render(template, target)\n\n target._parent = owner\n\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n\n return target\n }\n}\n"]}
1	+ {"version":3,"file":"ox-popup-list.js","sourceRoot":"","sources":["../../src/ox-popup-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, CSSResult, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { OxPopup } from './ox-popup'\n\nfunction guaranteeFocus(element: HTMLElement) {\n // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.\n const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n\n if (focusible) {\n ;(focusible as HTMLElement).focus()\n return\n }\n\n // 2. 자신을 포함해서 가장 가까운 부모에게 focus 기회를 준다.\n const closest = element.closest(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement\n\n closest?.focus()\n}\n\n/*\n A custom element representing a list-like popup menu.\n /\n@customElement('ox-popup-list')\nexport class OxPopupList extends OxPopup {\n static styles = [\n ...OxPopup.styles,\n css`\n :host {\n display: none;\n align-items: stretch;\n background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n z-index: 100;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n padding: var(--spacing-small) 0;\n\n color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));\n font-size: var(--md-sys-typescale-label-medium-size);\n font:\n normal 14px 'Roboto',\n sans-serif;\n }\n\n :host([active]) {\n display: flex;\n flex-direction: column;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n :host([nowrap]) ::slotted([option]) {\n white-space: nowrap;\n }\n\n ::slotted([option]) {\n border-left: 3px solid transparent;\n }\n\n ::slotted() {\n padding: var(--spacing-medium);\n border-bottom: 1px solid var(--md-sys-color-surface-variant);\n cursor: pointer;\n outline: none;\n color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));\n }\n\n ::slotted(:focus) {\n outline: none;\n }\n\n ::slotted([option][active]),\n ::slotted([option]:hover) {\n background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));\n color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));\n }\n\n ::slotted([option][selected]) {\n border-left: 3px solid var(--md-ref-palette-primary50);\n font-weight: var(--md-sys-typescale-label-large-weight);\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));\n }\n\n ::slotted([hidden]) {\n display: none;\n }\n\n [search] {\n display: flex;\n position: relative;\n align-items: center;\n padding: var(--spacing-small) var(--spacing-medium);\n\n --md-icon-size: var(--icon-size-small);\n }\n\n [search] [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n padding: 0 0 0 var(--spacing-huge);\n outline: none;\n width: 50px;\n }\n\n [search] md-icon {\n color: var(--md-sys-color-secondary);\n }\n\n [search] md-icon[search-icon] {\n position: absolute;\n }\n\n [search] md-icon[delete-icon] {\n opacity: 0.5;\n --md-icon-size: var(--icon-size-tiny);\n }\n\n [nothing] {\n opacity: 0.5;\n text-align: center;\n }\n\n div[body] {\n flex: 1;\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n overflow: auto;\n }\n `\n ]\n\n /*\n A boolean property that, when set to true, allows multiple options to be selected in the popup list.\n * @type {boolean}\n /\n @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false\n\n /\n An optional attribute that specifies the name of the attribute used to mark selected options in the list.\n * @type {string\|undefined}\n /\n @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string\n\n /\n A boolean property that, when set to true, enables the search functionality in the popup list.\n * Users can search/filter options by typing in a search bar.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean\n\n /\n A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.\n * This allows users to reorder the options in the list by dragging them into new positions.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false\n\n /\n The value(s) of the selected option(s) in the popup list.\n * This property can be a string or an array of strings, depending on whether multiple selections are allowed.\n * @type {string\|string[]\|undefined}\n /\n @property({ type: String }) value?: string \| string[]\n\n @state() activeIndex?: number\n @state() searchKeyword?: string\n @state() nothingToSelect: boolean = false\n\n @query('[search] input') searchInput!: HTMLInputElement\n @query('div[body]') body!: HTMLDivElement\n\n private sortableObject?: Sortable\n private locked: boolean = false\n\n render() {\n return html`\n <slot name=\"header\"> </slot>\n\n ${this.withSearch\n ? html`\n <label search for=\"search\" @input=${(e: InputEvent) => this._oninputsearch(e)}>\n <md-icon search-icon>search</md-icon>\n <input\n id=\"search\"\n type=\"text\"\n autocomplete=\"off\"\n @keydown=${(e: KeyboardEvent) => this._onkeydownsearch(e)}\n @change=${(e: InputEvent) => this._onchangesearch(e)}\n />\n <md-icon\n @click=${() => {\n this.searchInput.value = ''\n this.searchKeyword = ''\n }}\n delete-icon\n >delete</md-icon\n >\n </label>\n `\n : html``}\n\n <div body>\n <slot\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n </slot>\n </div>\n\n ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}\n `\n }\n\n protected _oninputsearch(e: InputEvent) {\n e.stopPropagation()\n e.preventDefault()\n\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onchangesearch(e: InputEvent) {\n e.stopPropagation()\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onkeydownsearch(e: KeyboardEvent) {\n const keys = ['Esc', 'Escape', 'Up', 'ArrowUp', 'Down', 'ArrowDown']\n if (!keys.includes(e.key)) {\n e.stopPropagation()\n }\n }\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, 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 case 'Left': // for IE/Edge\n case 'ArrowLeft':\n case 'Up': // for IE/Edge\n case 'ArrowUp':\n this.activeIndex!--\n break\n\n case 'Right': // for IE/Edge\n case 'ArrowRight':\n case 'Down': // for IE/Edge\n case 'ArrowDown':\n this.activeIndex!++\n break\n\n case 'Enter':\n case ' ':\n case 'Spacebar': // for old firefox\n this.setActive(this.activeIndex!, true)\n this.select()\n break\n }\n }.bind(this)\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {\n const to = e.relatedTarget as HTMLElement\n\n if (!this.contains(to)) {\n / 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. /\n // @ts-ignore for debug\n !this.debug && !window.POPUP_DEBUG && this.close()\n }\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {\n e.stopPropagation()\n\n const option = (e.target as HTMLElement)?.closest('[option]')\n if (option) {\n this.setActive(option, true)\n this.select()\n }\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('activeIndex')) {\n this.activeIndex !== undefined && this.setActive(this.activeIndex)\n }\n\n if (changes.has('sortable')) {\n this.sortableObject && this.sortableObject.destroy()\n\n if (this.sortable) {\n this.sortableObject = Sortable.create(this, {\n handle: '[option]',\n draggable: '[option]',\n direction: 'vertical',\n animation: 150,\n touchStartThreshold: 10,\n onEnd: e => {\n this.locked = false\n this.dispatchEvent(\n new CustomEvent('sorted', {\n detail: Array.from(this.querySelectorAll('[option]'))\n })\n )\n },\n onMove: e => {\n this.locked = true\n }\n })\n }\n }\n\n if (changes.has('searchKeyword')) {\n const attrSelected = this.attrSelected \|\| 'selected'\n this.querySelectorAll(`[option]`).forEach(item => {\n if (!this.searchKeyword \|\| item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {\n item.removeAttribute('hidden')\n } else {\n item.removeAttribute('selected')\n item.setAttribute('hidden', '')\n }\n })\n this.nothingToSelect = this.querySelectorAll(`[option]:not([hidden])`).length === 0\n }\n\n if (changes.has('value')) {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [values as string]\n }\n\n options.forEach(option => {\n if (values?.includes((option as HTMLElement).getAttribute('value') \|\| '')) {\n option.setAttribute(this.attrSelected \|\| 'selected', '')\n } else {\n option.removeAttribute(this.attrSelected \|\| 'selected')\n }\n })\n }\n }\n\n /\n Retrieves the labels of the selected options in the popup list.\n * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.\n * @returns {string\|string[]} The label(s) of the selected option(s).\n /\n public getSelectedLabels(): string \| string[] {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.textContent \|\| '')\n\n return this.multiple ? selected : selected[0]\n }\n\n /\n Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).\n * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.\n * Also, it checks whether the selected option should remain alive and whether the popup should be closed.\n /\n async select() {\n await this.updateComplete\n\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.getAttribute('value'))\n\n this.dispatchEvent(\n new CustomEvent('select', {\n bubbles: true,\n composed: true,\n detail: this.multiple ? selected : selected[0]\n })\n )\n\n const option = options[this.activeIndex!]\n if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {\n this.close()\n }\n }\n\n /\n Sets the active option within the popup list based on the given index or Element.\n * If 'withSelect' is true, it also manages the selection state of the option.\n \n @param {number \| Element \| null} active - The index or Element of the option to set as active.\n * @param {boolean \| undefined} withSelect - Indicates whether to manage the selection state of the option.\n /\n setActive(active: number \| Element \| null, withSelect?: boolean) {\n var options = Array.from(this.querySelectorAll('[option]:not([hidden])'))\n if (this.withSearch) {\n options.push(this.renderRoot.querySelector('[search]')!)\n }\n\n if (active instanceof Element) {\n const index = options.findIndex(option => option === active)\n this.setActive(index === -1 ? 0 : index, withSelect)\n return\n }\n\n const attrSelected = this.attrSelected \|\| 'selected'\n\n options.forEach(async (option, index) => {\n if (typeof active === 'number' && index === (active + options.length) % options.length) {\n option.setAttribute('active', '')\n\n if (withSelect && !this.attrSelected) {\n / being set attribute attrs-selected means, that element should know how to do when event happened. /\n this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')\n }\n\n guaranteeFocus(option as HTMLElement)\n\n this.activeIndex = index\n } else {\n option.removeAttribute('active')\n / even thought attribute attrs-selected set, ox-popup-list have to unset others. /\n !this.multiple && withSelect && option.removeAttribute(attrSelected)\n }\n })\n }\n\n /\n Overrides the 'open' method of the base class 'OxPopup' to set the initial active index\n * when the popup list is opened. It ensures that an option is initially selected for user interaction.\n \n @param {object} params - The parameters for opening the popup, including position and size.\n /\n override open(params: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n silent?: boolean\n }) {\n super.open(params)\n\n if (this.activeIndex === undefined) {\n this.activeIndex = 0\n } else {\n this.setActive(this.activeIndex)\n }\n }\n\n /\n Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event\n * indicating that the popup list is being closed. This event can be used for further interactions\n * or logic in the application.\n /\n override close() {\n if (this.locked) {\n return\n }\n\n if (this.hasAttribute('active')) {\n this.dispatchEvent(\n new CustomEvent('close', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n super.close()\n }\n\n /\n Open OxPopup\n \n @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n right,\n bottom,\n parent,\n multiple,\n sortable,\n attrSelected,\n styles,\n debug\n }: {\n template: unknown\n top?: number\n left?: number\n right?: number\n bottom?: number\n parent?: Element \| null\n multiple?: boolean\n sortable?: boolean\n debug?: boolean\n attrSelected?: string\n styles: CSSResult\n }): OxPopupList {\n const owner = parent \|\| document.body\n const target = document.createElement('ox-popup-list') as OxPopupList\n\n if (styles) {\n const style = document.createElement('style')\n style.textContent = styles.cssText\n\n const shadow = target.attachShadow({ mode: 'open' })\n shadow.appendChild(style)\n }\n\n if (!!debug) {\n target.setAttribute('debug', '')\n }\n\n if (!!multiple) {\n target.setAttribute('multiple', '')\n }\n\n if (!!sortable) {\n target.setAttribute('sortable', '')\n }\n\n if (attrSelected) {\n target.setAttribute('attr-selected', attrSelected)\n }\n\n render(template, target)\n\n target._parent = owner\n\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n\n return target\n }\n}\n"]}

package/dist/src/ox-popup-menu.js CHANGED Viewed

@@ -142,13 +142,13 @@ OxPopupMenu.styles = [
         display: none;
         flex-direction: column;
         align-items: stretch;
-        background-color: var(--theme-white-color, #fff);
+        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
         z-index: 100;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 4px 0;
+        padding: var(--spacing-small) 0;
-        color: var(--theme-primary-text-color, #3c3938);
-        font: normal 14px 'Roboto', sans-serif;
+        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
+        font-size:var(--md-sys-typescale-label-medium-size);
       }
       :host([active]) {
@@ -160,37 +160,42 @@ OxPopupMenu.styles = [
       }
       ::slotted(*) {
-        padding: 5px 10px;
+        padding: var(--spacing-medium);
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
         cursor: pointer;
+        color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));
       }
       ::slotted(*:focus) {
+        cursor: pointer;
         outline: none;
       }
-      ::slotted([menu][active]),
-      ::slotted([menu]:hover) {
-        background-color: #f6f6f6;
-      }
       ::slotted([menu]),
       ::slotted(ox-popup-menuitem) {
         border-left: 3px solid transparent;
+        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
+        color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));
+      }
+      ::slotted([menu][active]),
+      ::slotted([menu]:hover),
+      ::slotted(ox-popup-menuitem[active]),
+      ::slotted(ox-popup-menuitem:hover) {
+        background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
+        color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
       }
       ::slotted(ox-popup-menuitem[active]) {
-        border-left: 3px solid var(--primary-color, #38a25b);
-        font-weight: bold;
+        border-left: 3px solid var(--md-ref-palette-primary50);
+        font-weight: var(--md-sys-typescale-label-large-weight);
       }
       ::slotted([separator]) {
         height: 1px;
         width: 100%;
         padding: 0;
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([menu] > input) {
-        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));
+        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
       }
     `
 ];

package/dist/src/ox-popup-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-popup-menu.js","sourceRoot":"","sources":["../../src/ox-popup-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPopup } from './ox-popup'\n\nfunction focusClosest(element: HTMLElement) {\n /* Find the closest focusable element. /\n const closest = element.closest(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement\n\n closest?.focus()\n\n return closest\n}\n\n/\n Custom element representing a popup menu. It extends OxPopup.\n /\n@customElement('ox-popup-menu')\nexport class OxPopupMenu extends OxPopup {\n static styles = [\n ...OxPopup.styles,\n css`\n :host {\n display: none;\n flex-direction: column;\n align-items: stretch;\n background-color: var(--theme-white-color, #fff);\n z-index: 100;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n padding: 4px 0;\n\n color: var(--theme-primary-text-color, #3c3938);\n font: normal 14px 'Roboto', sans-serif;\n }\n\n :host([active]) {\n display: flex;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n ::slotted() {\n padding: 5px 10px;\n cursor: pointer;\n }\n\n ::slotted(:focus) {\n outline: none;\n }\n\n ::slotted([menu][active]),\n ::slotted([menu]:hover) {\n background-color: #f6f6f6;\n }\n\n ::slotted([menu]),\n ::slotted(ox-popup-menuitem) {\n border-left: 3px solid transparent;\n }\n\n ::slotted(ox-popup-menuitem[active]) {\n border-left: 3px solid var(--primary-color, #38a25b);\n font-weight: bold;\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: rgba(0, 0, 0, 0.15);\n }\n ::slotted([menu] > input) {\n border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));\n }\n `\n ]\n\n /*\n Property to track the index of the active menu item.\n /\n @property({ type: Number }) activeIndex: number = 0\n\n render() {\n return html` <slot> </slot> `\n }\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenu, e: KeyboardEvent) {\n e.stopPropagation()\n\n switch (e.key) {\n case 'Esc': // for IE/Edge\n case 'Escape':\n case 'Left': // for IE/Edge\n case 'ArrowLeft':\n this.close()\n break\n\n case 'Up': // for IE/Edge\n case 'ArrowUp':\n this.activeIndex--\n break\n\n case 'Right': // for IE/Edge\n case 'ArrowRight':\n case 'Down': // for IE/Edge\n case 'ArrowDown':\n this.activeIndex++\n break\n\n case 'Enter':\n e.stopPropagation()\n var menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n if (menu) {\n this.select(menu)\n }\n break\n }\n }.bind(this)\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupMenu, e: FocusEvent) {\n const target = e.target as HTMLElement\n const to = e.relatedTarget as HTMLElement\n const from = target.closest('ox-popup-menu')\n\n if (!to && from !== this) {\n e.stopPropagation()\n\n / \"하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다.\"는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. /\n this.setActive(this.activeIndex)\n } else {\n if (!this.contains(to)) {\n / 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. /\n // @ts-ignore for debug\n !window.POPUP_DEBUG && this.close()\n }\n }\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenu, e: MouseEvent) {\n e.stopPropagation()\n\n const menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n if (menu) {\n this.setActive(menu)\n this.select(menu)\n }\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('activeIndex')) {\n this.setActive(this.activeIndex)\n }\n }\n\n /\n Selects a menu item by dispatching a 'select' event.\n * Closes the menu if the item doesn't have 'alive-on-select' attribute.\n /\n select(menu: Element) {\n menu.dispatchEvent(new CustomEvent('select'))\n if (!menu.hasAttribute('alive-on-select')) {\n this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n }\n }\n\n /\n Sets the active menu item based on the index or the menu element itself.\n /\n setActive(active: number \| Element \| null) {\n const menus = Array.from(this.querySelectorAll(':scope > ox-popup-menuitem, :scope > [menu]'))\n\n menus.map(async (menu, index) => {\n if (typeof active === 'number' && index === (active + menus.length) % menus.length) {\n menu.setAttribute('active', '')\n focusClosest(menu as HTMLElement)\n\n this.activeIndex = index\n } else if (active === menu) {\n if (this.activeIndex === index) {\n / 메뉴의 update를 유도하기 위해서 강제로 토글시킴 /\n menu.removeAttribute('active')\n await this.updateComplete\n menu.setAttribute('active', '')\n }\n\n this.activeIndex = index\n } else {\n menu.removeAttribute('active')\n }\n })\n }\n\n /\n Static method to open a popup menu with the provided template and position options.\n * Creates and returns an instance of OxPopupMenu.\n \n @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n right,\n bottom,\n parent\n }: {\n template: unknown\n top?: number\n left?: number\n right?: number\n bottom?: number\n parent?: Element \| null\n }): OxPopupMenu {\n const owner = parent \|\| document.body\n const target = document.createElement('ox-popup-menu') as OxPopupMenu\n render(template, target)\n\n target.setAttribute('active', '')\n\n target._parent = owner\n\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n\n return target\n }\n}\n"]}
1	+ {"version":3,"file":"ox-popup-menu.js","sourceRoot":"","sources":["../../src/ox-popup-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,SAAS,YAAY,CAAC,OAAoB;IACxC,yCAAyC;IACzC,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAC7B,0EAA0E,CAC5D,CAAA;IAEhB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,CAAA;IAEhB,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,OAAO;IAAjC;;QAkEL;;WAEG;QACyB,gBAAW,GAAW,CAAC,CAAA;QAMzC,eAAU,GAA+B,UAA6B,CAAgB;;YAC9F,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,KAAK,CAAC,CAAC,cAAc;gBAC1B,KAAK,QAAQ,CAAC;gBACd,KAAK,MAAM,CAAC,CAAC,cAAc;gBAC3B,KAAK,WAAW;oBACd,IAAI,CAAC,KAAK,EAAE,CAAA;oBACZ,MAAK;gBAEP,KAAK,IAAI,CAAC,CAAC,cAAc;gBACzB,KAAK,SAAS;oBACZ,IAAI,CAAC,WAAW,EAAE,CAAA;oBAClB,MAAK;gBAEP,KAAK,OAAO,CAAC,CAAC,cAAc;gBAC5B,KAAK,YAAY,CAAC;gBAClB,KAAK,MAAM,CAAC,CAAC,cAAc;gBAC3B,KAAK,WAAW;oBACd,IAAI,CAAC,WAAW,EAAE,CAAA;oBAClB,MAAK;gBAEP,KAAK,OAAO;oBACV,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,IAAI,GAAG,MAAC,CAAC,CAAC,MAAsB,0CAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;oBAC1E,IAAI,IAAI,EAAE,CAAC;wBACT,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;oBACnB,CAAC;oBACD,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,gBAAW,GAA4B,UAA6B,CAAa;YACzF,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;YACtC,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B,CAAA;YACzC,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;YAE5C,IAAI,CAAC,EAAE,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;gBACzB,CAAC,CAAC,eAAe,EAAE,CAAA;gBAEnB,sFAAsF;gBACtF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;YAClC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;oBACvB,wDAAwD;oBACxD,uBAAuB;oBACvB,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;gBACrC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA4B,UAA6B,CAAa;;YACtF,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,IAAI,GAAG,MAAC,CAAC,CAAC,MAAsB,0CAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;YAC5E,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;gBACpB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACnB,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAiFd,CAAC;IAjJC,MAAM;QACJ,OAAO,IAAI,CAAA,kBAAkB,CAAA;IAC/B,CAAC;IAgED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,IAAa;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;QAC7C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClG,CAAC;IACH,CAAC;IAED;;OAEG;IACH,SAAS,CAAC,MAA+B;QACvC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,CAAC,CAAA;QAE9F,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,KAAK,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;gBACnF,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;gBAC/B,YAAY,CAAC,IAAmB,CAAC,CAAA;gBAEjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YAC1B,CAAC;iBAAM,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC3B,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;oBAC/B,mCAAmC;oBACnC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;oBAC9B,MAAM,IAAI,CAAC,cAAc,CAAA;oBACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;gBACjC,CAAC;gBAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAChC,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,EACV,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EAQP;QACC,MAAM,KAAK,GAAG,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAA;QACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAA;QACrE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAExB,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QAEjC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAA;QAEtB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAEzC,OAAO,MAAM,CAAA;IACf,CAAC;;AAtNM,kBAAM,GAAG;IACd,GAAG,OAAO,CAAC,MAAM;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA/DY,CA+DZ;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAwB;AArExC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAwNvB","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPopup } from './ox-popup'\n\nfunction focusClosest(element: HTMLElement) {\n /* Find the closest focusable element. /\n const closest = element.closest(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement\n\n closest?.focus()\n\n return closest\n}\n\n/\n Custom element representing a popup menu. It extends OxPopup.\n /\n@customElement('ox-popup-menu')\nexport class OxPopupMenu extends OxPopup {\n static styles = [\n ...OxPopup.styles,\n css`\n :host {\n display: none;\n flex-direction: column;\n align-items: stretch;\n background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));\n z-index: 100;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n padding: var(--spacing-small) 0;\n\n color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));\n font-size:var(--md-sys-typescale-label-medium-size);\n }\n\n :host([active]) {\n display: flex;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n ::slotted() {\n padding: var(--spacing-medium);\n border-bottom: 1px solid var(--md-sys-color-surface-variant);\n cursor: pointer;\n color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));\n }\n\n ::slotted(:focus) {\n cursor: pointer;\n outline: none;\n }\n\n ::slotted([menu]),\n ::slotted(ox-popup-menuitem) {\n border-left: 3px solid transparent;\n background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));\n color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));\n }\n\n ::slotted([menu][active]),\n ::slotted([menu]:hover),\n ::slotted(ox-popup-menuitem[active]),\n ::slotted(ox-popup-menuitem:hover) {\n background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));\n color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));\n }\n\n ::slotted(ox-popup-menuitem[active]) {\n border-left: 3px solid var(--md-ref-palette-primary50);\n font-weight: var(--md-sys-typescale-label-large-weight);\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));\n }\n `\n ]\n\n /*\n Property to track the index of the active menu item.\n /\n @property({ type: Number }) activeIndex: number = 0\n\n render() {\n return html` <slot> </slot> `\n }\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenu, e: KeyboardEvent) {\n e.stopPropagation()\n\n switch (e.key) {\n case 'Esc': // for IE/Edge\n case 'Escape':\n case 'Left': // for IE/Edge\n case 'ArrowLeft':\n this.close()\n break\n\n case 'Up': // for IE/Edge\n case 'ArrowUp':\n this.activeIndex--\n break\n\n case 'Right': // for IE/Edge\n case 'ArrowRight':\n case 'Down': // for IE/Edge\n case 'ArrowDown':\n this.activeIndex++\n break\n\n case 'Enter':\n e.stopPropagation()\n var menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n if (menu) {\n this.select(menu)\n }\n break\n }\n }.bind(this)\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupMenu, e: FocusEvent) {\n const target = e.target as HTMLElement\n const to = e.relatedTarget as HTMLElement\n const from = target.closest('ox-popup-menu')\n\n if (!to && from !== this) {\n e.stopPropagation()\n\n / \"하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다.\"는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. /\n this.setActive(this.activeIndex)\n } else {\n if (!this.contains(to)) {\n / 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. /\n // @ts-ignore for debug\n !window.POPUP_DEBUG && this.close()\n }\n }\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenu, e: MouseEvent) {\n e.stopPropagation()\n\n const menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n if (menu) {\n this.setActive(menu)\n this.select(menu)\n }\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('activeIndex')) {\n this.setActive(this.activeIndex)\n }\n }\n\n /\n Selects a menu item by dispatching a 'select' event.\n * Closes the menu if the item doesn't have 'alive-on-select' attribute.\n /\n select(menu: Element) {\n menu.dispatchEvent(new CustomEvent('select'))\n if (!menu.hasAttribute('alive-on-select')) {\n this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n }\n }\n\n /\n Sets the active menu item based on the index or the menu element itself.\n /\n setActive(active: number \| Element \| null) {\n const menus = Array.from(this.querySelectorAll(':scope > ox-popup-menuitem, :scope > [menu]'))\n\n menus.map(async (menu, index) => {\n if (typeof active === 'number' && index === (active + menus.length) % menus.length) {\n menu.setAttribute('active', '')\n focusClosest(menu as HTMLElement)\n\n this.activeIndex = index\n } else if (active === menu) {\n if (this.activeIndex === index) {\n / 메뉴의 update를 유도하기 위해서 강제로 토글시킴 /\n menu.removeAttribute('active')\n await this.updateComplete\n menu.setAttribute('active', '')\n }\n\n this.activeIndex = index\n } else {\n menu.removeAttribute('active')\n }\n })\n }\n\n /\n Static method to open a popup menu with the provided template and position options.\n * Creates and returns an instance of OxPopupMenu.\n \n @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n right,\n bottom,\n parent\n }: {\n template: unknown\n top?: number\n left?: number\n right?: number\n bottom?: number\n parent?: Element \| null\n }): OxPopupMenu {\n const owner = parent \|\| document.body\n const target = document.createElement('ox-popup-menu') as OxPopupMenu\n render(template, target)\n\n target.setAttribute('active', '')\n\n target._parent = owner\n\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n\n return target\n }\n}\n"]}