npm - @operato/input - Versions diffs - 7.0.30 → 7.0.33 - Mend

@operato/input 7.0.30 → 7.0.33

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 (18) hide show

package/CHANGELOG.md +9 -0
package/dist/src/ox-checkbox.d.ts +1 -0
package/dist/src/ox-checkbox.js +7 -3
package/dist/src/ox-checkbox.js.map +1 -1
package/dist/src/ox-input-crontab.d.ts +2 -0
package/dist/src/ox-input-crontab.js +21 -12
package/dist/src/ox-input-crontab.js.map +1 -1
package/dist/src/ox-select.d.ts +2 -0
package/dist/src/ox-select.js +40 -23
package/dist/src/ox-select.js.map +1 -1
package/dist/stories/ox-select.stories.js +1 -1
package/dist/stories/ox-select.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +3 -3
package/src/ox-checkbox.ts +10 -4
package/src/ox-input-crontab.ts +33 -23
package/src/ox-select.ts +42 -28
package/stories/ox-select.stories.ts +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [7.0.33](https://github.com/hatiolab/operato/compare/v7.0.32...v7.0.33) (2024-07-30)
+### :bug: Bug Fix
+* adjust popup position and ox-select listbox ([75e68fe](https://github.com/hatiolab/operato/commit/75e68fe029ea697c06335e9928e1f716a0f2c6ee))
 ### [7.0.30](https://github.com/hatiolab/operato/compare/v7.0.29...v7.0.30) (2024-07-28)

package/dist/src/ox-checkbox.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export declare class OxCheckbox extends OxFormField {
     _hasInner: boolean;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     onClick(): void;
     get checkedIcon(): import("lit-html").TemplateResult<1>;
     get uncheckedIcon(): import("lit-html").TemplateResult<1>;

package/dist/src/ox-checkbox.js CHANGED Viewed

@@ -77,7 +77,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
     ]; }
     render() {
         return html `
-      <div ?disabled=${this.disabled}>
+      <div ?disabled=${this.disabled} @click=${this.onClick}>
         ${this._hasInner && this.left
             ? html ` <span label>
               <slot></slot>
@@ -97,8 +97,12 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('tabindex', '0');
-        this.addEventListener('keydown', this.onKeyDown.bind(this));
-        this.addEventListener('click', this.onClick.bind(this));
+        this.addEventListener('keydown', this.onKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.setAttribute('tabindex', '-1');
+        this.removeEventListener('keydown', this.onKeyDown);
     }
     onClick() {
         if (this.disabled) {

package/dist/src/ox-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH;;EAEE;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QA4D6D,YAAO,GAAwB,KAAK,CAAA;QAC1C,qBAAgB,GAAY,KAAK,CAAA;QACrB,kBAAa,GAAY,KAAK,CAAA;QAChD,SAAI,GAAY,KAAK,CAAA;QAElE,cAAS,GAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAA;~~IA+F9D~~,CAAC;~~aA/JQ~~,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;KACF,AAzDY,CAyDZ;IASD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,QAAQ;~~UAC1B~~,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI;YAC3B,CAAC,CAAC,IAAI,CAAA;;oBAEI;YACV,CAAC,CAAC,EAAE;6BACe,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;YACjD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;;UAEpG,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI;YAC5B,CAAC,CAAC,IAAI,CAAA;;oBAEI;YACV,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,~~IAAI~~,CAAC,~~IAAI~~,~~CAAC~~,CAAC,CAAA;~~QAC3D~~,IAAI,CAAC,~~gBAAgB~~,CAAC,~~OAAO~~,EAAE,IAAI,CAAC,~~OAAO~~,CAAC,~~IAAI~~,CAAC,IAAI,CAAC,CAAC,CAAA;~~IACzD~~,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;YAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;gBAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACrB,CAAC;iBAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;gBAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;YACtB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;gBACzB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;YAC1B,CAAC;QACH,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,OAAO;SACrB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,EAAE,CAAC;YACzC,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACjG,CAAC;;~~AAnGiE~~;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAqC;AAC1C;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDAAkC;AACrB;IAAvE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAA+B;AAChD;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;wCAAsB;AAElE;IAAR,KAAK,EAAE;6CAAoD;AAjEjD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,~~CAgKtB~~","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\n/\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n div {\n display: flex;\n gap: var(--input-intra-gap, 7px);\n\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n .checkbox {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n :host([checked]) .checkbox {\n background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));\n }\n\n path {\n fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n }\n\n :host([indeterminate]) line {\n stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n .label {\n color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));\n line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n }\n\n :host([checked]) .label {\n color: var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));\n font-weight: 700;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean \| undefined = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div ?disabled=${this.disabled}>\n ${this._hasInner && this.left\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner && !this.left\n ? html` <span class=\"label\">\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.~~bind~~(~~this~~))\n this.~~addEventListener~~('~~click~~', this.~~onClick.bind~~(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' \|\| e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
1	+ {"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\n/\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n div {\n display: flex;\n gap: var(--input-intra-gap, 7px);\n\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n .checkbox {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n :host([checked]) .checkbox {\n background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));\n }\n\n path {\n fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n }\n\n :host([indeterminate]) line {\n stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n .label {\n color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));\n line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n }\n\n :host([checked]) .label {\n color: var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));\n font-weight: 700;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean \| undefined = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div ?disabled=${this.disabled} @click=${this.onClick}>\n ${this._hasInner && this.left\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner && !this.left\n ? html` <span class=\"label\">\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.setAttribute('tabindex', '-1')\n this.removeEventListener('keydown', this.onKeyDown)\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' \|\| e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}

package/dist/src/ox-input-crontab.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@
  */
 import { PropertyValues } from 'lit';
 import { OxFormField } from './ox-form-field';
+import '@material/web/fab/fab.js';
+import '@material/web/icon/icon.js';
 export declare class OxInputCrontab extends OxFormField {
     static styles: import("lit").CSSResult;
     value?: string;

package/dist/src/ox-input-crontab.js CHANGED Viewed

@@ -6,6 +6,8 @@ import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { OxFormField } from './ox-form-field';
+import '@material/web/fab/fab.js';
+import '@material/web/icon/icon.js';
 function createCronRegex(type) {
     // https://gist.github.com/dkandalov/a2aed17cfdeb65243022
     var regexByField = {};
@@ -77,6 +79,7 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
     }
     static { this.styles = css `
     :host {
+      position: relative;
       display: block;
       width: 100%;
       height: 100%;
@@ -135,6 +138,7 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
       font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       color: var(--md-sys-color-on-primary-container);
     }
     input:focus {
       outline: none;
       border-color: var(--md-sys-color-secondary-fixed-dim);
@@ -197,7 +201,7 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
     #tooltip > .crontab-description {
       text-align: left;
-      color: var(--md-sys-color-on-primary-container);
+      color: var (--md-sys-color-on-primary-container);
     }
     #button-wrapper {
@@ -208,13 +212,16 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
-    button {
-      border-radius: var(--button-border-radius);
+    md-fab {
       margin: 0.25rem;
+      position: absolute;
+      bottom: 1rem;
+      left: 1rem;
+      color: var(--md-sys-color-on-primary);
     }
-    button:hover,
-    button:active {
-      background-color: var(--md-sys-color-on-primary-container);
+    md-icon {
+      font-size: 24px;
     }
   `; }
     render() {
@@ -359,9 +366,10 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
               <div class="crontab-description">${i18next.t(`text.${tip.description}`)}</div>
             `)}
         </div>
-        <button
-          id="clear"
-          @click=${(e) => {
+        <div id="button-wrapper">
+          <md-fab
+            title="clear"
+            @click=${(e) => {
             e.preventDefault();
             e.stopPropagation();
             this.value = '';
@@ -371,9 +379,10 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
                 detail: this.value
             }));
         }}
-        >
-          Clear
-        </button>
+          >
+            <md-icon slot="icon">delete</md-icon>
+          </md-fab>
+        </div>
       </form>
     `;
     }

package/dist/src/ox-input-crontab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\nfunction createCronRegex(type: 'sec' \| 'min' \| 'hour' \| 'day' \| 'month' \| 'dayOfWeek') {\n // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n var regexByField = {} as any\n regexByField['sec'] = '[0-5]?\\\\d'\n regexByField['min'] = '[0-5]?\\\\d'\n regexByField['hour'] = '[01]?\\\\d\|2[0-3]'\n regexByField['day'] = '0?[1-9]\|[12]\\\\d\|3[01]'\n regexByField['month'] = '[1-9]\|1[012]'\n regexByField['dayOfWeek'] = '[0-7]'\n\n var crontabFields = [type]\n if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n crontabFields.forEach(field => {\n var number = regexByField[field]\n var range =\n '(?:' +\n number +\n ')' +\n '(?:' +\n '(?:-\|/\|,' +\n ('dayOfWeek' === field ? '\|#' : '') +\n ')' +\n '(?:' +\n number +\n ')' +\n ')?'\n if (field === 'dayOfWeek') range += '(?:L)?'\n if (field === 'month') range += '(?:L\|W)?'\n regexByField[field] = '\\\\?\|\\\\\|' + range + '(?:,' + range + ')'\n })\n\n var monthValues = 'JAN\|FEB\|MAR\|APR\|MAY\|JUN\|JUL\|AUG\|SEP\|OCT\|NOV\|DEC'\n var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n regexByField['month'] += '\|\\\\?\|\\\\\|' + monthRange + '(?:,' + monthRange + ')'\n\n var dayOfWeekValues = 'MON\|TUE\|WED\|THU\|FRI\|SAT\|SUN'\n var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n regexByField['dayOfWeek'] += '\|\\\\?\|\\\\\|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')'\n\n if (!type)\n return (\n '^\\\\s($' +\n '\|#' +\n '\|\\\\w+\\\\s=' +\n '\|' +\n '(' +\n regexByField['sec'] +\n ')\\\\s+' +\n '(' +\n regexByField['min'] +\n ')\\\\s+' +\n '(' +\n regexByField['hour'] +\n ')\\\\s+' +\n '(' +\n regexByField['day'] +\n ')\\\\s+' +\n '(' +\n regexByField['month'] +\n ')\\\\s+' +\n '(' +\n regexByField['dayOfWeek'] +\n ')(\|\\\\s)+' +\n ')$'\n )\n else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n :host {\n box-sizing: border-box;\n }\n :host :focus {\n outline: none;\n }\n\n form {\n display: grid;\n width: 100%;\n height: 100%;\n padding: 1rem;\n grid-template: auto auto 1fr auto / repeat(6, 1fr);\n grid-gap: 0.5rem;\n justify-content: center;\n align-items: center;\n overflow: auto;\n }\n\n label[for='example'] {\n text-align: right;\n grid-column: 3;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-transform: capitalize;\n }\n\n #example {\n grid-column: 4 / span 3;\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n text-transform: capitalize;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input {\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n input:invalid {\n border-color: var(--md-sys-color-error);\n color: var(--md-sys-color-error);\n }\n\n label {\n width: 100%;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n label:not([for='example']) {\n text-align: center;\n }\n\n #input-wrapper {\n grid-column: span 6;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -0.25rem;\n }\n\n #input-wrapper > div {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n grid-gap: var(--spacing-small);\n min-width: 60px;\n max-width: 33%;\n margin: 0.25rem;\n }\n\n #tooltip {\n grid-column: span 6;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 0;\n margin: auto;\n grid-auto-rows: min-content;\n align-self: center;\n align-items: center;\n }\n\n #tooltip > div {\n padding: 0.25rem 0.5rem;\n border-bottom: var(--md-sys-color-on-surface-variant) 1px dashed;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n #tooltip > .crontab-value {\n text-align: right;\n color: var(--md-sys-color-surface-tint);\n }\n\n #tooltip > .crontab-description {\n text-align: left;\n color: var(--md-sys-color-on-primary-container);\n }\n\n #button-wrapper {\n grid-column: 1 / span 6;\n display: flex;\n flex-wrap: wrap-reverse;\n flex-direction: row-reverse;\n margin: -0.25rem;\n }\n\n button {\n border-radius: var(--button-border-radius);\n margin: 0.25rem;\n }\n button:hover,\n button:active {\n background-color: var(--md-sys-color-on-primary-container);\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: String }) second?: string\n @property({ type: String }) minute?: string\n @property({ type: String }) hour?: string\n @property({ type: String }) dayOfMonth?: string\n @property({ type: String }) month?: string\n @property({ type: String }) dayOfWeek?: string\n\n @state() tooltip: { value: string; description: string }[] = []\n\n render() {\n return html`\n <form>\n <label for=\"example\">${i18next.t('label.examples')}</label>\n <select\n id=\"example\"\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n .value=${this.value \|\| ''}\n >\n <optgroup label=\"String(${i18next.t('label.second by second')})\">\n <option value=\" * * * * \">${i18next.t('text.every second')}</option>\n <option value=\"0/2 * * * \">${i18next.t('text.every 2 seconds')}</option>\n <option value=\"0/15 * * * \">${i18next.t('text.every 15 seconds')}</option>\n <option value=\"0/30 * * * \">${i18next.t('text.every 30 seconds')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n <option value=\"0 * * * \">${i18next.t('text.every minute')}</option>\n <option value=\"0 0/2 * * \">${i18next.t('text.every 2 minutes')}</option>\n <option value=\"0 0/15 * * \">${i18next.t('text.every 15 minutes')}</option>\n <option value=\"0 0/30 * * \">${i18next.t('text.every half hour')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.hourly')})\">\n <option value=\"0 0 * * \">${i18next.t('text.every hour')}</option>\n <option value=\"0 0 0/2 * \">${i18next.t('text.every 2 hours')}</option>\n <option value=\"0 0 0/12 * \">${i18next.t('text.every 12 hours')}</option>\n <option value=\"0 0 10-19 * \">${i18next.t('text.every hour during working time')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.daily')})\">\n <option value=\"0 0 0 * \">${i18next.t('text.every day')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.weekly')})\">\n <option value=\"0 0 0 * SUN\">${i18next.t('text.every sunday')}</option>\n <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday')}(2)</option>\n <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.monthly')})\">\n <option value=\"0 0 0 1 * \">${i18next.t('text.the first day of every month')}</option>\n <option value=\"0 0 10 21 \">${i18next.t('text.10 am on every payday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.yearly')})\">\n <option value=\"0 0 0 1 1 \">${i18next.t('text.the first day of every year')}</option>\n <option value=\"0 0 0 25 12 \">${i18next.t('text.every christmas')}</option>\n </optgroup>\n </select>\n <div id=\"input-wrapper\">\n <div>\n <input\n id=\"second-input\"\n class=\"second\"\n type=\"text\"\n .value=${this.second \|\| ''}\n @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('second')\n }}\n pattern=${createCronRegex('sec')}\n required\n />\n <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n </div>\n <div>\n <input\n id=\"minute-input\"\n class=\"minute\"\n type=\"text\"\n .value=${this.minute \|\| ''}\n @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('minute')\n }}\n pattern=${createCronRegex('min')}\n required\n />\n <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n </div>\n <div>\n <input\n id=\"hour-input\"\n class=\"hour\"\n type=\"text\"\n .value=${this.hour \|\| ''}\n @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('hour')\n }}\n pattern=${createCronRegex('hour')}\n required\n />\n <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n </div>\n <div>\n <input\n id=\"day-of-month-input\"\n class=\"day-of-month\"\n type=\"text\"\n .value=${this.dayOfMonth \|\| ''}\n @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfMonth')\n }}\n pattern=${createCronRegex('day')}\n required\n />\n <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n </div>\n <div>\n <input\n id=\"month-input\"\n class=\"month\"\n type=\"text\"\n .value=${this.month \|\| ''}\n @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('month')\n }}\n pattern=${createCronRegex('month')}\n required\n />\n <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n </div>\n <div>\n <input\n id=\"day-of-week-input\"\n class=\"day-of-week\"\n type=\"text\"\n .value=${this.dayOfWeek \|\| ''}\n @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfWeek')\n }}\n pattern=${createCronRegex('dayOfWeek')}\n required\n />\n <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n </div>\n </div>\n <div id=\"tooltip\">\n ${this.tooltip.map(\n tip => html`\n <div class=\"crontab-value\">${tip.value}</div>\n <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n `\n )}\n </div>\n <button\n id=\"clear\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n this.value = ''\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n Clear\n </button>\n </form>\n `\n }\n\n get focusableElements(): HTMLElement[] {\n return Array.from(this.renderRoot.querySelectorAll('select, input, button'))\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n var values = (this.value \|\| '').split(' ')\n\n if (values.length == 1) values = ['', '', '', '', '', '']\n else if (values.length == 5) values = ['0'].concat(values)\n\n this.second = values[0]\n this.minute = values[1]\n this.hour = values[2]\n this.dayOfMonth = values[3]\n this.month = values[4]\n this.dayOfWeek = values[5]\n }\n }\n\n showTooltip(type: 'second' \| 'minute' \| 'hour' \| 'dayOfMonth' \| 'month' \| 'dayOfWeek') {\n switch (type) {\n case 'second':\n case 'minute':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-59',\n description: 'allowed values'\n }\n ]\n break\n case 'hour':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-23',\n description: 'allowed values'\n }\n ]\n break\n\n case 'dayOfMonth':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-31',\n description: 'allowed values'\n }\n ]\n break\n\n case 'month':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-12',\n description: 'allowed values'\n },\n {\n value: 'JAN-DEC',\n description: 'alternative single values'\n }\n ]\n break\n\n case 'dayOfWeek':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-6',\n description: 'allowed values'\n },\n {\n value: 'SUN-SAT',\n description: 'alternative single values'\n }\n ]\n break\n\n default:\n this.tooltip = []\n break\n }\n }\n\n onChange() {\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-crontab.js","sourceRoot":"","sources":["../../src/ox-input-crontab.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\nimport '@material/web/fab/fab.js'\nimport '@material/web/icon/icon.js'\n\nfunction createCronRegex(type: 'sec' \| 'min' \| 'hour' \| 'day' \| 'month' \| 'dayOfWeek') {\n // https://gist.github.com/dkandalov/a2aed17cfdeb65243022\n var regexByField = {} as any\n regexByField['sec'] = '[0-5]?\\\\d'\n regexByField['min'] = '[0-5]?\\\\d'\n regexByField['hour'] = '[01]?\\\\d\|2[0-3]'\n regexByField['day'] = '0?[1-9]\|[12]\\\\d\|3[01]'\n regexByField['month'] = '[1-9]\|1[012]'\n regexByField['dayOfWeek'] = '[0-7]'\n\n var crontabFields = [type]\n if (!type) crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek']\n\n crontabFields.forEach(field => {\n var number = regexByField[field]\n var range =\n '(?:' +\n number +\n ')' +\n '(?:' +\n '(?:-\|/\|,' +\n ('dayOfWeek' === field ? '\|#' : '') +\n ')' +\n '(?:' +\n number +\n ')' +\n ')?'\n if (field === 'dayOfWeek') range += '(?:L)?'\n if (field === 'month') range += '(?:L\|W)?'\n regexByField[field] = '\\\\?\|\\\\\|' + range + '(?:,' + range + ')'\n })\n\n var monthValues = 'JAN\|FEB\|MAR\|APR\|MAY\|JUN\|JUL\|AUG\|SEP\|OCT\|NOV\|DEC'\n var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?'\n regexByField['month'] += '\|\\\\?\|\\\\\|' + monthRange + '(?:,' + monthRange + ')'\n\n var dayOfWeekValues = 'MON\|TUE\|WED\|THU\|FRI\|SAT\|SUN'\n var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?'\n regexByField['dayOfWeek'] += '\|\\\\?\|\\\\\|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')'\n\n if (!type)\n return (\n '^\\\\s($' +\n '\|#' +\n '\|\\\\w+\\\\s=' +\n '\|' +\n '(' +\n regexByField['sec'] +\n ')\\\\s+' +\n '(' +\n regexByField['min'] +\n ')\\\\s+' +\n '(' +\n regexByField['hour'] +\n ')\\\\s+' +\n '(' +\n regexByField['day'] +\n ')\\\\s+' +\n '(' +\n regexByField['month'] +\n ')\\\\s+' +\n '(' +\n regexByField['dayOfWeek'] +\n ')(\|\\\\s)+' +\n ')$'\n )\n else return `^${regexByField[type]}$`\n}\n\n@customElement('ox-input-crontab')\nexport class OxInputCrontab extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n :host {\n box-sizing: border-box;\n }\n :host :focus {\n outline: none;\n }\n\n form {\n display: grid;\n width: 100%;\n height: 100%;\n padding: 1rem;\n grid-template: auto auto 1fr auto / repeat(6, 1fr);\n grid-gap: 0.5rem;\n justify-content: center;\n align-items: center;\n overflow: auto;\n }\n\n label[for='example'] {\n text-align: right;\n grid-column: 3;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-transform: capitalize;\n }\n\n #example {\n grid-column: 4 / span 3;\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n text-transform: capitalize;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input {\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n input:invalid {\n border-color: var(--md-sys-color-error);\n color: var(--md-sys-color-error);\n }\n\n label {\n width: 100%;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n label:not([for='example']) {\n text-align: center;\n }\n\n #input-wrapper {\n grid-column: span 6;\n display: flex;\n flex-wrap: wrap;\n margin: 0 -0.25rem;\n }\n\n #input-wrapper > div {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n grid-gap: var(--spacing-small);\n min-width: 60px;\n max-width: 33%;\n margin: 0.25rem;\n }\n\n #tooltip {\n grid-column: span 6;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 0;\n margin: auto;\n grid-auto-rows: min-content;\n align-self: center;\n align-items: center;\n }\n\n #tooltip > div {\n padding: 0.25rem 0.5rem;\n border-bottom: var(--md-sys-color-on-surface-variant) 1px dashed;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n #tooltip > .crontab-value {\n text-align: right;\n color: var(--md-sys-color-surface-tint);\n }\n\n #tooltip > .crontab-description {\n text-align: left;\n color: var (--md-sys-color-on-primary-container);\n }\n\n #button-wrapper {\n grid-column: 1 / span 6;\n display: flex;\n flex-wrap: wrap-reverse;\n flex-direction: row-reverse;\n margin: -0.25rem;\n }\n\n md-fab {\n margin: 0.25rem;\n position: absolute;\n bottom: 1rem;\n left: 1rem;\n color: var(--md-sys-color-on-primary);\n }\n\n md-icon {\n font-size: 24px;\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: String }) second?: string\n @property({ type: String }) minute?: string\n @property({ type: String }) hour?: string\n @property({ type: String }) dayOfMonth?: string\n @property({ type: String }) month?: string\n @property({ type: String }) dayOfWeek?: string\n\n @state() tooltip: { value: string; description: string }[] = []\n\n render() {\n return html`\n <form>\n <label for=\"example\">${i18next.t('label.examples')}</label>\n <select\n id=\"example\"\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n .value=${this.value \|\| ''}\n >\n <optgroup label=\"String(${i18next.t('label.second by second')})\">\n <option value=\" * * * * \">${i18next.t('text.every second')}</option>\n <option value=\"0/2 * * * \">${i18next.t('text.every 2 seconds')}</option>\n <option value=\"0/15 * * * \">${i18next.t('text.every 15 seconds')}</option>\n <option value=\"0/30 * * * \">${i18next.t('text.every 30 seconds')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.minute by minute')})\">\n <option value=\"0 * * * \">${i18next.t('text.every minute')}</option>\n <option value=\"0 0/2 * * \">${i18next.t('text.every 2 minutes')}</option>\n <option value=\"0 0/15 * * \">${i18next.t('text.every 15 minutes')}</option>\n <option value=\"0 0/30 * * \">${i18next.t('text.every half hour')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.hourly')})\">\n <option value=\"0 0 * * \">${i18next.t('text.every hour')}</option>\n <option value=\"0 0 0/2 * \">${i18next.t('text.every 2 hours')}</option>\n <option value=\"0 0 0/12 * \">${i18next.t('text.every 12 hours')}</option>\n <option value=\"0 0 10-19 * \">${i18next.t('text.every hour during working time')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.daily')})\">\n <option value=\"0 0 0 * \">${i18next.t('text.every day')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.weekly')})\">\n <option value=\"0 0 0 * SUN\">${i18next.t('text.every sunday')}</option>\n <option value=\"0 0 0 * * 0\">${i18next.t('text.every sunday')}(2)</option>\n <option value=\"0 0 0 * * 1-5\">${i18next.t('text.every weekday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.monthly')})\">\n <option value=\"0 0 0 1 * \">${i18next.t('text.the first day of every month')}</option>\n <option value=\"0 0 10 21 \">${i18next.t('text.10 am on every payday')}</option>\n </optgroup>\n <optgroup label=\"String(${i18next.t('label.yearly')})\">\n <option value=\"0 0 0 1 1 \">${i18next.t('text.the first day of every year')}</option>\n <option value=\"0 0 0 25 12 \">${i18next.t('text.every christmas')}</option>\n </optgroup>\n </select>\n <div id=\"input-wrapper\">\n <div>\n <input\n id=\"second-input\"\n class=\"second\"\n type=\"text\"\n .value=${this.second \|\| ''}\n @input=${(e: Event) => (this.second = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('second')\n }}\n pattern=${createCronRegex('sec')}\n required\n />\n <label for=\"second-input\" class=\"second\">${i18next.t('label.second')}</label>\n </div>\n <div>\n <input\n id=\"minute-input\"\n class=\"minute\"\n type=\"text\"\n .value=${this.minute \|\| ''}\n @input=${(e: Event) => (this.minute = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('minute')\n }}\n pattern=${createCronRegex('min')}\n required\n />\n <label for=\"minute-input\" class=\"minute\">${i18next.t('label.minute')}</label>\n </div>\n <div>\n <input\n id=\"hour-input\"\n class=\"hour\"\n type=\"text\"\n .value=${this.hour \|\| ''}\n @input=${(e: Event) => (this.hour = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('hour')\n }}\n pattern=${createCronRegex('hour')}\n required\n />\n <label for=\"hour-input\" class=\"hour\">${i18next.t('label.hour')}</label>\n </div>\n <div>\n <input\n id=\"day-of-month-input\"\n class=\"day-of-month\"\n type=\"text\"\n .value=${this.dayOfMonth \|\| ''}\n @input=${(e: Event) => (this.dayOfMonth = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfMonth')\n }}\n pattern=${createCronRegex('day')}\n required\n />\n <label for=\"day-of-month-input\" class=\"day-of-month\">${i18next.t('label.day-of-month')}</label>\n </div>\n <div>\n <input\n id=\"month-input\"\n class=\"month\"\n type=\"text\"\n .value=${this.month \|\| ''}\n @input=${(e: Event) => (this.month = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('month')\n }}\n pattern=${createCronRegex('month')}\n required\n />\n <label for=\"month-input\" class=\"month\">${i18next.t('label.month')}</label>\n </div>\n <div>\n <input\n id=\"day-of-week-input\"\n class=\"day-of-week\"\n type=\"text\"\n .value=${this.dayOfWeek \|\| ''}\n @input=${(e: Event) => (this.dayOfWeek = (e.currentTarget as HTMLInputElement).value)}\n @focus=${(e: Event) => {\n this.showTooltip('dayOfWeek')\n }}\n pattern=${createCronRegex('dayOfWeek')}\n required\n />\n <label for=\"day-of-week-input\" class=\"day-of-week\">${i18next.t('label.day-of-week')}</label>\n </div>\n </div>\n <div id=\"tooltip\">\n ${this.tooltip.map(\n tip => html`\n <div class=\"crontab-value\">${tip.value}</div>\n <div class=\"crontab-description\">${i18next.t(`text.${tip.description}`)}</div>\n `\n )}\n </div>\n <div id=\"button-wrapper\">\n <md-fab\n title=\"clear\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n this.value = ''\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <md-icon slot=\"icon\">delete</md-icon>\n </md-fab>\n </div>\n </form>\n `\n }\n\n get focusableElements(): HTMLElement[] {\n return Array.from(this.renderRoot.querySelectorAll('select, input, button'))\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n this.renderRoot.addEventListener('change', this.onChange.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n var values = (this.value \|\| '').split(' ')\n\n if (values.length == 1) values = ['', '', '', '', '', '']\n else if (values.length == 5) values = ['0'].concat(values)\n\n this.second = values[0]\n this.minute = values[1]\n this.hour = values[2]\n this.dayOfMonth = values[3]\n this.month = values[4]\n this.dayOfWeek = values[5]\n }\n }\n\n showTooltip(type: 'second' \| 'minute' \| 'hour' \| 'dayOfMonth' \| 'month' \| 'dayOfWeek') {\n switch (type) {\n case 'second':\n case 'minute':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-59',\n description: 'allowed values'\n }\n ]\n break\n case 'hour':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-23',\n description: 'allowed values'\n }\n ]\n break\n\n case 'dayOfMonth':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-31',\n description: 'allowed values'\n }\n ]\n break\n\n case 'month':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '1-12',\n description: 'allowed values'\n },\n {\n value: 'JAN-DEC',\n description: 'alternative single values'\n }\n ]\n break\n\n case 'dayOfWeek':\n this.tooltip = [\n {\n value: '',\n description: 'any value'\n },\n {\n value: ',',\n description: 'value list separator'\n },\n {\n value: '-',\n description: 'range of values'\n },\n {\n value: '/',\n description: 'step values'\n },\n {\n value: '0-6',\n description: 'allowed values'\n },\n {\n value: 'SUN-SAT',\n description: 'alternative single values'\n }\n ]\n break\n\n default:\n this.tooltip = []\n break\n }\n }\n\n onChange() {\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}

package/dist/src/ox-select.d.ts CHANGED Viewed

@@ -11,6 +11,8 @@ export declare class OxSelect extends OxFormField {
     name: string;
     placeholder: string;
     label: string | string[];
+    popupContainer: HTMLElement | null;
+    observer: MutationObserver | null;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     updated(changes: PropertyValues<this>): Promise<void>;

package/dist/src/ox-select.js CHANGED Viewed

@@ -7,6 +7,7 @@ import '@operato/popup/ox-popup-list.js';
 import './ox-checkbox.js';
 import { css, html, render } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { OxPopupList } from '@operato/popup';
 import { OxFormField } from './ox-form-field.js';
 let OxSelect = class OxSelect extends OxFormField {
     constructor() {
@@ -14,6 +15,8 @@ let OxSelect = class OxSelect extends OxFormField {
         this.name = '';
         this.placeholder = '';
         this.label = '';
+        this.popupContainer = null;
+        this.observer = null;
     }
     static { this.styles = [
         css `
@@ -62,10 +65,6 @@ let OxSelect = class OxSelect extends OxFormField {
       div:hover md-icon {
         color: var(--md-sys-color-on-primary-container);
       }
-      ::slotted(ox-popup-list) {
-        width: 100%;
-      }
     `
     ]; }
     render() {
@@ -85,17 +84,6 @@ let OxSelect = class OxSelect extends OxFormField {
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('tabindex', '0');
-        this.addEventListener('select', (e) => {
-            this.value = e.detail;
-        });
-        this.addEventListener('close', e => {
-            /* popup이 close될 때 change 이벤트를 발생시킨다. */
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true,
-                detail: this.value
-            }));
-        });
         this.addEventListener('keydown', (e) => {
             e.preventDefault();
             if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {
@@ -106,7 +94,7 @@ let OxSelect = class OxSelect extends OxFormField {
     }
     async updated(changes) {
         if (changes.has('value')) {
-            const popupList = this.querySelector('ox-popup-list');
+            const popupList = this.popupContainer?.querySelector('ox-popup-list');
             if (popupList) {
                 popupList.value = this.value;
                 await this.requestUpdate();
@@ -149,13 +137,36 @@ let OxSelect = class OxSelect extends OxFormField {
         if (this.disabled) {
             return;
         }
-        const popupList = this.querySelector('ox-popup-list');
-        if (popupList) {
-            popupList.style.width = `${this.offsetWidth}px`;
-            popupList.open({
-                left: 0,
-                top: this.offsetHeight
-            });
+        const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() || [];
+        if (slotContent.length > 0) {
+            const popupList = slotContent.find(content => content instanceof OxPopupList);
+            if (popupList) {
+                const { left, bottom } = this.getBoundingClientRect();
+                popupList.value = this.value;
+                popupList.style.width = `${this.offsetWidth}px`;
+                popupList.style.textWrap = 'nowrap';
+                const selectHandler = (e) => {
+                    this.value = e.detail;
+                };
+                popupList.addEventListener('select', selectHandler);
+                const closeHandler = (e) => {
+                    /* popup이 close될 때 change 이벤트를 발생시킨다. */
+                    this.dispatchEvent(new CustomEvent('change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: this.value
+                    }));
+                    popupList.removeEventListener('select', selectHandler);
+                    popupList.removeEventListener('close', closeHandler);
+                    this.appendChild(popupList);
+                };
+                popupList.addEventListener('close', closeHandler, { once: true });
+                document.body.appendChild(popupList);
+                popupList.open({
+                    left,
+                    top: bottom
+                });
+            }
         }
     }
 };
@@ -168,6 +179,12 @@ __decorate([
 __decorate([
     state()
 ], OxSelect.prototype, "label", void 0);
+__decorate([
+    state()
+], OxSelect.prototype, "popupContainer", void 0);
+__decorate([
+    state()
+], OxSelect.prototype, "observer", void 0);
 OxSelect = __decorate([
     customElement('ox-select')
 ], OxSelect);

package/dist/src/ox-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-checkbox.js'\n\nimport { css, html, render, PropertyValues, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-select')\nexport class OxSelect extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n --ox-select-padding: var(--spacing-tiny);\n --ox-select-font: var(--input-font);\n --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n }\n\n div {\n width: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: var(--ox-select-padding);\n font: var(--ox-select-font);\n color: var(--ox-select-color);\n }\n\n span {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n gap: 4px;\n }\n\n md-icon {\n --md-icon-size: 16px;\n display: block;\n text-align: right;\n color: var(--ox-select-icon-color);\n opacity: 0.7;\n }\n\n div:hover md-icon {\n color: var(--md-sys-color-on-primary-container);\n }\n\n ::slotted(ox-popup-list) {\n width: 100%;\n }\n `\n ]\n\n @property({ type: String }) name: string = ''\n @property({ type: String }) placeholder: string = ''\n\n @state() label: string \| string[] = ''\n\n render() {\n const label =\n (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) \|\|\n (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) \|\|\n this.placeholder \|\|\n ''\n\n return html`\n <div @click=${this.expand}>\n <span data-reactive-tooltip>${label}</span>\n <md-icon>expand_more</md-icon>\n </div>\n\n <slot></slot>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('select', (e: Event) => {\n this.value = (e as CustomEvent).detail\n })\n\n this.addEventListener('close', e => {\n / popup이 close될 때 change 이벤트를 발생시킨다. */\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n })\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n e.preventDefault()\n\n if (e.key === ' ' \|\| e.key === 'Spacebar' \|\| e.key === 'ArrowDown') {\n this.expand()\n }\n })\n\n this.addEventListener('click', () => this.expand())\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n if (popupList) {\n popupList.value = this.value\n await this.requestUpdate()\n\n this.label = popupList.getSelectedLabels()\n }\n }\n }\n\n setOptions(\n options: string[] \| { display: string; value: string }[],\n opt: { multiple?: boolean; withSearch?: boolean } = {}\n ) {\n const objOptions = options.map(option => {\n return typeof option == 'string' ? { display: option, value: option } : option\n })\n\n const { multiple, withSearch } = opt \|\| {}\n\n const template = html`\n <ox-popup-list\n align-left\n nowrap\n ?multiple=${multiple}\n attr-selected=${multiple ? 'checked' : ''}\n ?with-search=${withSearch}\n >\n ${multiple\n ? html`<ox-checkbox\n @change=${(e: Event) => {\n const target = e.target as HTMLInputElement\n const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n option => !option.hasAttribute('hidden')\n )\n options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n\n this.value = options\n .map(option =>\n (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined\n )\n .filter(Boolean)\n }}\n >set all</ox-checkbox\n >\n ${objOptions.map(\n option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n )}`\n : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}\n </ox-popup-list>\n `\n\n render(template, this)\n }\n\n expand() {\n if (this.disabled) {\n return\n }\n\n const popupList = this.querySelector('ox-popup-list') as OxPopupList\n\n if (popupList) {\n popupList.style.width = `${this.offsetWidth}px`\n\n popupList.open({\n left: 0,\n top: this.offsetHeight\n })\n }\n }\n}\n"]}
1	+ {"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-checkbox.js'\n\nimport { css, html, render, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-select')\nexport class OxSelect extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n --ox-select-padding: var(--spacing-tiny);\n --ox-select-font: var(--input-font);\n --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n }\n\n div {\n width: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: var(--ox-select-padding);\n font: var(--ox-select-font);\n color: var(--ox-select-color);\n }\n\n span {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n gap: 4px;\n }\n\n md-icon {\n --md-icon-size: 16px;\n display: block;\n text-align: right;\n color: var(--ox-select-icon-color);\n opacity: 0.7;\n }\n\n div:hover md-icon {\n color: var(--md-sys-color-on-primary-container);\n }\n `\n ]\n\n @property({ type: String }) name: string = ''\n @property({ type: String }) placeholder: string = ''\n\n @state() label: string \| string[] = ''\n @state() popupContainer: HTMLElement \| null = null\n @state() observer: MutationObserver \| null = null\n\n render() {\n const label =\n (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) \|\|\n (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) \|\|\n this.placeholder \|\|\n ''\n\n return html`\n <div @click=${this.expand}>\n <span data-reactive-tooltip>${label}</span>\n <md-icon>expand_more</md-icon>\n </div>\n\n <slot></slot>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n e.preventDefault()\n\n if (e.key === ' ' \|\| e.key === 'Spacebar' \|\| e.key === 'ArrowDown') {\n this.expand()\n }\n })\n\n this.addEventListener('click', () => this.expand())\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n const popupList = this.popupContainer?.querySelector('ox-popup-list') as OxPopupList\n if (popupList) {\n popupList.value = this.value\n await this.requestUpdate()\n\n this.label = popupList.getSelectedLabels()\n }\n }\n }\n\n setOptions(\n options: string[] \| { display: string; value: string }[],\n opt: { multiple?: boolean; withSearch?: boolean } = {}\n ) {\n const objOptions = options.map(option => {\n return typeof option == 'string' ? { display: option, value: option } : option\n })\n\n const { multiple, withSearch } = opt \|\| {}\n\n const template = html`\n <ox-popup-list\n align-left\n nowrap\n ?multiple=${multiple}\n attr-selected=${multiple ? 'checked' : ''}\n ?with-search=${withSearch}\n >\n ${multiple\n ? html`<ox-checkbox\n @change=${(e: Event) => {\n const target = e.target as HTMLInputElement\n const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n option => !option.hasAttribute('hidden')\n )\n options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n\n this.value = options\n .map(option =>\n (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined\n )\n .filter(Boolean)\n }}\n >set all</ox-checkbox\n >\n ${objOptions.map(\n option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n )}`\n : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}\n </ox-popup-list>\n `\n\n render(template, this)\n }\n\n expand() {\n if (this.disabled) {\n return\n }\n\n const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() \|\| []\n\n if (slotContent.length > 0) {\n const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList\n\n if (popupList) {\n const { left, bottom } = this.getBoundingClientRect()\n\n popupList.value = this.value\n popupList.style.width = `${this.offsetWidth}px`\n popupList.style.textWrap = 'nowrap'\n\n const selectHandler = (e: Event) => {\n this.value = (e as CustomEvent).detail\n }\n popupList.addEventListener('select', selectHandler)\n\n const closeHandler = (e: Event) => {\n / popup이 close될 때 change 이벤트를 발생시킨다. */\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n popupList.removeEventListener('select', selectHandler)\n popupList.removeEventListener('close', closeHandler)\n\n this.appendChild(popupList)\n }\n popupList.addEventListener('close', closeHandler, { once: true })\n\n document.body.appendChild(popupList)\n\n popupList.open({\n left,\n top: bottom\n })\n }\n }\n }\n}\n"]}

package/dist/stories/ox-select.stories.js CHANGED Viewed

@@ -37,7 +37,7 @@ const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot,
   <style>
     .container {
-      height: 500px;
+      height: 250px;
       text-align: center;
       padding: 20px;

package/dist/stories/ox-select.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;aAoBlB,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;oBACa,WAAW;eAChB,KAAK;kBACF,QAAQ;;QAElB,IAAI;;;CAGX,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,IAAI,CAAA;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,iBAAiB;IAC9B,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC9B,IAAI,EAAE,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,WAAW,EAAE,wBAAwB;IACrC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,IAAI,CAAA;;;kBAGM,CAAC,CAAQ,EAAE,EAAE;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CACnF,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CACzC,CAAA;QACD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CACjF;QAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAU,CAAC,KAAK,GAAG,OAAO;aACnD,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAE,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aACtG,MAAM,CAAC,OAAO,CAAC,CAAA;IACpB,CAAC;;;;;;;;;;;;GAYN;CACF,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-select',\n component: 'ox-select',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n placeholder?: string\n name?: string\n value?: object \| string\n slot?: TemplateResult\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n placeholder = 'Checkbox',\n name = 'hello',\n value = '',\n slot,\n disabled\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: ~~500px~~;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-select {\n width: 300px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-select\n name=${name}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n placeholder=${placeholder}\n .value=${value}\n ?disabled=${disabled}\n >\n ${slot}\n </ox-select>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n placeholder: 'single select',\n name: 'label',\n value: '',\n slot: html`\n <ox-popup-list align-left nowrap>\n <div option value=\"A\">LABEL-A</div>\n <div option value=\"B\">LABEL-B</div>\n <div option value=\"C\">LABEL-C</div>\n <div option value=\"TOO LONG VALUE\">LABEL-TOO LONG VALUE</div>\n </ox-popup-list>\n `\n}\n\nexport const MultipleSelect = Template.bind({})\nMultipleSelect.args = {\n placeholder: 'multiple select',\n name: 'multiple',\n value: ['B', 'TOO LONG VALUE'],\n slot: html`\n <ox-popup-list multiple with-search>\n <div option value=\"A\">A</div>\n <div option value=\"B\">B</div>\n <div option value=\"C\">C</div>\n <div option value=\"D\">D</div>\n <div option value=\"E\">E</div>\n <div option value=\"F\">F</div>\n <div option value=\"G\">G</div>\n <div option value=\"H\">H</div>\n <div option value=\"I\">I</div>\n <div option value=\"J\">J</div>\n <div option value=\"K\">K</div>\n <div option value=\"L\">L</div>\n <div option value=\"M\">M</div>\n <div option value=\"O\">O</div>\n <div option value=\"P\">P</div>\n <div option value=\"Q\">Q</div>\n <div option value=\"R\">R</div>\n <div option value=\"S\">S</div>\n <div option value=\"T\">T</div>\n <div option value=\"U\">U</div>\n <div option value=\"V\">V</div>\n <div option value=\"W\">W</div>\n <div option value=\"X\">X</div>\n <div option value=\"Y\">Y</div>\n <div option value=\"Z\">Z</div>\n <div option value=\"TOO LONG VALUE\" />TOO LONG VALUE</div>\n </ox-popup-list>\n `\n}\n\nexport const MultipleWithCheckbox = Template.bind({})\nMultipleWithCheckbox.args = {\n placeholder: 'multiple with checkbox',\n name: 'multiple',\n value: ['B', 'C', 'F'],\n slot: html`\n <ox-popup-list attr-selected=\"checked\" multiple with-search>\n <ox-checkbox\n @change=${(e: Event) => {\n const target = e.target as HTMLInputElement\n const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n option => !option.hasAttribute('hidden')\n )\n options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n ;(target.closest('ox-select') as any)!.value = options\n .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))\n .filter(Boolean)\n }}\n >set all</ox-checkbox\n >\n <ox-checkbox option value=\"A\">LABEL-A</ox-checkbox>\n <ox-checkbox option value=\"B\">LABEL-B</ox-checkbox>\n <ox-checkbox option value=\"C\" checked>LABEL-C</ox-checkbox>\n <ox-checkbox option value=\"D\">LABEL-D</ox-checkbox>\n <ox-checkbox option value=\"E\">LABEL-E</ox-checkbox>\n <ox-checkbox option value=\"F\">LABEL-F</ox-checkbox>\n <ox-checkbox option value=\"G\">LABEL-G</ox-checkbox>\n <ox-checkbox option value=\"TOO LONG VALUE\">TOO LONG VALUE</ox-checkbox>\n </ox-popup-list>\n `\n}\n"]}
1	+ {"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;aAoBlB,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;oBACa,WAAW;eAChB,KAAK;kBACF,QAAQ;;QAElB,IAAI;;;CAGX,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,IAAI,CAAA;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,iBAAiB;IAC9B,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC9B,IAAI,EAAE,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,WAAW,EAAE,wBAAwB;IACrC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,IAAI,CAAA;;;kBAGM,CAAC,CAAQ,EAAE,EAAE;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CACnF,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CACzC,CAAA;QACD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CACjF;QAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAU,CAAC,KAAK,GAAG,OAAO;aACnD,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAE,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aACtG,MAAM,CAAC,OAAO,CAAC,CAAA;IACpB,CAAC;;;;;;;;;;;;GAYN;CACF,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-select',\n component: 'ox-select',\n argTypes: {\n placeholder: { control: 'text' },\n name: { control: 'text' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n placeholder?: string\n name?: string\n value?: object \| string\n slot?: TemplateResult\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n placeholder = 'Checkbox',\n name = 'hello',\n value = '',\n slot,\n disabled\n}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 250px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-select {\n width: 300px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-select\n name=${name}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n placeholder=${placeholder}\n .value=${value}\n ?disabled=${disabled}\n >\n ${slot}\n </ox-select>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n placeholder: 'single select',\n name: 'label',\n value: '',\n slot: html`\n <ox-popup-list align-left nowrap>\n <div option value=\"A\">LABEL-A</div>\n <div option value=\"B\">LABEL-B</div>\n <div option value=\"C\">LABEL-C</div>\n <div option value=\"TOO LONG VALUE\">LABEL-TOO LONG VALUE</div>\n </ox-popup-list>\n `\n}\n\nexport const MultipleSelect = Template.bind({})\nMultipleSelect.args = {\n placeholder: 'multiple select',\n name: 'multiple',\n value: ['B', 'TOO LONG VALUE'],\n slot: html`\n <ox-popup-list multiple with-search>\n <div option value=\"A\">A</div>\n <div option value=\"B\">B</div>\n <div option value=\"C\">C</div>\n <div option value=\"D\">D</div>\n <div option value=\"E\">E</div>\n <div option value=\"F\">F</div>\n <div option value=\"G\">G</div>\n <div option value=\"H\">H</div>\n <div option value=\"I\">I</div>\n <div option value=\"J\">J</div>\n <div option value=\"K\">K</div>\n <div option value=\"L\">L</div>\n <div option value=\"M\">M</div>\n <div option value=\"O\">O</div>\n <div option value=\"P\">P</div>\n <div option value=\"Q\">Q</div>\n <div option value=\"R\">R</div>\n <div option value=\"S\">S</div>\n <div option value=\"T\">T</div>\n <div option value=\"U\">U</div>\n <div option value=\"V\">V</div>\n <div option value=\"W\">W</div>\n <div option value=\"X\">X</div>\n <div option value=\"Y\">Y</div>\n <div option value=\"Z\">Z</div>\n <div option value=\"TOO LONG VALUE\" />TOO LONG VALUE</div>\n </ox-popup-list>\n `\n}\n\nexport const MultipleWithCheckbox = Template.bind({})\nMultipleWithCheckbox.args = {\n placeholder: 'multiple with checkbox',\n name: 'multiple',\n value: ['B', 'C', 'F'],\n slot: html`\n <ox-popup-list attr-selected=\"checked\" multiple with-search>\n <ox-checkbox\n @change=${(e: Event) => {\n const target = e.target as HTMLInputElement\n const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n option => !option.hasAttribute('hidden')\n )\n options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n ;(target.closest('ox-select') as any)!.value = options\n .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))\n .filter(Boolean)\n }}\n >set all</ox-checkbox\n >\n <ox-checkbox option value=\"A\">LABEL-A</ox-checkbox>\n <ox-checkbox option value=\"B\">LABEL-B</ox-checkbox>\n <ox-checkbox option value=\"C\" checked>LABEL-C</ox-checkbox>\n <ox-checkbox option value=\"D\">LABEL-D</ox-checkbox>\n <ox-checkbox option value=\"E\">LABEL-E</ox-checkbox>\n <ox-checkbox option value=\"F\">LABEL-F</ox-checkbox>\n <ox-checkbox option value=\"G\">LABEL-G</ox-checkbox>\n <ox-checkbox option value=\"TOO LONG VALUE\">TOO LONG VALUE</ox-checkbox>\n </ox-popup-list>\n `\n}\n"]}