@operato/popup 1.17.2 → 2.0.0-alpha.100

package/CHANGELOG.md

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

package/demo/index.html

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

package/demo/ox-popup-list.html

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

package/demo/ox-popup-menu.html

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

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { LitElement, PropertyValues } from 'lit';
 /**
  * Custom element for creating floating overlays.
@@ -88,7 +88,7 @@ export declare class OxFloatingOverlay extends LitElement {
     private dragMoveHandler;
     overlayed: HTMLDivElement;
     content: HTMLDivElement;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
     firstUpdated(): void;
     connectedCallback(): void;

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -107,8 +107,8 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
           @touchstart=${this.onDragStart.bind(this)}
           draggable="false"
         >
-          <mwc-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
-          ${this.movable ? html `<mwc-icon>drag_indicator</mwc-icon>` : html ``}
+          <md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>
+          ${this.movable ? html `<md-icon>drag_indicator</md-icon>` : html ``}
           <slot name="header">
             ${this.title || this.closable
             ? html `
@@ -134,9 +134,7 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
                 : html ``}
                     ${this.help && searchable ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>` : html ``}
                     ${filterable
-                ? html `<mwc-icon @click=${(e) => filterHandler(this.firstElementChild)}
-                          >tune</mwc-icon
-                        >`
+                ? html `<md-icon @click=${(e) => filterHandler(this.firstElementChild)}>tune</md-icon>`
                 : html ``}
                   </div>
                 `
@@ -145,7 +143,7 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
             ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
             : html ``}
           </slot>
-          <mwc-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</mwc-icon>
+          <md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>
         </div>
 
         <div content>