@things-factory/lite-menu 7.0.1-alpha.12 → 7.0.1-alpha.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,5 @@
1
- import '@material/mwc-formfield'
2
- import '@material/mwc-checkbox'
3
1
  import '@operato/i18n/ox-i18n.js'
2
+ import '@material/web/checkbox/checkbox.js'
4
3
 
5
4
  import { css, html, LitElement } from 'lit'
6
5
  import { customElement, query, property, state } from 'lit/decorators.js'
@@ -15,6 +14,10 @@ export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
15
14
  static styles = [
16
15
  css`
17
16
  label {
17
+ display: flex;
18
+ gap: 10px;
19
+ align-items: center;
20
+
18
21
  font: var(--label-font);
19
22
  color: var(--label-color);
20
23
  text-transform: var(--label-text-transform);
@@ -33,9 +36,10 @@ export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
33
36
  <ox-i18n slot="title" msgid="title.lite-menu-setting"></ox-i18n>
34
37
 
35
38
  <div slot="content">
36
- <mwc-formfield label="hovering">
37
- <mwc-checkbox id="hovering" @change=${e => this.onChange(e)} ?checked=${checked} ?indeterminate=${indeterminate}></mwc-checkbox>
38
- </mwc-formfield>
39
+ <label>
40
+ <md-checkbox id="hovering" @change=${e => this.onChange(e)} ?checked=${checked} ?indeterminate=${indeterminate}></md-checkbox>
41
+ hovering
42
+ </label>
39
43
  </div>
40
44
  </setting-let>
41
45
  `
@@ -1,6 +1,5 @@
1
- import '@material/mwc-formfield';
2
- import '@material/mwc-checkbox';
3
1
  import '@operato/i18n/ox-i18n.js';
2
+ import '@material/web/checkbox/checkbox.js';
4
3
  import { LitElement } from 'lit';
5
4
  declare const LiteMenuSettingLet_base: (new (...args: any[]) => LitElement) & typeof LitElement;
6
5
  export declare class LiteMenuSettingLet extends LiteMenuSettingLet_base {
@@ -1,7 +1,6 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
- import '@material/mwc-formfield';
3
- import '@material/mwc-checkbox';
4
2
  import '@operato/i18n/ox-i18n.js';
3
+ import '@material/web/checkbox/checkbox.js';
5
4
  import { css, html, LitElement } from 'lit';
6
5
  import { customElement, property } from 'lit/decorators.js';
7
6
  import { clientSettingStore } from '@operato/shell';
@@ -16,9 +15,10 @@ let LiteMenuSettingLet = class LiteMenuSettingLet extends localize(i18next)(LitE
16
15
  <ox-i18n slot="title" msgid="title.lite-menu-setting"></ox-i18n>
17
16
 
18
17
  <div slot="content">
19
- <mwc-formfield label="hovering">
20
- <mwc-checkbox id="hovering" @change=${e => this.onChange(e)} ?checked=${checked} ?indeterminate=${indeterminate}></mwc-checkbox>
21
- </mwc-formfield>
18
+ <label>
19
+ <md-checkbox id="hovering" @change=${e => this.onChange(e)} ?checked=${checked} ?indeterminate=${indeterminate}></md-checkbox>
20
+ hovering
21
+ </label>
22
22
  </div>
23
23
  </setting-let>
24
24
  `;
@@ -61,6 +61,10 @@ let LiteMenuSettingLet = class LiteMenuSettingLet extends localize(i18next)(LitE
61
61
  LiteMenuSettingLet.styles = [
62
62
  css `
63
63
  label {
64
+ display: flex;
65
+ gap: 10px;
66
+ align-items: center;
67
+
64
68
  font: var(--label-font);
65
69
  color: var(--label-color);
66
70
  text-transform: var(--label-text-transform);
@@ -1 +1 @@
1
- {"version":3,"file":"lite-menu-setting-let.js","sourceRoot":"","sources":["../client/lite-menu-setting-let.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAS,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAanE,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAA;QACtC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAA;QAEjD,OAAO,IAAI,CAAA;;;;;;kDAMmC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,OAAO,mBAAmB,aAAa;;;;KAItH,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,QAAQ,CAAA;IACrF,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,CAAQ;;QACrB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;SAC1B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;SACrB;QAED,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAA;QAC7F,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,EAAE;YACpC,OAAM;SACP;QAED,IAAI;YACF,MAAM,kBAAkB,CAAC,GAAG,CAAC;gBAC3B,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF,CAAC,CAAA;SACH;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;SACjB;QAED,aAAa,CAAC;YACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;IACJ,CAAC;;AA7DM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;KAMF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDAAmB;AAXpC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA+D9B;SA/DY,kBAAkB","sourcesContent":["import '@material/mwc-formfield'\nimport '@material/mwc-checkbox'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, property, state } from 'lit/decorators.js'\n\nimport { clientSettingStore } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { setupMenuPart } from './actions/lite-menu'\n\n@customElement('lite-menu-setting-let')\nexport class LiteMenuSettingLet extends localize(i18next)(LitElement) {\n static styles = [\n css`\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n `\n ]\n\n @property({ type: Boolean }) hovering?: boolean\n\n render() {\n const checked = this.hovering === true\n const indeterminate = this.hovering === undefined\n\n return html`\n <setting-let>\n <ox-i18n slot=\"title\" msgid=\"title.lite-menu-setting\"></ox-i18n>\n\n <div slot=\"content\">\n <mwc-formfield label=\"hovering\">\n <mwc-checkbox id=\"hovering\" @change=${e => this.onChange(e)} ?checked=${checked} ?indeterminate=${indeterminate}></mwc-checkbox>\n </mwc-formfield>\n </div>\n </setting-let>\n `\n }\n\n async firstUpdated() {\n this.hovering = ((await clientSettingStore.get('lite-menu'))?.value || {}).hovering\n }\n\n async onChange(e: Event) {\n if (this.hovering === true) {\n this.hovering = false\n } else if (this.hovering === false) {\n this.hovering = undefined\n } else {\n this.hovering = true\n }\n\n const { hovering: valueFromStore } = (await clientSettingStore.get('lite-menu'))?.value || {}\n if (this.hovering === valueFromStore) {\n return\n }\n\n try {\n await clientSettingStore.put({\n key: 'lite-menu',\n value: {\n hovering: this.hovering\n }\n })\n } catch (e) {\n console.error(e)\n }\n\n setupMenuPart({\n hovering: this.hovering\n })\n }\n}\n"]}
1
+ {"version":3,"file":"lite-menu-setting-let.js","sourceRoot":"","sources":["../client/lite-menu-setting-let.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAS,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAiBnE,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAA;QACtC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAA;QAEjD,OAAO,IAAI,CAAA;;;;;;iDAMkC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,OAAO,mBAAmB,aAAa;;;;;KAKrH,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,QAAQ,CAAA;IACrF,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,CAAQ;;QACrB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB;aAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;SAC1B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;SACrB;QAED,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAA;QAC7F,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,EAAE;YACpC,OAAM;SACP;QAED,IAAI;YACF,MAAM,kBAAkB,CAAC,GAAG,CAAC;gBAC3B,GAAG,EAAE,WAAW;gBAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;aACF,CAAC,CAAA;SACH;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;SACjB;QAED,aAAa,CAAC;YACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;IACJ,CAAC;;AAlEM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDAAmB;AAfpC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAoE9B;SApEY,kBAAkB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@material/web/checkbox/checkbox.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query, property, state } from 'lit/decorators.js'\n\nimport { clientSettingStore } from '@operato/shell'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { setupMenuPart } from './actions/lite-menu'\n\n@customElement('lite-menu-setting-let')\nexport class LiteMenuSettingLet extends localize(i18next)(LitElement) {\n static styles = [\n css`\n label {\n display: flex;\n gap: 10px;\n align-items: center;\n\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n `\n ]\n\n @property({ type: Boolean }) hovering?: boolean\n\n render() {\n const checked = this.hovering === true\n const indeterminate = this.hovering === undefined\n\n return html`\n <setting-let>\n <ox-i18n slot=\"title\" msgid=\"title.lite-menu-setting\"></ox-i18n>\n\n <div slot=\"content\">\n <label>\n <md-checkbox id=\"hovering\" @change=${e => this.onChange(e)} ?checked=${checked} ?indeterminate=${indeterminate}></md-checkbox>\n hovering\n </label>\n </div>\n </setting-let>\n `\n }\n\n async firstUpdated() {\n this.hovering = ((await clientSettingStore.get('lite-menu'))?.value || {}).hovering\n }\n\n async onChange(e: Event) {\n if (this.hovering === true) {\n this.hovering = false\n } else if (this.hovering === false) {\n this.hovering = undefined\n } else {\n this.hovering = true\n }\n\n const { hovering: valueFromStore } = (await clientSettingStore.get('lite-menu'))?.value || {}\n if (this.hovering === valueFromStore) {\n return\n }\n\n try {\n await clientSettingStore.put({\n key: 'lite-menu',\n value: {\n hovering: this.hovering\n }\n })\n } catch (e) {\n console.error(e)\n }\n\n setupMenuPart({\n hovering: this.hovering\n })\n }\n}\n"]}