@operato/form 1.0.0-alpha.1

package/dist/src/components/ox-form-master.js

@@ -0,0 +1,208 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+let FormMaster = class FormMaster extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.maxRowCount = 2;
+        this.maxColumnCount = 4;
+        this.loadedCount = 0;
+        this.currentPage = 1;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeEventHandler = this._adjustColumnProperty.bind(this);
+        window.addEventListener('resize', this.resizeEventHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.resizeEventHandler) {
+            window.removeEventListener('resize', this.resizeEventHandler);
+        }
+    }
+    render() {
+        return html `
+      <form
+        @keypress=${(e) => {
+            if (e.keyCode === 13) {
+                this.submit();
+            }
+        }}
+      >
+        ${(this.fields || []).map(field => html `
+            ${field.type === 'select'
+            ? html `
+                  <ox-custom-select
+                    id=${field.id || field.name}
+                    name=${field.name || field.id}
+                    .props=${field.props}
+                    .attrs=${field.attrs}
+                    .value=${field.value}
+                    .autofocus=${this.initFocus === field.name}
+                    @load=${this._onInputLoad.bind(this)}
+                    .options=${field.options}
+                  ></ox-custom-select>
+                `
+            : html `
+                  <ox-custom-input
+                    id=${field.id || field.name}
+                    name=${field.name || field.id}
+                    .props=${field.props}
+                    .attrs=${field.attrs}
+                    .valueField=${field.valueField}
+                    .displayField=${field.displayField}
+                    .value=${field.value}
+                    .autofocus=${this.initFocus === field.name}
+                    @load=${this._onInputLoad.bind(this)}
+                  ></ox-custom-input>
+                `}
+          `)}
+      </form>
+
+      <form-paginator .pageCount=${this.pageCount} @pageChange=${this._onPageChangeHandler.bind(this)}></form-paginator>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('fields')) {
+            this._checkInputValidity();
+        }
+    }
+    _checkInputValidity() {
+        const names = (this.fields || []).map(i => i.name);
+        const result = names.every(name => {
+            return names.indexOf(name) === names.lastIndexOf(name);
+        });
+        if (!result) {
+            throw new Error('Field name is duplicated.');
+        }
+    }
+    _onInputLoad() {
+        this.loadedCount++;
+        if (this.loadedCount === (this.fields || []).length - 1) {
+            this._adjustColumnProperty();
+            this._initFocus();
+            this.dispatchEvent(new CustomEvent('load'));
+        }
+    }
+    getFields() {
+        return Array.from(this.form.querySelectorAll('ox-custom-select, ox-custom-input') || []);
+    }
+    _adjustColumnProperty() {
+        const inputElements = this.getFields();
+        if (inputElements.length === 0)
+            return;
+        const inputWidth = inputElements[0].offsetWidth;
+        const totalWidth = window.innerWidth;
+        const inputCount = inputElements.length;
+        let columnCount = Math.floor(totalWidth / inputWidth) < this.maxColumnCount
+            ? Math.floor(totalWidth / inputWidth)
+            : this.maxColumnCount > inputCount
+                ? inputCount
+                : this.maxColumnCount;
+        if (columnCount === 1) {
+            this.pageCount = Math.ceil(inputElements.length / this.maxRowCount);
+            this._filterActiveFields(this.currentPage);
+        }
+        else {
+            this.pageCount = 1;
+            this._activeFields();
+        }
+        this.style.setProperty('--form-grid-template-columns', `repeat(${columnCount}, 1fr)`);
+    }
+    _initFocus() {
+        if (!this.initFocus)
+            this.getFields()[0].focus();
+    }
+    getFieldByName(name) {
+        return this.renderRoot.querySelector(`[name=${name}]`);
+    }
+    reset() {
+        this.form && this.form.reset();
+    }
+    submit() {
+        this.dispatchEvent(new CustomEvent('submit'));
+    }
+    focusById(id) {
+        const input = this.renderRoot.querySelector(`form > #${id}`);
+        input.focus();
+    }
+    checkValidity() {
+        return this.form.checkValidity();
+    }
+    serialize() {
+        let data = {};
+        this.getFields().forEach(field => {
+            const name = field.name;
+            if (name) {
+                data[name] = field.value;
+            }
+        });
+        return data;
+    }
+    get searchParams() {
+        let searchParam = new URLSearchParams();
+        const data = this.serialize();
+        const fields = this.getFields();
+        fields.forEach(field => searchParam.append(field.name, field.value));
+        return decodeURI(searchParam.toString());
+    }
+    _onPageChangeHandler(event) {
+        this.currentPage = event.currentTarget.currentPage;
+        this._filterActiveFields(this.currentPage);
+    }
+    _activeFields() {
+        this.getFields().forEach(field => (field.hidden = false));
+    }
+    _filterActiveFields(currentPage = 1) {
+        if (this.pageCount > 1) {
+            const fields = this.getFields();
+            const chunkedFields = [];
+            for (let i = 0, j = fields.length; i < j; i += this.maxRowCount) {
+                chunkedFields.push(fields.slice(i, i + this.maxRowCount));
+            }
+            chunkedFields.forEach((fields, idx) => {
+                if (currentPage === idx + 1) {
+                    fields.forEach(field => (field.hidden = false));
+                }
+                else {
+                    fields.forEach(field => (field.hidden = true));
+                }
+            });
+        }
+    }
+};
+FormMaster.styles = css `
+    form {
+      display: grid;
+      padding: var(--form-padding, 10px);
+      grid-gap: var(--form-grid-gap, 10px);
+      grid-template-columns: var(--form-grid-template-columns);
+      background-color: var(--form-background-color, #e5e5e5);
+    }
+    custom-input,
+    custom-select {
+      justify-self: center;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], FormMaster.prototype, "fields", void 0);
+__decorate([
+    property({ type: Number })
+], FormMaster.prototype, "maxRowCount", void 0);
+__decorate([
+    property({ type: Number })
+], FormMaster.prototype, "maxColumnCount", void 0);
+__decorate([
+    property({ type: String })
+], FormMaster.prototype, "initFocus", void 0);
+__decorate([
+    state()
+], FormMaster.prototype, "pageCount", void 0);
+__decorate([
+    query('form')
+], FormMaster.prototype, "form", void 0);
+FormMaster = __decorate([
+    customElement('ox-form-master')
+], FormMaster);
+//# sourceMappingURL=ox-form-master.js.map

package/dist/src/components/ox-form-master.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-form-master.js","sourceRoot":"","sources":["../../../src/components/ox-form-master.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { CustomInput } from './ox-custom-input.js'\nimport { CustomSelect } from './ox-custom-select.js'\nimport { FormPaginator } from './ox-form-paginator.js'\n\n@customElement('ox-form-master')\nclass FormMaster extends LitElement {\n  static styles = css`\n    form {\n      display: grid;\n      padding: var(--form-padding, 10px);\n      grid-gap: var(--form-grid-gap, 10px);\n      grid-template-columns: var(--form-grid-template-columns);\n      background-color: var(--form-background-color, #e5e5e5);\n    }\n    custom-input,\n    custom-select {\n      justify-self: center;\n    }\n  `\n\n  @property({ type: Array }) fields?: {\n    type: string\n    hidden: boolean\n    name: string\n    id: string\n    label: string\n    placeholder: string\n    value: any\n    field: string\n    queryName: string\n    props: { [prop: string]: string }\n    attrs: string[]\n    valueField?: string\n    displayField?: string\n    options: { name: string; value: string }[]\n  }[]\n  @property({ type: Number }) maxRowCount: number = 2\n  @property({ type: Number }) maxColumnCount: number = 4\n  @property({ type: String }) initFocus?: string\n\n  @state() private pageCount!: number\n\n  @query('form') form!: HTMLFormElement\n\n  private loadedCount: number = 0\n  private resizeEventHandler?: EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.resizeEventHandler = this._adjustColumnProperty.bind(this)\n    window.addEventListener('resize', this.resizeEventHandler)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this.resizeEventHandler) {\n      window.removeEventListener('resize', this.resizeEventHandler)\n    }\n  }\n\n  render() {\n    return html`\n      <form\n        @keypress=${(e: KeyboardEvent) => {\n          if (e.keyCode === 13) {\n            this.submit()\n          }\n        }}\n      >\n        ${(this.fields || []).map(\n          field => html`\n            ${field.type === 'select'\n              ? html`\n                  <ox-custom-select\n                    id=${field.id || field.name}\n                    name=${field.name || field.id}\n                    .props=${field.props}\n                    .attrs=${field.attrs}\n                    .value=${field.value}\n                    .autofocus=${this.initFocus === field.name}\n                    @load=${this._onInputLoad.bind(this)}\n                    .options=${field.options}\n                  ></ox-custom-select>\n                `\n              : html`\n                  <ox-custom-input\n                    id=${field.id || field.name}\n                    name=${field.name || field.id}\n                    .props=${field.props}\n                    .attrs=${field.attrs}\n                    .valueField=${field.valueField}\n                    .displayField=${field.displayField}\n                    .value=${field.value}\n                    .autofocus=${this.initFocus === field.name}\n                    @load=${this._onInputLoad.bind(this)}\n                  ></ox-custom-input>\n                `}\n          `\n        )}\n      </form>\n\n      <form-paginator .pageCount=${this.pageCount} @pageChange=${this._onPageChangeHandler.bind(this)}></form-paginator>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('fields')) {\n      this._checkInputValidity()\n    }\n  }\n\n  _checkInputValidity() {\n    const names = (this.fields || []).map(i => i.name)\n    const result = names.every(name => {\n      return names.indexOf(name) === names.lastIndexOf(name)\n    })\n    if (!result) {\n      throw new Error('Field name is duplicated.')\n    }\n  }\n\n  _onInputLoad() {\n    this.loadedCount++\n    if (this.loadedCount === (this.fields || []).length - 1) {\n      this._adjustColumnProperty()\n      this._initFocus()\n      this.dispatchEvent(new CustomEvent('load'))\n    }\n  }\n\n  getFields(): (CustomInput | CustomSelect)[] {\n    return Array.from(this.form.querySelectorAll('ox-custom-select, ox-custom-input') || [])\n  }\n\n  private currentPage: number = 1\n\n  _adjustColumnProperty() {\n    const inputElements = this.getFields()\n\n    if (inputElements.length === 0) return\n    const inputWidth = inputElements[0].offsetWidth\n    const totalWidth = window.innerWidth\n    const inputCount = inputElements.length\n    let columnCount =\n      Math.floor(totalWidth / inputWidth) < this.maxColumnCount\n        ? Math.floor(totalWidth / inputWidth)\n        : this.maxColumnCount > inputCount\n        ? inputCount\n        : this.maxColumnCount\n\n    if (columnCount === 1) {\n      this.pageCount = Math.ceil(inputElements.length / this.maxRowCount)\n      this._filterActiveFields(this.currentPage)\n    } else {\n      this.pageCount = 1\n      this._activeFields()\n    }\n\n    this.style.setProperty('--form-grid-template-columns', `repeat(${columnCount}, 1fr)`)\n  }\n\n  _initFocus() {\n    if (!this.initFocus) this.getFields()[0].focus()\n  }\n\n  getFieldByName(name: string) {\n    return this.renderRoot.querySelector(`[name=${name}]`)\n  }\n\n  reset() {\n    this.form && this.form.reset()\n  }\n\n  submit() {\n    this.dispatchEvent(new CustomEvent('submit'))\n  }\n\n  focusById(id: string) {\n    const input = this.renderRoot.querySelector(`form > #${id}`) as CustomInput | CustomSelect\n    input.focus()\n  }\n\n  checkValidity() {\n    return this.form.checkValidity()\n  }\n\n  serialize() {\n    let data: { [name: string]: any } = {}\n\n    this.getFields().forEach(field => {\n      const name = field.name\n      if (name) {\n        data[name] = field.value\n      }\n    })\n\n    return data\n  }\n\n  get searchParams() {\n    let searchParam = new URLSearchParams()\n    const data = this.serialize()\n    const fields = this.getFields()\n    fields.forEach(field => searchParam.append(field.name!, field.value))\n\n    return decodeURI(searchParam.toString())\n  }\n\n  _onPageChangeHandler(event: Event) {\n    this.currentPage = (event.currentTarget as FormPaginator).currentPage\n    this._filterActiveFields(this.currentPage)\n  }\n\n  _activeFields() {\n    this.getFields().forEach(field => (field.hidden = false))\n  }\n\n  _filterActiveFields(currentPage = 1) {\n    if (this.pageCount > 1) {\n      const fields = this.getFields()\n\n      const chunkedFields = []\n      for (let i = 0, j = fields.length; i < j; i += this.maxRowCount) {\n        chunkedFields.push(fields.slice(i, i + this.maxRowCount))\n      }\n\n      chunkedFields.forEach((fields, idx) => {\n        if (currentPage === idx + 1) {\n          fields.forEach(field => (field.hidden = false))\n        } else {\n          fields.forEach(field => (field.hidden = true))\n        }\n      })\n    }\n  }\n}\n"]}

package/dist/src/components/ox-form-paginator.d.ts

@@ -0,0 +1,9 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class FormPaginator extends LitElement {
+    static styles: import("lit").CSSResult;
+    pageCount: number;
+    selectors: number[];
+    currentPage: number;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+}

package/dist/src/components/ox-form-paginator.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let FormPaginator = class FormPaginator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pageCount = 1;
+        this.selectors = [];
+        this.currentPage = 1;
+    }
+    render() {
+        return html `
+      ${this.selectors.map(page => html `
+          <span
+            page=${page}
+            ?selected=${page == this.currentPage}
+            @click=${(e) => {
+            this.currentPage = page;
+            this.dispatchEvent(new CustomEvent('pageChange'));
+            this.requestUpdate();
+        }}
+            >&bull;</span
+          >
+        `)}
+    `;
+    }
+    updated(changes) {
+        if (changes.has('pageCount')) {
+            if (this.pageCount > 1) {
+                let i = 1;
+                this.selectors = [];
+                while (i <= this.pageCount) {
+                    this.selectors.push(i);
+                    i++;
+                }
+            }
+            else {
+                this.selectors = [];
+            }
+        }
+    }
+};
+FormPaginator.styles = css `
+    :host {
+      display: block;
+      background-color: var(--form-background-color, #e5e5e5);
+      font-size: 1.5em;
+      line-height: 0.5em;
+      text-align: center;
+      color: #c4c5c6;
+    }
+
+    [selected] {
+      color: #6f6f6f;
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], FormPaginator.prototype, "pageCount", void 0);
+__decorate([
+    property({ type: Array })
+], FormPaginator.prototype, "selectors", void 0);
+__decorate([
+    state()
+], FormPaginator.prototype, "currentPage", void 0);
+FormPaginator = __decorate([
+    customElement('form-paginator')
+], FormPaginator);
+export { FormPaginator };
+//# sourceMappingURL=ox-form-paginator.js.map

package/dist/src/components/ox-form-paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-form-paginator.js","sourceRoot":"","sources":["../../../src/components/ox-form-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAgB8B,cAAS,GAAW,CAAC,CAAA;QACtB,cAAS,GAAa,EAAE,CAAA;QAEnC,gBAAW,GAAW,CAAC,CAAA;IAoCzC,CAAC;IAlCC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;mBAED,IAAI;wBACC,IAAI,IAAI,IAAI,CAAC,WAAW;qBAC3B,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;YACjD,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;;;SAGJ,CACF;KACF,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE;gBACtB,IAAI,CAAC,GAAG,CAAC,CAAA;gBACT,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;gBAEnB,OAAO,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;oBACtB,CAAC,EAAE,CAAA;iBACJ;aACF;iBAAM;gBACL,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;aACpB;SACF;IACH,CAAC;CACF,CAAA;AAtDQ,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;GAalB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAyB;AAE1C;IAAR,KAAK,EAAE;kDAA+B;AAnB5B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAuDzB;SAvDY,aAAa","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('form-paginator')\nexport class FormPaginator extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      background-color: var(--form-background-color, #e5e5e5);\n      font-size: 1.5em;\n      line-height: 0.5em;\n      text-align: center;\n      color: #c4c5c6;\n    }\n\n    [selected] {\n      color: #6f6f6f;\n    }\n  `\n\n  @property({ type: Number }) pageCount: number = 1\n  @property({ type: Array }) selectors: number[] = []\n\n  @state() public currentPage: number = 1\n\n  render() {\n    return html`\n      ${this.selectors.map(\n        page => html`\n          <span\n            page=${page}\n            ?selected=${page == this.currentPage}\n            @click=${(e: MouseEvent) => {\n              this.currentPage = page\n              this.dispatchEvent(new CustomEvent('pageChange'))\n              this.requestUpdate()\n            }}\n            >&bull;</span\n          >\n        `\n      )}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('pageCount')) {\n      if (this.pageCount > 1) {\n        let i = 1\n        this.selectors = []\n\n        while (i <= this.pageCount) {\n          this.selectors.push(i)\n          i++\n        }\n      } else {\n        this.selectors = []\n      }\n    }\n  }\n}\n"]}

package/dist/src/components/ox-search-form-paginator.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/ox-search-form-paginator.js

@@ -0,0 +1,51 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let SearchFormPaginator = class SearchFormPaginator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pageCount = 0;
+        this.currentPage = 0;
+    }
+    render() {
+        return html `
+      ${Array(this.pageCount)
+            .fill('')
+            .map((_, page) => html `
+            <span
+              ?selected=${page == this.currentPage}
+              @click=${(e) => this.dispatchEvent(new CustomEvent('pagechanged', {
+            detail: {
+                page
+            }
+        }))}
+              >&bull;</span
+            >
+          `)}
+    `;
+    }
+};
+SearchFormPaginator.styles = css `
+    :host {
+      display: block;
+      background-color: var(--form-background-color, #e5e5e5);
+      font-size: 1.5em;
+      line-height: 0.5em;
+      text-align: center;
+      color: #c4c5c6;
+    }
+
+    [selected] {
+      color: #6f6f6f;
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], SearchFormPaginator.prototype, "pageCount", void 0);
+__decorate([
+    property({ type: Number })
+], SearchFormPaginator.prototype, "currentPage", void 0);
+SearchFormPaginator = __decorate([
+    customElement('ox-search-form-paginator')
+], SearchFormPaginator);
+//# sourceMappingURL=ox-search-form-paginator.js.map

package/dist/src/components/ox-search-form-paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-search-form-paginator.js","sourceRoot":"","sources":["../../../src/components/ox-search-form-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAgB8B,cAAS,GAAW,CAAC,CAAA;QACrB,gBAAW,GAAW,CAAC,CAAA;IAwBrD,CAAC;IAtBC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;aACpB,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CACF,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;0BAED,IAAI,IAAI,IAAI,CAAC,WAAW;uBAC3B,CAAC,CAAa,EAAE,EAAE,CACzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE;gBACN,IAAI;aACL;SACF,CAAC,CACH;;;WAGN,CACF;KACJ,CAAA;IACH,CAAC;CACF,CAAA;AAxCQ,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;GAalB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAwB;AAjB/C,mBAAmB;IADxB,aAAa,CAAC,0BAA0B,CAAC;GACpC,mBAAmB,CAyCxB","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-search-form-paginator')\nclass SearchFormPaginator extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      background-color: var(--form-background-color, #e5e5e5);\n      font-size: 1.5em;\n      line-height: 0.5em;\n      text-align: center;\n      color: #c4c5c6;\n    }\n\n    [selected] {\n      color: #6f6f6f;\n    }\n  `\n\n  @property({ type: Number }) pageCount: number = 0\n  @property({ type: Number }) currentPage: number = 0\n\n  render() {\n    return html`\n      ${Array(this.pageCount)\n        .fill('')\n        .map(\n          (_, page) => html`\n            <span\n              ?selected=${page == this.currentPage}\n              @click=${(e: MouseEvent) =>\n                this.dispatchEvent(\n                  new CustomEvent('pagechanged', {\n                    detail: {\n                      page\n                    }\n                  })\n                )}\n              >&bull;</span\n            >\n          `\n        )}\n    `\n  }\n}\n"]}

package/dist/src/components/ox-search-form.d.ts

@@ -0,0 +1,56 @@
+import '@material/mwc-icon';
+import './ox-custom-input.js';
+import './ox-custom-select.js';
+import { LitElement, PropertyValues } from 'lit';
+export declare class SearchForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fields?: {
+        type: string;
+        hidden: boolean;
+        name: string;
+        id: string;
+        label: string;
+        placeholder: string;
+        value: any;
+        field: string;
+        queryName: string;
+        props: {
+            [prop: string]: string;
+        };
+        attrs: string[];
+        options: {
+            name: string;
+            value: string;
+        }[];
+        handlers: {
+            [event: string]: EventListener;
+        };
+    }[];
+    hideSearchButton: boolean;
+    form: HTMLFormElement;
+    formFields: ((HTMLInputElement | HTMLSelectElement) & {
+        field: string;
+        _value: any;
+    })[];
+    getFields(): Element[];
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    _checkInputValidity(): void;
+    get searchParams(): string;
+    get queryFilters(): {
+        name: string;
+        value: string | number | boolean;
+        operator: string;
+    }[];
+    getQueryFilters(): Promise<{
+        name: string;
+        operator: string;
+        value: string | number | boolean | string[] | undefined;
+        relation: boolean;
+    }[]>;
+    private _getResourceIds;
+    serialize(): {
+        [name: string]: any;
+    };
+    submit(): void;
+}