@things-factory/setting-ui 7.0.1-alpha.9 → 7.0.1-alpha.92

package/client/components/partner-selector.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
 import '@things-factory/form-ui'
 import '@operato/data-grist'
 
@@ -10,10 +10,12 @@ import { CommonGristStyles } from '@operato/styles'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, query, state } from 'lit/decorators.js'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('partner-selector')
 class PartnerSelector extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
@@ -22,13 +24,6 @@ class PartnerSelector extends LitElement {
         overflow: hidden;
         background-color: white;
       }
-      .button-container {
-        padding: var(--button-container-padding);
-        margin: var(--button-container-margin);
-        text-align: var(--button-container-align);
-        background-color: var(--button-container-background);
-        height: var(--button-container-height);
-      }
     `
   ]
 
@@ -49,7 +44,7 @@ class PartnerSelector extends LitElement {
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.select.bind(this)}">${i18next.t('button.select')}</mwc-button>
+        <button @click="${this.select.bind(this)}"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</button>
       </div>
     `
   }

package/client/pages/partner-setting-list.ts

@@ -3,7 +3,7 @@ import '../components/partner-selector'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { customElement, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { openPopup } from '@operato/layout'
@@ -12,11 +12,9 @@ import { PageView, store } from '@operato/shell'
 import { client, gqlContext } from '@operato/graphql'
 import { ScrollbarStyles, CommonButtonStyles, CommonGristStyles } from '@operato/styles'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import { getEditor, getRenderer } from '@operato/data-grist'
+import { FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
 
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
-
 @customElement('partner-setting-list')
 export class PartnerSettingList extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
@@ -50,8 +48,7 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
 
   @state() private config: any
   @state() private partnerDomain: any
-  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'
-  @state() private refreshHandlers: any[] = []
+  @state() private mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'LIST' : 'GRID'
 
   @query('ox-grist') private dataGrist: any
 
@@ -65,7 +62,7 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
             name="partnerDomain"
             value="${this.partnerDomain?.name ? this.partnerDomain.name : ''}"
             @click="${this.openPartnerSelector.bind(this)}"
-            placeholder=${i18next.t('text.please_choose_partner') || ''}
+            placeholder=${String(i18next.t('text.please_choose_partner') || '')}
           />
         </fieldset>
       </form>
@@ -202,7 +199,7 @@ export class PartnerSettingList extends connect(store)(localize(i18next)(PageVie
     }
   }
 
-  async fetchHandler({ filters, page, limit, sorters = [] }) {
+  async fetchHandler({ filters, page, limit, sorters = [] }: FetchOption) {
     if (!this.partnerDomain) return { total: 0, records: [] }
 
     const pagination = { page, limit }

package/client/setting-lets/secure-iplist-setting-let.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-formfield'
-import '@material/mwc-textfield'
+import '@material/web/textfield/filled-text-field.js'
 import '@things-factory/setting-base'
 import '@operato/i18n/ox-i18n.js'
 
@@ -58,9 +57,9 @@ export class SecureIPListSettingLet extends LitElement {
     description: string
   }[] = []
 
-  @query('mwc-textfield[name="whitelist"]') whitelist
-  @query('mwc-textfield[name="blacklist"]') blacklist
-  @query('mwc-textfield[name="protectedlist"]') protectedlist
+  @query('[name="whitelist"]') whitelist
+  @query('[name="blacklist"]') blacklist
+  @query('[name="protectedlist"]') protectedlist
   @queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges
 
   render() {
@@ -68,35 +67,40 @@ export class SecureIPListSettingLet extends LitElement {
 
     return html`
       <setting-let>
-        <ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list"
-          >secure IP list</ox-title-with-help
-        >
+        <ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list">secure IP list</ox-title-with-help>
 
         <div slot="content" @change=${() => this.onSave()}>
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="whitelist"
             .label=${String(i18next.t('label.whitelist'))}
             icon="health_and_safety"
             value=${whitelist.join(', ')}
+            supporting-text=${String(i18next.t('text.supporting text for whitelist'))}
             hidden
-          ></mwc-textfield>
+          >
+            <md-icon slot="leading-icon">health_and_safety</md-icon>
+          </md-filled-text-field>
 
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="blacklist"
             .label=${String(i18next.t('label.blacklist'))}
-            icon="block"
             value=${blacklist.join(', ')}
-          ></mwc-textfield>
+            supporting-text=${String(i18next.t('text.supporting text for blacklist'))}
+          >
+            <md-icon slot="leading-icon">block</md-icon>
+          </md-filled-text-field>
 
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="protectedlist"
             .label=${String(i18next.t('label.protectedlist'))}
-            icon="security"
             value=${protectedlist.join(', ')}
-          ></mwc-textfield>
+            supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}
+          >
+            <md-icon slot="leading-icon">security</md-icon>
+          </md-filled-text-field>
 
           <div>
             <h3><ox-i18n msgid="title.protected-privileges"></ox-i18n></h3>
@@ -113,9 +117,7 @@ export class SecureIPListSettingLet extends LitElement {
                     <input
                       type="checkbox"
                       id=${id}
-                      .checked=${!!privileges.find(
-                        p => p.privilege == privilege.privilege && p.category == privilege.category
-                      )}
+                      .checked=${!!privileges.find(p => p.privilege == privilege.privilege && p.category == privilege.category)}
                       .data-privilege=${privilege}
                     />
                     <label for="${id}">${privilege.description}</label>
@@ -159,9 +161,7 @@ export class SecureIPListSettingLet extends LitElement {
   }
 
   checkAll(checked) {
-    Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(
-      checkbox => ((checkbox as HTMLInputElement).checked = checked)
-    )
+    Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(checkbox => ((checkbox as HTMLInputElement).checked = checked))
   }
 
   oncheckAll(e) {

package/dist-client/components/partner-selector.d.ts

@@ -1,3 +1,3 @@
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
 import '@things-factory/form-ui';
 import '@operato/data-grist';

package/dist-client/components/partner-selector.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-button';
+import '@material/web/icon/icon.js';
 import '@things-factory/form-ui';
 import '@operato/data-grist';
 import { i18next } from '@operato/i18n';
@@ -9,6 +9,7 @@ import { CommonGristStyles } from '@operato/styles';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
+import { ButtonContainerStyles } from '@operato/styles';
 let PartnerSelector = class PartnerSelector extends LitElement {
     constructor() {
         super(...arguments);
@@ -25,7 +26,7 @@ let PartnerSelector = class PartnerSelector extends LitElement {
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.select.bind(this)}">${i18next.t('button.select')}</mwc-button>
+        <button @click="${this.select.bind(this)}"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</button>
       </div>
     `;
     }
@@ -97,6 +98,7 @@ let PartnerSelector = class PartnerSelector extends LitElement {
     }
 };
 PartnerSelector.styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css `
       :host {
@@ -105,13 +107,6 @@ PartnerSelector.styles = [
         overflow: hidden;
         background-color: white;
       }
-      .button-container {
-        padding: var(--button-container-padding);
-        margin: var(--button-container-margin);
-        text-align: var(--button-container-align);
-        background-color: var(--button-container-background);
-        height: var(--button-container-height);
-      }
     `
 ];
 __decorate([

package/dist-client/components/partner-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"partner-selector.js","sourceRoot":"","sources":["../../client/components/partner-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '@things-factory/form-ui'\nimport '@operato/data-grist'\n\nimport { i18next } from '@operato/i18n'\nimport { client, gqlContext } from '@operato/graphql'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonGristStyles } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\n\n@customElement('partner-selector')\nclass PartnerSelector extends LitElement {\n  static styles = [\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: white;\n      }\n      .button-container {\n        padding: var(--button-container-padding);\n        margin: var(--button-container-margin);\n        text-align: var(--button-container-align);\n        background-color: var(--button-container-background);\n        height: var(--button-container-height);\n      }\n    `\n  ]\n\n  @state() private config: any\n  @state() private data: any\n  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'\n\n  @query('ox-grist') private dataGrist: any\n\n  render() {\n    return html`\n      <ox-grist .mode=${this.mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n\n      <div class=\"button-container\">\n        <mwc-button raised @click=\"${this.select.bind(this)}\">${i18next.t('button.select')}</mwc-button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.config = {\n      list: { fields: ['name', 'description'] },\n      rows: { selectable: { multiple: true }, appendable: false, handlers: { click: 'select-row-toggle' } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: false },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 100\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 200\n        }\n      ]\n    }\n  }\n\n  async fetchHandler({ filters, page, limit, sorters = [] }) {\n    const pagination = { page, limit }\n    const sortings = sorters\n\n    const response = await client.query({\n      query: gql`\n        query searchCustomers($filters: [Filter!]!, $pagination: Pagination!, $sortings: [Sorting!]!) {\n          searchCustomers(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n            }\n            total\n          }\n        }\n      `,\n      variables: { filters, pagination, sortings },\n      context: gqlContext()\n    })\n\n    return {\n      records: response.data.searchCustomers.items || [],\n      total: response.data.searchCustomers.total || 0\n    }\n  }\n\n  select() {\n    const selectedItems = this.dataGrist.selected\n    if (!selectedItems.length) {\n      this.showToast(i18next.t('text.nothing_selected'))\n      return\n    }\n\n    history.back()\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: selectedItems[0]\n      })\n    )\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"partner-selector.js","sourceRoot":"","sources":["../../client/components/partner-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/form-ui'\nimport '@operato/data-grist'\n\nimport { i18next } from '@operato/i18n'\nimport { client, gqlContext } from '@operato/graphql'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonGristStyles } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('partner-selector')\nclass PartnerSelector extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: white;\n      }\n    `\n  ]\n\n  @state() private config: any\n  @state() private data: any\n  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'\n\n  @query('ox-grist') private dataGrist: any\n\n  render() {\n    return html`\n      <ox-grist .mode=${this.mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n\n      <div class=\"button-container\">\n        <button @click=\"${this.select.bind(this)}\"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.config = {\n      list: { fields: ['name', 'description'] },\n      rows: { selectable: { multiple: true }, appendable: false, handlers: { click: 'select-row-toggle' } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: false },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 100\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 200\n        }\n      ]\n    }\n  }\n\n  async fetchHandler({ filters, page, limit, sorters = [] }) {\n    const pagination = { page, limit }\n    const sortings = sorters\n\n    const response = await client.query({\n      query: gql`\n        query searchCustomers($filters: [Filter!]!, $pagination: Pagination!, $sortings: [Sorting!]!) {\n          searchCustomers(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n            }\n            total\n          }\n        }\n      `,\n      variables: { filters, pagination, sortings },\n      context: gqlContext()\n    })\n\n    return {\n      records: response.data.searchCustomers.items || [],\n      total: response.data.searchCustomers.total || 0\n    }\n  }\n\n  select() {\n    const selectedItems = this.dataGrist.selected\n    if (!selectedItems.length) {\n      this.showToast(i18next.t('text.nothing_selected'))\n      return\n    }\n\n    history.back()\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: selectedItems[0]\n      })\n    )\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}

package/dist-client/pages/partner-setting-list.d.ts

@@ -1,6 +1,7 @@
 import '@things-factory/form-ui';
 import '../components/partner-selector';
 import { PageView } from '@operato/shell';
+import { FetchOption } from '@operato/data-grist';
 declare const PartnerSettingList_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
     connectedCallback(): void;
@@ -13,7 +14,6 @@ export declare class PartnerSettingList extends PartnerSettingList_base {
     private config;
     private partnerDomain;
     private mode;
-    private refreshHandlers;
     private dataGrist;
     render(): import("lit").TemplateResult<1>;
     get context(): {
@@ -33,12 +33,7 @@ export declare class PartnerSettingList extends PartnerSettingList_base {
     };
     pageInitialized(): void;
     pageUpdated(): void;
-    fetchHandler({ filters, page, limit, sorters }: {
-        filters: any;
-        page: any;
-        limit: any;
-        sorters?: never[] | undefined;
-    }): Promise<{
+    fetchHandler({ filters, page, limit, sorters }: FetchOption): Promise<{
         records: any;
         total: any;
     }>;

package/dist-client/pages/partner-setting-list.js

@@ -17,7 +17,6 @@ let PartnerSettingList = class PartnerSettingList extends connect(store)(localiz
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'LIST' : 'GRID';
-        this.refreshHandlers = [];
     }
     render() {
         var _a;
@@ -30,7 +29,7 @@ let PartnerSettingList = class PartnerSettingList extends connect(store)(localiz
             name="partnerDomain"
             value="${((_a = this.partnerDomain) === null || _a === void 0 ? void 0 : _a.name) ? this.partnerDomain.name : ''}"
             @click="${this.openPartnerSelector.bind(this)}"
-            placeholder=${i18next.t('text.please_choose_partner') || ''}
+            placeholder=${String(i18next.t('text.please_choose_partner') || '')}
           />
         </fieldset>
       </form>
@@ -341,10 +340,6 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], PartnerSettingList.prototype, "mode", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], PartnerSettingList.prototype, "refreshHandlers", void 0);
 __decorate([
     query('ox-grist'),
     __metadata("design:type", Object)

package/dist-client/pages/partner-setting-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"partner-setting-list.js","sourceRoot":"","sources":["../../client/pages/partner-setting-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/form-ui'\nimport '../components/partner-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView, store } from '@operato/shell'\nimport { client, gqlContext } from '@operato/graphql'\nimport { ScrollbarStyles, CommonButtonStyles, CommonGristStyles } from '@operato/styles'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { getEditor, getRenderer } from '@operato/data-grist'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { MultiColumnFormStyles } from '@things-factory/form-ui'\n\n@customElement('partner-setting-list')\nexport class PartnerSettingList extends connect(store)(localize(i18next)(PageView)) {\n  static styles = [\n    CommonGristStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n      fieldset {\n        max-width: var(--input-container-max-width);\n        border: none;\n      }\n      label {\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--theme-white-color);\n        font: var(--input-font);\n      }\n    `\n  ]\n\n  @state() private config: any\n  @state() private partnerDomain: any\n  @state() private mode: string = isMobileDevice() ? 'LIST' : 'GRID'\n  @state() private refreshHandlers: any[] = []\n\n  @query('ox-grist') private dataGrist: any\n\n  render() {\n    return html`\n      <form class=\"multi-column-form\">\n        <fieldset>\n          <label>${i18next.t('label.partner')}</label>\n          <input\n            readonly\n            name=\"partnerDomain\"\n            value=\"${this.partnerDomain?.name ? this.partnerDomain.name : ''}\"\n            @click=\"${this.openPartnerSelector.bind(this)}\"\n            placeholder=${i18next.t('text.please_choose_partner') || ''}\n          />\n        </fieldset>\n      </form>\n\n      <ox-grist\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=\"${this.fetchHandler.bind(this)}\"\n        @record-change=\"${this.onRecordChangeHandler.bind(this)}\"\n      >\n        <div slot=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  get context() {\n    return {\n      title: i18next.t('title.partner_setting'),\n      help: 'setting/partner-setting',\n      actions: [\n        {\n          title: i18next.t('button.save'),\n          action: this.save.bind(this),\n          ...CommonButtonStyles.save\n        },\n        {\n          title: i18next.t('button.delete'),\n          action: this.delete.bind(this),\n          ...CommonButtonStyles.delete\n        }\n      ]\n    }\n  }\n\n  pageInitialized() {\n    this.config = {\n      list: {\n        fields: ['name', 'description', 'value']\n      },\n      rows: { selectable: { multiple: true } },\n      columns: [\n        { type: 'gutter', gutterName: 'dirty' },\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {\n          type: 'object',\n          name: 'setting',\n          header: i18next.t('label.setting'),\n          width: 280,\n          record: {\n            editable: true,\n            options: {\n              queryName: 'settings',\n              select: [\n                { name: 'id', hidden: true },\n                { name: 'name', header: i18next.t('field.name') },\n                { name: 'description', header: i18next.t('field.description') },\n                { name: 'category', header: i18next.t('field.category') }\n              ],\n              list: { fields: ['name', 'description', 'category'] }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'code',\n          name: 'category',\n          header: i18next.t('field.category'),\n          record: { editable: false, codeName: 'SETTING_CATEGORIES' },\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'value',\n          header: i18next.t('field.value'),\n          record: {\n            editor: function (value, column, record, rowIndex, field) {\n              return getEditor(record.category)(value, column, record, rowIndex, field)\n            },\n            renderer: function (value, column, record, rowIndex, field) {\n              return getRenderer(record.category)(value, column, record, rowIndex, field)\n            },\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated_at'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'object',\n          name: 'updater',\n          header: i18next.t('field.updater'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          width: 150\n        }\n      ]\n    }\n  }\n\n  pageUpdated() {\n    if (this.active) {\n      this.partnerDomain = null\n      this.dataGrist.data = { records: [], total: 0 }\n    }\n  }\n\n  async fetchHandler({ filters, page, limit, sorters = [] }) {\n    if (!this.partnerDomain) return { total: 0, records: [] }\n\n    const pagination = { page, limit }\n    const sortings = sorters\n\n    const response = await client.query({\n      query: gql`\n        query partnerSettings(\n          $filters: [Filter!]!\n          $pagination: Pagination!\n          $sortings: [Sorting!]!\n          $partnerDomain: ObjectRef!\n        ) {\n          partnerSettings(\n            filters: $filters\n            pagination: $pagination\n            sortings: $sortings\n            partnerDomain: $partnerDomain\n          ) {\n            items {\n              id\n              setting {\n                id\n                name\n                description\n                category\n              }\n              name\n              description\n              category\n              value\n              updatedAt\n              updater {\n                id\n                name\n                description\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: { filters, pagination, sortings, partnerDomain: { id: this.partnerDomain.id } },\n      context: gqlContext()\n    })\n\n    return {\n      records:\n        response.data.partnerSettings.items.map(item => {\n          return { ...item, description: item.setting.description, category: item.setting.category }\n        }) || [],\n      total: response.data.partnerSettings.total || 0\n    }\n  }\n\n  async save() {\n    let patches = this.dataGrist.dirtyRecords\n\n    if (!patches?.length) {\n      return this.showToast(i18next.t('text.nothing_changed'))\n    }\n\n    patches = patches.map(partnerSetting => {\n      let patchField: any = {\n        cuFlag: partnerSetting.__dirty__,\n        setting: { id: partnerSetting.setting.id },\n        partnerDomain: { id: this.partnerDomain.id }\n      }\n      if (partnerSetting.id) patchField.id = partnerSetting.id\n      if (partnerSetting.value) patchField.value = partnerSetting.value\n\n      return patchField\n    })\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation updateMultiplePartnerSetting($patches: [PartnerSettingPatch!]!) {\n          updateMultiplePartnerSetting(patches: $patches) {\n            name\n          }\n        }\n      `,\n      variables: { patches },\n      context: gqlContext()\n    })\n\n    if (!response.errors?.length) {\n      this.showToast(i18next.t('text.data_updated_successfully'))\n      this.dataGrist.fetch()\n    }\n  }\n\n  async delete() {\n    if (!this.dataGrist.selected?.length) {\n      return this.showToast(i18next.t('text.there_is_nothing_to_delete'))\n    }\n\n    const ids = this.dataGrist.selected.map(record => record.id)\n\n    if (\n      await OxPrompt.open({\n        type: 'warning',\n        title: i18next.t('button.delete'),\n        text: i18next.t('text.are_you_sure'),\n        confirmButton: { text: i18next.t('button.delete') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation deletePartnerSettings($ids: [String!]!) {\n            deletePartnerSettings(ids: $ids)\n          }\n        `,\n        variables: { ids },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.data_deleted_successfully'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        this.dataGrist.fetch()\n      }\n    }\n  }\n\n  openPartnerSelector() {\n    openPopup(\n      html`\n        <partner-selector\n          @select=\"${e => {\n            this.partnerDomain = e.detail\n            this.dataGrist.fetch()\n          }}\"\n        ></partner-selector>\n      `,\n      {\n        backdrop: true,\n        title: i18next.t('label.partner')\n      }\n    )\n  }\n\n  onRecordChangeHandler({ detail: { after, column } }) {\n    if (column.name === 'setting') {\n      this.fillUpFields(after)\n    }\n  }\n\n  fillUpFields(record) {\n    record.name = record.setting.name\n    record.description = record.setting.description\n    record.category = record.setting.category\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}
+{"version":3,"file":"partner-setting-list.js","sourceRoot":"","sources":["../../client/pages/partner-setting-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/form-ui'\nimport '../components/partner-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openPopup } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView, store } from '@operato/shell'\nimport { client, gqlContext } from '@operato/graphql'\nimport { ScrollbarStyles, CommonButtonStyles, CommonGristStyles } from '@operato/styles'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('partner-setting-list')\nexport class PartnerSettingList extends connect(store)(localize(i18next)(PageView)) {\n  static styles = [\n    CommonGristStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n      fieldset {\n        max-width: var(--input-container-max-width);\n        border: none;\n      }\n      label {\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n      input {\n        border: var(--border-dark-color);\n        border-radius: var(--border-radius);\n        margin: var(--input-margin);\n        padding: var(--input-padding);\n        background-color: var(--theme-white-color);\n        font: var(--input-font);\n      }\n    `\n  ]\n\n  @state() private config: any\n  @state() private partnerDomain: any\n  @state() private mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'LIST' : 'GRID'\n\n  @query('ox-grist') private dataGrist: any\n\n  render() {\n    return html`\n      <form class=\"multi-column-form\">\n        <fieldset>\n          <label>${i18next.t('label.partner')}</label>\n          <input\n            readonly\n            name=\"partnerDomain\"\n            value=\"${this.partnerDomain?.name ? this.partnerDomain.name : ''}\"\n            @click=\"${this.openPartnerSelector.bind(this)}\"\n            placeholder=${String(i18next.t('text.please_choose_partner') || '')}\n          />\n        </fieldset>\n      </form>\n\n      <ox-grist\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=\"${this.fetchHandler.bind(this)}\"\n        @record-change=\"${this.onRecordChangeHandler.bind(this)}\"\n      >\n        <div slot=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  get context() {\n    return {\n      title: i18next.t('title.partner_setting'),\n      help: 'setting/partner-setting',\n      actions: [\n        {\n          title: i18next.t('button.save'),\n          action: this.save.bind(this),\n          ...CommonButtonStyles.save\n        },\n        {\n          title: i18next.t('button.delete'),\n          action: this.delete.bind(this),\n          ...CommonButtonStyles.delete\n        }\n      ]\n    }\n  }\n\n  pageInitialized() {\n    this.config = {\n      list: {\n        fields: ['name', 'description', 'value']\n      },\n      rows: { selectable: { multiple: true } },\n      columns: [\n        { type: 'gutter', gutterName: 'dirty' },\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {\n          type: 'object',\n          name: 'setting',\n          header: i18next.t('label.setting'),\n          width: 280,\n          record: {\n            editable: true,\n            options: {\n              queryName: 'settings',\n              select: [\n                { name: 'id', hidden: true },\n                { name: 'name', header: i18next.t('field.name') },\n                { name: 'description', header: i18next.t('field.description') },\n                { name: 'category', header: i18next.t('field.category') }\n              ],\n              list: { fields: ['name', 'description', 'category'] }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'code',\n          name: 'category',\n          header: i18next.t('field.category'),\n          record: { editable: false, codeName: 'SETTING_CATEGORIES' },\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'value',\n          header: i18next.t('field.value'),\n          record: {\n            editor: function (value, column, record, rowIndex, field) {\n              return getEditor(record.category)(value, column, record, rowIndex, field)\n            },\n            renderer: function (value, column, record, rowIndex, field) {\n              return getRenderer(record.category)(value, column, record, rowIndex, field)\n            },\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated_at'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'object',\n          name: 'updater',\n          header: i18next.t('field.updater'),\n          record: { editable: false, align: 'left' },\n          sortable: true,\n          width: 150\n        }\n      ]\n    }\n  }\n\n  pageUpdated() {\n    if (this.active) {\n      this.partnerDomain = null\n      this.dataGrist.data = { records: [], total: 0 }\n    }\n  }\n\n  async fetchHandler({ filters, page, limit, sorters = [] }: FetchOption) {\n    if (!this.partnerDomain) return { total: 0, records: [] }\n\n    const pagination = { page, limit }\n    const sortings = sorters\n\n    const response = await client.query({\n      query: gql`\n        query partnerSettings(\n          $filters: [Filter!]!\n          $pagination: Pagination!\n          $sortings: [Sorting!]!\n          $partnerDomain: ObjectRef!\n        ) {\n          partnerSettings(\n            filters: $filters\n            pagination: $pagination\n            sortings: $sortings\n            partnerDomain: $partnerDomain\n          ) {\n            items {\n              id\n              setting {\n                id\n                name\n                description\n                category\n              }\n              name\n              description\n              category\n              value\n              updatedAt\n              updater {\n                id\n                name\n                description\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: { filters, pagination, sortings, partnerDomain: { id: this.partnerDomain.id } },\n      context: gqlContext()\n    })\n\n    return {\n      records:\n        response.data.partnerSettings.items.map(item => {\n          return { ...item, description: item.setting.description, category: item.setting.category }\n        }) || [],\n      total: response.data.partnerSettings.total || 0\n    }\n  }\n\n  async save() {\n    let patches = this.dataGrist.dirtyRecords\n\n    if (!patches?.length) {\n      return this.showToast(i18next.t('text.nothing_changed'))\n    }\n\n    patches = patches.map(partnerSetting => {\n      let patchField: any = {\n        cuFlag: partnerSetting.__dirty__,\n        setting: { id: partnerSetting.setting.id },\n        partnerDomain: { id: this.partnerDomain.id }\n      }\n      if (partnerSetting.id) patchField.id = partnerSetting.id\n      if (partnerSetting.value) patchField.value = partnerSetting.value\n\n      return patchField\n    })\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation updateMultiplePartnerSetting($patches: [PartnerSettingPatch!]!) {\n          updateMultiplePartnerSetting(patches: $patches) {\n            name\n          }\n        }\n      `,\n      variables: { patches },\n      context: gqlContext()\n    })\n\n    if (!response.errors?.length) {\n      this.showToast(i18next.t('text.data_updated_successfully'))\n      this.dataGrist.fetch()\n    }\n  }\n\n  async delete() {\n    if (!this.dataGrist.selected?.length) {\n      return this.showToast(i18next.t('text.there_is_nothing_to_delete'))\n    }\n\n    const ids = this.dataGrist.selected.map(record => record.id)\n\n    if (\n      await OxPrompt.open({\n        type: 'warning',\n        title: i18next.t('button.delete'),\n        text: i18next.t('text.are_you_sure'),\n        confirmButton: { text: i18next.t('button.delete') },\n        cancelButton: { text: i18next.t('button.cancel') }\n      })\n    ) {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation deletePartnerSettings($ids: [String!]!) {\n            deletePartnerSettings(ids: $ids)\n          }\n        `,\n        variables: { ids },\n        context: gqlContext()\n      })\n\n      if (!response.errors) {\n        await OxPrompt.open({\n          type: 'success',\n          title: i18next.t('text.completed'),\n          text: i18next.t('text.data_deleted_successfully'),\n          confirmButton: { text: i18next.t('button.confirm') }\n        })\n\n        this.dataGrist.fetch()\n      }\n    }\n  }\n\n  openPartnerSelector() {\n    openPopup(\n      html`\n        <partner-selector\n          @select=\"${e => {\n            this.partnerDomain = e.detail\n            this.dataGrist.fetch()\n          }}\"\n        ></partner-selector>\n      `,\n      {\n        backdrop: true,\n        title: i18next.t('label.partner')\n      }\n    )\n  }\n\n  onRecordChangeHandler({ detail: { after, column } }) {\n    if (column.name === 'setting') {\n      this.fillUpFields(after)\n    }\n  }\n\n  fillUpFields(record) {\n    record.name = record.setting.name\n    record.description = record.setting.description\n    record.category = record.setting.category\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n  }\n}\n"]}

package/dist-client/setting-lets/secure-iplist-setting-let.d.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-formfield';
-import '@material/mwc-textfield';
+import '@material/web/textfield/filled-text-field.js';
 import '@things-factory/setting-base';
 import '@operato/i18n/ox-i18n.js';
 import { LitElement, PropertyValueMap } from 'lit';

package/dist-client/setting-lets/secure-iplist-setting-let.js

@@ -1,6 +1,5 @@
 import { __decorate, __metadata, __rest } from "tslib";
-import '@material/mwc-formfield';
-import '@material/mwc-textfield';
+import '@material/web/textfield/filled-text-field.js';
 import '@things-factory/setting-base';
 import '@operato/i18n/ox-i18n.js';
 import gql from 'graphql-tag';
@@ -17,35 +16,40 @@ let SecureIPListSettingLet = class SecureIPListSettingLet extends LitElement {
         const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {};
         return html `
       <setting-let>
-        <ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list"
-          >secure IP list</ox-title-with-help
-        >
+        <ox-title-with-help slot="title" topic="setting/secure-ip-list" msgid="title.secure-ip-list">secure IP list</ox-title-with-help>
 
         <div slot="content" @change=${() => this.onSave()}>
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="whitelist"
             .label=${String(i18next.t('label.whitelist'))}
             icon="health_and_safety"
             value=${whitelist.join(', ')}
+            supporting-text=${String(i18next.t('text.supporting text for whitelist'))}
             hidden
-          ></mwc-textfield>
+          >
+            <md-icon slot="leading-icon">health_and_safety</md-icon>
+          </md-filled-text-field>
 
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="blacklist"
             .label=${String(i18next.t('label.blacklist'))}
-            icon="block"
             value=${blacklist.join(', ')}
-          ></mwc-textfield>
+            supporting-text=${String(i18next.t('text.supporting text for blacklist'))}
+          >
+            <md-icon slot="leading-icon">block</md-icon>
+          </md-filled-text-field>
 
-          <mwc-textfield
+          <md-filled-text-field
             type="text"
             name="protectedlist"
             .label=${String(i18next.t('label.protectedlist'))}
-            icon="security"
             value=${protectedlist.join(', ')}
-          ></mwc-textfield>
+            supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}
+          >
+            <md-icon slot="leading-icon">security</md-icon>
+          </md-filled-text-field>
 
           <div>
             <h3><ox-i18n msgid="title.protected-privileges"></ox-i18n></h3>
@@ -176,15 +180,15 @@ __decorate([
     __metadata("design:type", Array)
 ], SecureIPListSettingLet.prototype, "allPrivileges", void 0);
 __decorate([
-    query('mwc-textfield[name="whitelist"]'),
+    query('[name="whitelist"]'),
     __metadata("design:type", Object)
 ], SecureIPListSettingLet.prototype, "whitelist", void 0);
 __decorate([
-    query('mwc-textfield[name="blacklist"]'),
+    query('[name="blacklist"]'),
     __metadata("design:type", Object)
 ], SecureIPListSettingLet.prototype, "blacklist", void 0);
 __decorate([
-    query('mwc-textfield[name="protectedlist"]'),
+    query('[name="protectedlist"]'),
     __metadata("design:type", Object)
 ], SecureIPListSettingLet.prototype, "protectedlist", void 0);
 __decorate([

package/dist-client/setting-lets/secure-iplist-setting-let.js.map

@@ -1 +1 @@
-{"version":3,"file":"secure-iplist-setting-let.js","sourceRoot":"","sources":["../../client/setting-lets/secure-iplist-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-formfield'\nimport '@material/mwc-textfield'\nimport '@things-factory/setting-base'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\n\n@customElement('secure-iplist-setting-let')\nexport class SecureIPListSettingLet extends LitElement {\n  static styles = [\n    css`\n      div[slot='content'] {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      ul {\n        flex: 1;\n        background-color: var(--theme-white-color);\n        overflow: auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        margin: 0;\n        padding: var(--padding-default);\n        list-style: none;\n        border: 1px dashed rgba(0, 0, 0, 0.1);\n        border-width: 1px 0;\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      @media screen and (max-width: 480px) {\n        ul {\n          grid-template-columns: 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: {\n    blacklist?: string[]\n    whitelist?: string[]\n    protectedlist?: string[]\n    privileges?: any[]\n  }\n\n  @state() private allPrivileges: {\n    privilege: string\n    category: string\n    description: string\n  }[] = []\n\n  @query('mwc-textfield[name=\"whitelist\"]') whitelist\n  @query('mwc-textfield[name=\"blacklist\"]') blacklist\n  @query('mwc-textfield[name=\"protectedlist\"]') protectedlist\n  @queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges\n\n  render() {\n    const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {}\n\n    return html`\n      <setting-let>\n        <ox-title-with-help slot=\"title\" topic=\"setting/secure-ip-list\" msgid=\"title.secure-ip-list\"\n          >secure IP list</ox-title-with-help\n        >\n\n        <div slot=\"content\" @change=${() => this.onSave()}>\n          <mwc-textfield\n            type=\"text\"\n            name=\"whitelist\"\n            .label=${String(i18next.t('label.whitelist'))}\n            icon=\"health_and_safety\"\n            value=${whitelist.join(', ')}\n            hidden\n          ></mwc-textfield>\n\n          <mwc-textfield\n            type=\"text\"\n            name=\"blacklist\"\n            .label=${String(i18next.t('label.blacklist'))}\n            icon=\"block\"\n            value=${blacklist.join(', ')}\n          ></mwc-textfield>\n\n          <mwc-textfield\n            type=\"text\"\n            name=\"protectedlist\"\n            .label=${String(i18next.t('label.protectedlist'))}\n            icon=\"security\"\n            value=${protectedlist.join(', ')}\n          ></mwc-textfield>\n\n          <div>\n            <h3><ox-i18n msgid=\"title.protected-privileges\"></ox-i18n></h3>\n            <div>\n              <input id=\"checkAll\" type=\"checkbox\" @change=${e => this.oncheckAll(e)} />\n              <label for=\"checkAll\">Check all</label>\n            </div>\n\n            <ul privileges>\n              ${this.allPrivileges.map(privilege => {\n                const id = `${privilege.category}-${privilege.privilege}`\n                return html`\n                  <li>\n                    <input\n                      type=\"checkbox\"\n                      id=${id}\n                      .checked=${!!privileges.find(\n                        p => p.privilege == privilege.privilege && p.category == privilege.category\n                      )}\n                      .data-privilege=${privilege}\n                    />\n                    <label for=\"${id}\">${privilege.description}</label>\n                  </li>\n                `\n              })}\n            </ul>\n          </div>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {\n    var { data } = await client.query({\n      query: gql`\n        query {\n          privileges {\n            items {\n              privilege\n              category\n              description\n            }\n            total\n          }\n        }\n      `\n    })\n\n    this.allPrivileges = data?.privileges.items || []\n\n    var { data } = await client.query({\n      query: gql`\n        query {\n          secureIPList\n        }\n      `\n    })\n\n    this.value = data ? data.secureIPList : {}\n  }\n\n  checkAll(checked) {\n    Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(\n      checkbox => ((checkbox as HTMLInputElement).checked = checked)\n    )\n  }\n\n  oncheckAll(e) {\n    this.checkAll(e.target.checked)\n  }\n\n  async onSave() {\n    const whitelist = !this.whitelist.value ? [] : this.whitelist.value.split(',').map(ip => ip.trim())\n    const blacklist = !this.blacklist.value ? [] : this.blacklist.value.split(',').map(ip => ip.trim())\n    const protectedlist = !this.protectedlist.value ? [] : this.protectedlist.value.split(',').map(ip => ip.trim())\n    const privileges = Array.from(this.protectedPrivileges)\n      .map((e: any) => e['data-privilege'])\n      .map((priv: any) => {\n        const { description, ...others } = priv\n        return others\n      })\n\n    const iplist = {\n      whitelist,\n      blacklist,\n      protectedlist,\n      privileges\n    }\n\n    const { data } = await client.query({\n      query: gql`\n        mutation ($iplist: Object!) {\n          updateSecureIPList(iplist: $iplist)\n        }\n      `,\n      variables: {\n        iplist\n      }\n    })\n\n    this.value = data ? data.updateSecureIPList : {}\n  }\n}\n"]}
+{"version":3,"file":"secure-iplist-setting-let.js","sourceRoot":"","sources":["../../client/setting-lets/secure-iplist-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@things-factory/setting-base'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\n\n@customElement('secure-iplist-setting-let')\nexport class SecureIPListSettingLet extends LitElement {\n  static styles = [\n    css`\n      div[slot='content'] {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      ul {\n        flex: 1;\n        background-color: var(--theme-white-color);\n        overflow: auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        margin: 0;\n        padding: var(--padding-default);\n        list-style: none;\n        border: 1px dashed rgba(0, 0, 0, 0.1);\n        border-width: 1px 0;\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      @media screen and (max-width: 480px) {\n        ul {\n          grid-template-columns: 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: {\n    blacklist?: string[]\n    whitelist?: string[]\n    protectedlist?: string[]\n    privileges?: any[]\n  }\n\n  @state() private allPrivileges: {\n    privilege: string\n    category: string\n    description: string\n  }[] = []\n\n  @query('[name=\"whitelist\"]') whitelist\n  @query('[name=\"blacklist\"]') blacklist\n  @query('[name=\"protectedlist\"]') protectedlist\n  @queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges\n\n  render() {\n    const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {}\n\n    return html`\n      <setting-let>\n        <ox-title-with-help slot=\"title\" topic=\"setting/secure-ip-list\" msgid=\"title.secure-ip-list\">secure IP list</ox-title-with-help>\n\n        <div slot=\"content\" @change=${() => this.onSave()}>\n          <md-filled-text-field\n            type=\"text\"\n            name=\"whitelist\"\n            .label=${String(i18next.t('label.whitelist'))}\n            icon=\"health_and_safety\"\n            value=${whitelist.join(', ')}\n            supporting-text=${String(i18next.t('text.supporting text for whitelist'))}\n            hidden\n          >\n            <md-icon slot=\"leading-icon\">health_and_safety</md-icon>\n          </md-filled-text-field>\n\n          <md-filled-text-field\n            type=\"text\"\n            name=\"blacklist\"\n            .label=${String(i18next.t('label.blacklist'))}\n            value=${blacklist.join(', ')}\n            supporting-text=${String(i18next.t('text.supporting text for blacklist'))}\n          >\n            <md-icon slot=\"leading-icon\">block</md-icon>\n          </md-filled-text-field>\n\n          <md-filled-text-field\n            type=\"text\"\n            name=\"protectedlist\"\n            .label=${String(i18next.t('label.protectedlist'))}\n            value=${protectedlist.join(', ')}\n            supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}\n          >\n            <md-icon slot=\"leading-icon\">security</md-icon>\n          </md-filled-text-field>\n\n          <div>\n            <h3><ox-i18n msgid=\"title.protected-privileges\"></ox-i18n></h3>\n            <div>\n              <input id=\"checkAll\" type=\"checkbox\" @change=${e => this.oncheckAll(e)} />\n              <label for=\"checkAll\">Check all</label>\n            </div>\n\n            <ul privileges>\n              ${this.allPrivileges.map(privilege => {\n                const id = `${privilege.category}-${privilege.privilege}`\n                return html`\n                  <li>\n                    <input\n                      type=\"checkbox\"\n                      id=${id}\n                      .checked=${!!privileges.find(p => p.privilege == privilege.privilege && p.category == privilege.category)}\n                      .data-privilege=${privilege}\n                    />\n                    <label for=\"${id}\">${privilege.description}</label>\n                  </li>\n                `\n              })}\n            </ul>\n          </div>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {\n    var { data } = await client.query({\n      query: gql`\n        query {\n          privileges {\n            items {\n              privilege\n              category\n              description\n            }\n            total\n          }\n        }\n      `\n    })\n\n    this.allPrivileges = data?.privileges.items || []\n\n    var { data } = await client.query({\n      query: gql`\n        query {\n          secureIPList\n        }\n      `\n    })\n\n    this.value = data ? data.secureIPList : {}\n  }\n\n  checkAll(checked) {\n    Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(checkbox => ((checkbox as HTMLInputElement).checked = checked))\n  }\n\n  oncheckAll(e) {\n    this.checkAll(e.target.checked)\n  }\n\n  async onSave() {\n    const whitelist = !this.whitelist.value ? [] : this.whitelist.value.split(',').map(ip => ip.trim())\n    const blacklist = !this.blacklist.value ? [] : this.blacklist.value.split(',').map(ip => ip.trim())\n    const protectedlist = !this.protectedlist.value ? [] : this.protectedlist.value.split(',').map(ip => ip.trim())\n    const privileges = Array.from(this.protectedPrivileges)\n      .map((e: any) => e['data-privilege'])\n      .map((priv: any) => {\n        const { description, ...others } = priv\n        return others\n      })\n\n    const iplist = {\n      whitelist,\n      blacklist,\n      protectedlist,\n      privileges\n    }\n\n    const { data } = await client.query({\n      query: gql`\n        mutation ($iplist: Object!) {\n          updateSecureIPList(iplist: $iplist)\n        }\n      `,\n      variables: {\n        iplist\n      }\n    })\n\n    this.value = data ? data.updateSecureIPList : {}\n  }\n}\n"]}