@operato/form 2.0.0-alpha.92 → 2.0.0-beta.0

package/dist/src/filters/ox-filters-form-base.js

@@ -4,8 +4,9 @@ import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
 import '@operato/input/ox-input-search.js';
 import json5 from 'json5';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, queryAsync, state } from 'lit/decorators.js';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 import { getDefaultValue } from '@operato/time-calculator';
 import { FilterStyles } from './filter-styles.js';
 import { getFilterRenderer } from './registry.js';
@@ -15,14 +16,30 @@ let OxFiltersFormBase = class OxFiltersFormBase extends LitElement {
         this.value = [];
         this.filters = [];
         this.autofocus = true;
+        this.autoUpdateTargetsOnChange = {};
     }
     connectedCallback() {
         super.connectedCallback();
         this.renderRoot.addEventListener('change', async (e) => {
             const { target, detail: value } = e;
             const name = target.name;
-            const { label, type, operator, value: defaultValue, onchange } = this.filters.find(filter => filter.name == name) || {};
-            const keepGoing = onchange ? onchange.call(null, value !== null && value !== void 0 ? value : target.value, this) : true;
+            const { label, type, operator, value: defaultValue, onchange } = (this.personalFilters || []).find(filter => filter.name == name) || {};
+            if (this.autoUpdateTargetsOnChange[name]) {
+                /*
+                  일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함.
+                  */
+                ;
+                (this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
+                    const target = this.renderRoot.querySelector(`[name='${name}']`);
+                    if (target) {
+                        ;
+                        target.value = '';
+                    }
+                });
+                this.requestUpdate();
+            }
+            const keepGoing = onchange ? await onchange.call(null, value !== null && value !== void 0 ? value : target.value, this) : true;
+            this.value = await this.getQueryFilters();
             keepGoing &&
                 this.dispatchEvent(new CustomEvent('filters-change', {
                     bubbles: true,
@@ -39,7 +56,7 @@ let OxFiltersFormBase = class OxFiltersFormBase extends LitElement {
             return;
         }
         if (operator == 'between') {
-            return defaultValue.map(v => getDefaultValue(v, this));
+            return defaultValue instanceof Array && defaultValue.map(v => getDefaultValue(v, this));
         }
         else {
             return getDefaultValue(defaultValue, this);
@@ -48,78 +65,91 @@ let OxFiltersFormBase = class OxFiltersFormBase extends LitElement {
     render() {
         return html `
       <form
+        class="md-typescale-body-medium-prominent"
         @submit=${(e) => {
             e.preventDefault();
         }}
       >
-        ${this.filters.map((filter) => {
+        ${(this.personalFilters || [])
+            .filter(filter => !filter.hidden)
+            .map((filter) => {
             var _a, _b, _c;
-            const { name, label, type, operator, value: defaultValue } = filter;
+            const { name, label, type, operator, readonly, value: defaultValue } = filter;
             const idx = operator === 'between' ? 1 : 0;
             const renderer = getFilterRenderer(operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
                 ? 'text'
                 : type)[idx];
             const value = (_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.find(filter => filter.name == name)) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : this.buildDefaultValue(operator, defaultValue);
             if (!renderer) {
-                return html ``;
+                return nothing;
             }
             return type === 'search'
-                ? html `<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
-                : type === 'boolean'
+                ? html `<ox-input-search
+                  name="search"
+                  .value=${value}
+                  ?autofocus=${this.autofocus}
+                  ?readonly=${readonly}
+                ></ox-input-search>`
+                : type === 'boolean' || type === 'checkbox'
                     ? renderer(filter, value, this)
                     : type !== 'select'
                         ? html `
-                    <label filter-title ?between=${operator == 'between'}
-                      ><span>${label}</span> ${renderer(filter, value, this)}
-                    </label>
-                  `
-                        : operator === 'in'
-                            ? html `
-                      <ox-select
-                        name=${name}
-                        placeholder=${label}
-                        .value=${value}
-                        @change=${(e) => {
-                                var _a;
-                                return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
-                                    detail: {
-                                        name,
-                                        operator,
-                                        value: e.detail
-                                    }
-                                }));
-                            }}
-                      >
-                        <ox-popup-list multiple attr-selected="checked" with-search>
-                          ${renderer(filter, value, this)}
-                        </ox-popup-list>
-                      </ox-select>
+                      <label filter-title ?between=${operator == 'between'}
+                        ><span>${label}</span> ${renderer(filter, value, this)}
+                      </label>
                     `
-                            : html `
-                      <ox-select
-                        name=${name}
-                        placeholder=${label}
-                        .value=${value}
-                        @change=${(e) => {
-                                var _a;
-                                return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
-                                    detail: {
-                                        name,
-                                        operator,
-                                        value: e.detail
-                                    }
-                                }));
-                            }}
-                      >
-                        <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
-                      </ox-select>
-                    `;
+                        : this.renderSelect(filter, value, renderer);
         })}
       </form>
+
+      <slot name="setting"></slot>
     `;
     }
-    getFieldByName(name) {
-        return this.renderRoot.querySelector(`[name=${name}]`);
+    renderSelect(filter, value, renderer) {
+        const { name, label, operator, readonly, value: defaultValue } = filter;
+        return operator === 'in'
+            ? html `
+          <ox-select
+            name=${name}
+            placeholder=${label}
+            .value=${value !== null && value !== void 0 ? value : defaultValue}
+            @change=${(e) => {
+                var _a;
+                return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                    detail: {
+                        name,
+                        operator,
+                        value: e.detail
+                    }
+                }));
+            }}
+            ?readonly=${readonly}
+          >
+            <ox-popup-list multiple attr-selected="checked" with-search>
+              ${renderer(filter, value, this)}
+            </ox-popup-list>
+          </ox-select>
+        `
+            : html `
+          <ox-select
+            name=${name}
+            placeholder=${label}
+            .value=${value !== null && value !== void 0 ? value : defaultValue}
+            @change=${(e) => {
+                var _a;
+                return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                    detail: {
+                        name,
+                        operator,
+                        value: e.detail
+                    }
+                }));
+            }}
+            ?readonly=${readonly}
+          >
+            <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+          </ox-select>
+        `;
     }
     async updated(changes) {
         if (changes.has('urlParamsSensitive')) {
@@ -175,10 +205,68 @@ let OxFiltersFormBase = class OxFiltersFormBase extends LitElement {
                 }
             }
         }
+        if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+            this.personalConfig = await this.personalConfigProvider.load();
+        }
+        else if (changes.has('filters') || changes.has('personalConfig')) {
+            this.applyUpdatedConfiguration();
+        }
+    }
+    async applyUpdatedConfiguration() {
+        var _a;
+        if (!this.filters) {
+            return;
+        }
+        if (!this.personalConfig) {
+            this.personalFilters = [...this.filters];
+        }
+        else {
+            const { filters: personalFilters } = this.personalConfig;
+            if (personalFilters) {
+                const xfilters = this.filters.map((filter) => {
+                    const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name);
+                    return personalFilter ? { ...filter, ...personalFilter } : filter;
+                });
+                function reorderList(a, b) {
+                    // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
+                    const result = new Array(a.length);
+                    // b 배열에 없는 아이템은 원래 위치로 채움
+                    a.forEach((item, index) => {
+                        if (!item.name || !b.find(bi => bi.name == item.name)) {
+                            result[index] = item;
+                        }
+                    });
+                    b.forEach(item => {
+                        const ai = a.find(ai => ai.name == item.name);
+                        if (ai) {
+                            result[result.findIndex(slot => slot === undefined)] = ai;
+                        }
+                    });
+                    return result;
+                }
+                // 배열 재정렬 실행
+                this.personalFilters = reorderList(xfilters, personalFilters);
+            }
+        }
+        this.autoUpdateTargetsOnChange = {};
+        (_a = this.personalFilters) === null || _a === void 0 ? void 0 : _a.filter(filter => filter.boundTo && filter.boundTo.length > 0).map(({ name, boundTo }) => {
+            boundTo.forEach(to => {
+                const origin = this.autoUpdateTargetsOnChange[to] || [];
+                if (name && !origin.includes(name)) {
+                    this.autoUpdateTargetsOnChange[to] = [...origin, name];
+                }
+            });
+        });
+        if (!this.urlParamsSensitive) {
+            this.value = await this.getQueryFilters();
+        }
+    }
+    getFieldByName(name) {
+        return this.renderRoot.querySelector(`[name=${name}]`);
     }
     async getQueryFilters() {
         const formData = new FormData(await this.form);
-        var filters = this.filters
+        var filters = (this.personalFilters || [])
             .map((filter) => {
             const { name, type, operator } = filter;
             var value = formData.getAll(name);
@@ -212,12 +300,50 @@ let OxFiltersFormBase = class OxFiltersFormBase extends LitElement {
             .filter(result => result !== undefined);
         return filters;
     }
+    reset(value) {
+        this.form
+            .then((form) => {
+            if (value) {
+                if (value instanceof Array) {
+                    value
+                        .filter(item => typeof item == 'string')
+                        .forEach(item => {
+                        const field = this.getFieldByName(item);
+                        if (field) {
+                            ;
+                            field.value = '';
+                        }
+                    });
+                }
+                else {
+                    const keys = Object.keys(value);
+                    keys
+                        .filter(key => typeof key == 'string')
+                        .forEach(key => {
+                        const field = this.getFieldByName(key);
+                        if (field) {
+                            ;
+                            field.value = value[key];
+                        }
+                    });
+                }
+            }
+            else {
+                form.reset();
+            }
+        })
+            .catch((error) => {
+            console.error('Error resetting the form:', error);
+        });
+    }
 };
 OxFiltersFormBase.styles = [
+    MDTypeScaleStyles,
     FilterStyles,
     css `
       :host {
         display: flex;
+        padding: var(--spacing-small);
       }
 
       form {
@@ -225,13 +351,13 @@ OxFiltersFormBase.styles = [
 
         display: flex;
         flex-flow: row wrap;
-        gap: var(--ox-filters-form-gap);
+        gap: var(--spacing-medium) var(--spacing-large);
       }
 
       form > * {
         display: flex;
         align-items: center;
-        gap: var(--input-intra-gap, 7px);
+        gap: var(--spacing-small, 4px);
       }
 
       label span {
@@ -239,8 +365,9 @@ OxFiltersFormBase.styles = [
       }
 
       @media only screen and (max-width: 460px) {
-        label[between] {
-          display: block;
+        form {
+          flex-direction: column;
+          flex-flow: column;
         }
       }
     `
@@ -257,6 +384,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'autofocus' })
 ], OxFiltersFormBase.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Object })
+], OxFiltersFormBase.prototype, "personalConfigProvider", void 0);
+__decorate([
+    state()
+], OxFiltersFormBase.prototype, "personalConfig", void 0);
+__decorate([
+    state()
+], OxFiltersFormBase.prototype, "personalFilters", void 0);
 __decorate([
     queryAsync('form')
 ], OxFiltersFormBase.prototype, "form", void 0);

package/dist/src/filters/ox-filters-form-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterValue } from '../types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\n@customElement('ox-filters-form-base')\nexport class OxFiltersFormBase extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n        gap: var(--input-intra-gap, 7px);\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Array }) filters: FilterConfig[] = []\n  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  private _popstateEventHandler?: EventListener\n  private _filtersChangeHandler?: EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', async (e: Event) => {\n      const { target, detail: value } = e as CustomEvent\n      const name = (target as HTMLInputElement).name\n      const {\n        label,\n        type,\n        operator,\n        value: defaultValue,\n        onchange\n      } = this.filters.find(filter => filter.name == name) || {}\n\n      const keepGoing = onchange ? onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n      keepGoing &&\n        this.dispatchEvent(\n          new CustomEvent('filters-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: this.value,\n              from: 'filters-form'\n            }\n          })\n        )\n    })\n  }\n\n  buildDefaultValue(operator: string, defaultValue: any) {\n    if (defaultValue === undefined) {\n      return\n    }\n    if (operator == 'between') {\n      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n    } else {\n      return getDefaultValue(defaultValue, this)\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form\n        @submit=${(e: Event) => {\n          e.preventDefault()\n        }}\n      >\n        ${this.filters.map((filter: FilterConfig) => {\n          const { name, label, type, operator, value: defaultValue } = filter\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(\n            operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n              ? 'text'\n              : type\n          )[idx]\n\n          const value =\n            this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)\n\n          if (!renderer) {\n            return html``\n          }\n\n          return type === 'search'\n            ? html`<ox-input-search name=\"search\" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`\n            : type === 'boolean'\n              ? renderer(filter, value, this)\n              : type !== 'select'\n                ? html`\n                    <label filter-title ?between=${operator == 'between'}\n                      ><span>${label}</span> ${renderer(filter, value, this)}\n                    </label>\n                  `\n                : operator === 'in'\n                  ? html`\n                      <ox-select\n                        name=${name}\n                        placeholder=${label}\n                        .value=${value}\n                        @change=${(e: CustomEvent) =>\n                          e.target?.dispatchEvent(\n                            new CustomEvent('filter-change', {\n                              detail: {\n                                name,\n                                operator,\n                                value: e.detail\n                              }\n                            })\n                          )}\n                      >\n                        <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                          ${renderer(filter, value, this)}\n                        </ox-popup-list>\n                      </ox-select>\n                    `\n                  : html`\n                      <ox-select\n                        name=${name}\n                        placeholder=${label}\n                        .value=${value}\n                        @change=${(e: CustomEvent) =>\n                          e.target?.dispatchEvent(\n                            new CustomEvent('filter-change', {\n                              detail: {\n                                name,\n                                operator,\n                                value: e.detail\n                              }\n                            })\n                          )}\n                      >\n                        <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n                      </ox-select>\n                    `\n        })}\n      </form>\n    `\n  }\n\n  getFieldByName(name: string) {\n    return this.renderRoot.querySelector(`[name=${name}]`)\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('urlParamsSensitive')) {\n      if (this.urlParamsSensitive) {\n        this._popstateEventHandler = () => {\n          const queryString = window.location.search\n          const urlParams = new URLSearchParams(queryString)\n          var filters = urlParams.get('filters')\n\n          if (filters) {\n            try {\n              this.value = json5.parse(filters)\n              this.dispatchEvent(\n                new CustomEvent('filters-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    filters: json5.parse(filters),\n                    from: 'url-parameter'\n                  }\n                })\n              )\n            } catch (e) {\n              console.error(`invalid filters params on URL query string : ${e}`)\n            }\n          }\n        }\n\n        //@ts-ignore\n        this._popstateEventHandler() // call for the first time\n\n        window.addEventListener('popstate', this._popstateEventHandler)\n\n        this._filtersChangeHandler = (e: Event) => {\n          const urlParams = new URLSearchParams(window.location.search)\n          const { filters, from } = (e as CustomEvent).detail || {}\n\n          if (from === 'url-parameter') {\n            return\n          }\n\n          if (filters.length > 0) {\n            urlParams.set('filters', json5.stringify(filters))\n          } else {\n            urlParams.delete('filters')\n          }\n          const queryString = String(urlParams)\n          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n          history.pushState({}, document.title, url)\n        }\n\n        this.addEventListener('filters-change', this._filtersChangeHandler)\n      } else {\n        if (this._popstateEventHandler) {\n          window.removeEventListener('popstate', this._popstateEventHandler)\n        }\n        if (this._filtersChangeHandler) {\n          this.removeEventListener('popstate', this._filtersChangeHandler)\n        }\n      }\n    }\n  }\n\n  async getQueryFilters(): Promise<FilterValue[]> {\n    const formData = new FormData(await this.form)\n\n    var filters = this.filters\n      .map((filter: FilterConfig) => {\n        const { name, type, operator } = filter\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as FilterValue[]\n\n    return filters\n  }\n}\n"]}
+{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { getDefaultValue } from '@operato/time-calculator'\nimport { PagePreferenceProvider } from '@operato/p13n'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue, PersonalFilterPreference } from '../types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\n@customElement('ox-filters-form-base')\nexport class OxFiltersFormBase extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n        padding: var(--spacing-small);\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--spacing-medium) var(--spacing-large);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-small, 4px);\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        form {\n          flex-direction: column;\n          flex-flow: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Array }) filters: FilterConfig[] = []\n  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Object }) personalConfigProvider?: PagePreferenceProvider\n\n  @state() personalConfig?: PersonalFilterPreference\n  @state() personalFilters?: FilterConfig[]\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  private _popstateEventHandler?: EventListener\n  private _filtersChangeHandler?: EventListener\n  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', async (e: Event) => {\n      const { target, detail: value } = e as CustomEvent\n      const name = (target as HTMLInputElement).name\n      const {\n        label,\n        type,\n        operator,\n        value: defaultValue,\n        onchange\n      } = (this.personalFilters || []).find(filter => filter.name == name) || {}\n\n      if (this.autoUpdateTargetsOnChange[name]) {\n        /* \n          일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함.\n          */\n        ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {\n          const target = this.renderRoot.querySelector(`[name='${name}']`)\n          if (target) {\n            ;(target as HTMLInputElement).value = ''\n          }\n        })\n\n        this.requestUpdate()\n      }\n\n      const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n      this.value = await this.getQueryFilters()\n\n      keepGoing &&\n        this.dispatchEvent(\n          new CustomEvent('filters-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: this.value,\n              from: 'filters-form'\n            }\n          })\n        )\n    })\n  }\n\n  buildDefaultValue(operator: FilterOperator, defaultValue: any) {\n    if (defaultValue === undefined) {\n      return\n    }\n    if (operator == 'between') {\n      return defaultValue instanceof Array && (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n    } else {\n      return getDefaultValue(defaultValue, this)\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form\n        class=\"md-typescale-body-medium-prominent\"\n        @submit=${(e: Event) => {\n          e.preventDefault()\n        }}\n      >\n        ${(this.personalFilters || [])\n          .filter(filter => !filter.hidden)\n          .map((filter: FilterConfig) => {\n            const { name, label, type, operator, readonly, value: defaultValue } = filter\n            const idx = operator === 'between' ? 1 : 0\n            const renderer = getFilterRenderer(\n              operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n                ? 'text'\n                : type\n            )[idx]\n\n            const value =\n              this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)\n\n            if (!renderer) {\n              return nothing\n            }\n\n            return type === 'search'\n              ? html`<ox-input-search\n                  name=\"search\"\n                  .value=${value}\n                  ?autofocus=${this.autofocus}\n                  ?readonly=${readonly}\n                ></ox-input-search>`\n              : type === 'boolean' || type === 'checkbox'\n                ? renderer(filter, value, this)\n                : type !== 'select'\n                  ? html`\n                      <label filter-title ?between=${operator == 'between'}\n                        ><span>${label}</span> ${renderer(filter, value, this)}\n                      </label>\n                    `\n                  : this.renderSelect(filter, value, renderer)\n          })}\n      </form>\n\n      <slot name=\"setting\"></slot>\n    `\n  }\n\n  renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {\n    const { name, label, operator, readonly, value: defaultValue } = filter\n\n    return operator === 'in'\n      ? html`\n          <ox-select\n            name=${name}\n            placeholder=${label}\n            .value=${value ?? defaultValue}\n            @change=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  detail: {\n                    name,\n                    operator,\n                    value: e.detail\n                  }\n                })\n              )}\n            ?readonly=${readonly}\n          >\n            <ox-popup-list multiple attr-selected=\"checked\" with-search>\n              ${renderer(filter, value, this)}\n            </ox-popup-list>\n          </ox-select>\n        `\n      : html`\n          <ox-select\n            name=${name}\n            placeholder=${label}\n            .value=${value ?? defaultValue}\n            @change=${(e: CustomEvent) =>\n              e.target?.dispatchEvent(\n                new CustomEvent('filter-change', {\n                  detail: {\n                    name,\n                    operator,\n                    value: e.detail\n                  }\n                })\n              )}\n            ?readonly=${readonly}\n          >\n            <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n          </ox-select>\n        `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('urlParamsSensitive')) {\n      if (this.urlParamsSensitive) {\n        this._popstateEventHandler = () => {\n          const queryString = window.location.search\n          const urlParams = new URLSearchParams(queryString)\n          var filters = urlParams.get('filters')\n\n          if (filters) {\n            try {\n              this.value = json5.parse(filters)\n              this.dispatchEvent(\n                new CustomEvent('filters-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    filters: json5.parse(filters),\n                    from: 'url-parameter'\n                  }\n                })\n              )\n            } catch (e) {\n              console.error(`invalid filters params on URL query string : ${e}`)\n            }\n          }\n        }\n\n        //@ts-ignore\n        this._popstateEventHandler() // call for the first time\n\n        window.addEventListener('popstate', this._popstateEventHandler)\n\n        this._filtersChangeHandler = (e: Event) => {\n          const urlParams = new URLSearchParams(window.location.search)\n          const { filters, from } = (e as CustomEvent).detail || {}\n\n          if (from === 'url-parameter') {\n            return\n          }\n\n          if (filters.length > 0) {\n            urlParams.set('filters', json5.stringify(filters))\n          } else {\n            urlParams.delete('filters')\n          }\n          const queryString = String(urlParams)\n          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n          history.pushState({}, document.title, url)\n        }\n\n        this.addEventListener('filters-change', this._filtersChangeHandler)\n      } else {\n        if (this._popstateEventHandler) {\n          window.removeEventListener('popstate', this._popstateEventHandler)\n        }\n        if (this._filtersChangeHandler) {\n          this.removeEventListener('popstate', this._filtersChangeHandler)\n        }\n      }\n    }\n\n    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {\n      this.personalConfig = await this.personalConfigProvider.load()\n    } else if (changes.has('filters') || changes.has('personalConfig')) {\n      this.applyUpdatedConfiguration()\n    }\n  }\n\n  async applyUpdatedConfiguration() {\n    if (!this.filters) {\n      return\n    }\n\n    if (!this.personalConfig) {\n      this.personalFilters = [...this.filters]\n    } else {\n      const { filters: personalFilters } = this.personalConfig\n\n      if (personalFilters) {\n        const xfilters = this.filters.map((filter: Partial<FilterConfig>) => {\n          const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name)\n          return personalFilter ? { ...filter, ...personalFilter } : filter\n        })\n\n        function reorderList(a: Partial<FilterConfig>[], b: Partial<FilterConfig>[]): Partial<FilterConfig>[] {\n          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움\n          const result = new Array(a.length)\n\n          // b 배열에 없는 아이템은 원래 위치로 채움\n          a.forEach((item, index) => {\n            if (!item.name || !b.find(bi => bi.name == item.name)) {\n              result[index] = item\n            }\n          })\n\n          b.forEach(item => {\n            const ai = a.find(ai => ai.name == item.name)\n            if (ai) {\n              result[result.findIndex(slot => slot === undefined)] = ai\n            }\n          })\n\n          return result\n        }\n\n        // 배열 재정렬 실행\n        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterConfig[]\n      }\n    }\n\n    this.autoUpdateTargetsOnChange = {}\n\n    this.personalFilters\n      ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)\n      .map(({ name, boundTo }) => {\n        boundTo!.forEach(to => {\n          const origin = this.autoUpdateTargetsOnChange[to] || []\n          if (name && !origin.includes(name)) {\n            this.autoUpdateTargetsOnChange[to] = [...origin, name]\n          }\n        })\n      })\n\n    if (!this.urlParamsSensitive) {\n      this.value = await this.getQueryFilters()\n    }\n  }\n\n  getFieldByName(name: string) {\n    return this.renderRoot.querySelector(`[name=${name}]`)\n  }\n\n  async getQueryFilters(): Promise<FilterValue[]> {\n    const formData = new FormData(await this.form)\n\n    var filters = (this.personalFilters || [])\n      .map((filter: FilterConfig) => {\n        const { name, type, operator } = filter\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as FilterValue[]\n\n    return filters\n  }\n\n  reset(value?: string[] | { [field: string]: any }) {\n    this.form\n      .then((form: HTMLFormElement) => {\n        if (value) {\n          if (value instanceof Array) {\n            value\n              .filter(item => typeof item == 'string')\n              .forEach(item => {\n                const field = this.getFieldByName(item)\n                if (field) {\n                  ;(field as HTMLInputElement).value = ''\n                }\n              })\n          } else {\n            const keys = Object.keys(value)\n            keys\n              .filter(key => typeof key == 'string')\n              .forEach(key => {\n                const field = this.getFieldByName(key)\n                if (field) {\n                  ;(field as HTMLInputElement).value = value[key]\n                }\n              })\n          }\n        } else {\n          form.reset()\n        }\n      })\n      .catch((error: any) => {\n        console.error('Error resetting the form:', error)\n      })\n  }\n}\n"]}

package/dist/src/styles/multi-column-form-styles.js

@@ -22,7 +22,7 @@ export const MultiColumnFormStyles = css `
 
     padding: var(--legend-padding);
     font: var(--legend-font);
-    color: var(--legend-text-color);
+    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
     border-bottom: var(--legend-border-bottom);
   }
 
@@ -32,7 +32,7 @@ export const MultiColumnFormStyles = css `
     text-transform: capitalize;
     align-self: center;
 
-    color: var(--label-color);
+    color: var(--label-color, var(--md-sys-color-on-surface));
     font: var(--label-font);
   }
 
@@ -71,7 +71,7 @@ export const MultiColumnFormStyles = css `
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
   }
   .multi-column-form [options-wrap] {
     grid-column: span 21 / auto;
@@ -79,7 +79,7 @@ export const MultiColumnFormStyles = css `
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
+    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
   }
   input[type='checkbox'] {
     margin: 0;
@@ -108,7 +108,7 @@ export const MultiColumnFormStyles = css `
     .multi-column-form [custom-input] {
       grid-column: span 8 / auto;
       max-width: initial;
-      padding: var(--padding-default);
+      padding: var(--padding-default, var(--spacing-medium));
       font: normal 15px var(--theme-font);
     }
     .multi-column-form input[type='checkbox'],
@@ -130,7 +130,7 @@ export const MultiColumnFormStyles = css `
     .multi-column-form [options-wrap] {
       grid-column: span 12 / auto;
       display: grid;
-      grid-gap: var(--padding-default) var(--padding-narrow);
+      grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));
       grid-template-columns: repeat(12, 1fr);
     }
     .multi-column-form [options-wrap] input[type='checkbox'] + label,

package/dist/src/styles/multi-column-form-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n  :host {\n    overflow: auto;\n    padding: var(--form-container-padding);\n  }\n\n  .multi-column-form {\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    max-width: var(--form-multi-column-max-width);\n    margin: var(--form-margin);\n  }\n  .multi-column-form fieldset {\n    display: contents;\n  }\n  .multi-column-form legend {\n    grid-column: span 24;\n    text-transform: capitalize;\n\n    padding: var(--legend-padding);\n    font: var(--legend-font);\n    color: var(--legend-text-color);\n    border-bottom: var(--legend-border-bottom);\n  }\n\n  .multi-column-form label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    align-self: center;\n\n    color: var(--label-color);\n    font: var(--label-font);\n  }\n\n  .multi-column-form input,\n  .multi-column-form table,\n  .multi-column-form select,\n  .multi-column-form textarea,\n  .multi-column-form [custom-input] {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n  }\n  .multi-column-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .multi-column-form input[type='checkbox'],\n  .multi-column-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .multi-column-form input[type='checkbox'] + label,\n  .multi-column-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color);\n  }\n  .multi-column-form [options-wrap] {\n    grid-column: span 21 / auto;\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color);\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  @media screen and (max-width: 460px) {\n    .multi-column-form {\n      max-width: 100%;\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 5px;\n    }\n    .multi-column-form legend {\n      grid-column: span 12;\n    }\n    .multi-column-form label {\n      grid-column: span 4 / auto;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      grid-column: span 8 / auto;\n      max-width: initial;\n      padding: var(--padding-default);\n      font: normal 15px var(--theme-font);\n    }\n    .multi-column-form input[type='checkbox'],\n    .multi-column-form input[type='radio'] {\n      justify-self: left;\n      align-self: center;\n      grid-column: span 1 / auto;\n      left: 0;\n      zoom: 1.4;\n    }\n\n    .multi-column-form input[type='checkbox'] + label,\n    .multi-column-form input[type='radio'] + label {\n      grid-column: span 11 / auto;\n      align-self: center;\n      position: relative;\n      left: -25px;\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 12 / auto;\n      display: grid;\n      grid-gap: var(--padding-default) var(--padding-narrow);\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .multi-column-form [options-wrap] input[type='checkbox'] + label,\n    .multi-column-form [options-wrap] input[type='radio'] + label {\n      grid-column: span 5 / auto;\n      align-self: left;\n      left: -4%;\n      margin-right: 0;\n    }\n  }\n  @media (min-width: 481px) and (max-width: 1024px) {\n    .multi-column-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .multi-column-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 36;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 33 / auto;\n    }\n  }\n  @media screen and (min-width: 2001px) {\n    .multi-column-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 48;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 45 / auto;\n    }\n  }\n`\n"]}
+{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n  :host {\n    overflow: auto;\n    padding: var(--form-container-padding);\n  }\n\n  .multi-column-form {\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    max-width: var(--form-multi-column-max-width);\n    margin: var(--form-margin);\n  }\n  .multi-column-form fieldset {\n    display: contents;\n  }\n  .multi-column-form legend {\n    grid-column: span 24;\n    text-transform: capitalize;\n\n    padding: var(--legend-padding);\n    font: var(--legend-font);\n    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));\n    border-bottom: var(--legend-border-bottom);\n  }\n\n  .multi-column-form label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    align-self: center;\n\n    color: var(--label-color, var(--md-sys-color-on-surface));\n    font: var(--label-font);\n  }\n\n  .multi-column-form input,\n  .multi-column-form table,\n  .multi-column-form select,\n  .multi-column-form textarea,\n  .multi-column-form [custom-input] {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n  }\n  .multi-column-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .multi-column-form input[type='checkbox'],\n  .multi-column-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .multi-column-form input[type='checkbox'] + label,\n  .multi-column-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color, var(--md-sys-color-on-surface));\n  }\n  .multi-column-form [options-wrap] {\n    grid-column: span 21 / auto;\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  @media screen and (max-width: 460px) {\n    .multi-column-form {\n      max-width: 100%;\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 5px;\n    }\n    .multi-column-form legend {\n      grid-column: span 12;\n    }\n    .multi-column-form label {\n      grid-column: span 4 / auto;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      grid-column: span 8 / auto;\n      max-width: initial;\n      padding: var(--padding-default, var(--spacing-medium));\n      font: normal 15px var(--theme-font);\n    }\n    .multi-column-form input[type='checkbox'],\n    .multi-column-form input[type='radio'] {\n      justify-self: left;\n      align-self: center;\n      grid-column: span 1 / auto;\n      left: 0;\n      zoom: 1.4;\n    }\n\n    .multi-column-form input[type='checkbox'] + label,\n    .multi-column-form input[type='radio'] + label {\n      grid-column: span 11 / auto;\n      align-self: center;\n      position: relative;\n      left: -25px;\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 12 / auto;\n      display: grid;\n      grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .multi-column-form [options-wrap] input[type='checkbox'] + label,\n    .multi-column-form [options-wrap] input[type='radio'] + label {\n      grid-column: span 5 / auto;\n      align-self: left;\n      left: -4%;\n      margin-right: 0;\n    }\n  }\n  @media (min-width: 481px) and (max-width: 1024px) {\n    .multi-column-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .multi-column-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 36;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 33 / auto;\n    }\n  }\n  @media screen and (min-width: 2001px) {\n    .multi-column-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 48;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 45 / auto;\n    }\n  }\n`\n"]}

package/dist/src/styles/search-form-styles.js

@@ -2,17 +2,16 @@ import { css } from 'lit';
 export const SearchFormStyles = css `
   :host {
     overflow: auto;
-    background-color: var(--search-form-background-color);
+    background-color: transparent;
   }
 
   .search-form {
     position: relative;
     display: grid;
     grid-template-columns: repeat(24, 1fr);
-    grid-gap: var(--form-grid-gap);
+    grid-gap: var(--form-grid-gap, var(--spacing-medium));
     grid-auto-rows: minmax(24px, auto);
-    padding: var(--search-form-box-padding);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: var(--search-form-background-color, var(--md-sys-color-surface));
   }
   .search-form label {
     grid-column: span 3;
@@ -20,8 +19,8 @@ export const SearchFormStyles = css `
     align-self: center;
     text-transform: capitalize;
 
-    color: var(--label-color);
-    font: var(--label-font);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    color: var(--md-sys-color-on-primary-container);
   }
 
   .search-form input,
@@ -29,12 +28,13 @@ export const SearchFormStyles = css `
     grid-column: span 9;
 
     border: var(--input-field-border);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: var(--input-field-border-radius);
-    padding: var(--input-field-padding);
+    padding: var(--input-field-padding, var(--spacing-tiny));
     font: var(--input-field-font);
     max-width: 85%;
-    color: var(--input-field-color);
-    background-color: var(--input-field-background-color);
+    color: var(--input-field-color, var(--md-sys-color-on-surface-variant));
+    background-color: transparent;
   }
 
   .search-form select {
@@ -59,13 +59,13 @@ export const SearchFormStyles = css `
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface-variant));
   }
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
   }
+
   input[type='checkbox'] {
     margin: 0;
   }
@@ -74,14 +74,19 @@ export const SearchFormStyles = css `
     position: absolute;
     right: 1%;
     bottom: 15px;
-    color: var(--search-form-icon-color);
+    color: var(--search-form-icon-color, var(--md-sys-color-on-surface-variant));
+  }
+
+  input[readonly],
+  select[readonly] {
+    background-color: #f0f0f0;
   }
 
   @media screen and (max-width: 460px) {
     .search-form {
       grid-template-columns: repeat(12, 1fr);
-      grid-gap: 10px 5px;
-      background-color: var(--search-form-narrow-background-color);
+      grid-gap: var(--spacing-medium) var(--spacing-medium);
+      background-color: transparent;
 
       max-height: 100%;
       overflow-y: auto;
@@ -90,13 +95,13 @@ export const SearchFormStyles = css `
       grid-column: span 3;
       padding-right: 5px;
       align-self: center;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
     .search-form input,
     .search-form select {
       grid-column: span 8;
       max-width: 100%;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-surface, var(--md-sys-color-on-surface));
     }
     .search-form input[type='checkbox'],
     .search-form input[type='radio'] {
@@ -111,12 +116,12 @@ export const SearchFormStyles = css `
       align-self: center;
       position: relative;
       left: 5px;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
 
     [search] {
       right: 3%;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
   }
   @media (min-width: 461px) and (max-width: 1024px) {