@omegagrid/core 0.10.37 → 0.10.40

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.
@@ -13,6 +13,7 @@ export declare class Switch extends LitElement {
13
13
  state: SwitchState;
14
14
  shape: Shape;
15
15
  noAnimation: boolean;
16
+ disabled: boolean;
16
17
  checkbox: HTMLInputElement;
17
18
  _onChange: () => void;
18
19
  updated(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5C,qBAAa,WAAY,SAAQ,WAAW,CAAC,WAAW,CAAC;CAAI;AAE7D,qBACa,MAAO,SAAQ,UAAU;IAErC,MAAM,CAAC,MAAM,4BAAS;IACtB,MAAM,CAAC,YAAY,EAAE,KAAK,CAAW;IAGrC,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,UAAU,CAAqB;IAGtC,KAAK,EAAE,WAAW,CAAS;IAG3B,KAAK,QAAuB;IAG5B,WAAW,UAAS;IAGpB,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,SAAS,aAGR;IAED,OAAO;IAUP,MAAM,6CAoBJ;CAEF"}
1
+ {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5C,qBAAa,WAAY,SAAQ,WAAW,CAAC,WAAW,CAAC;CAAI;AAE7D,qBACa,MAAO,SAAQ,UAAU;IAErC,MAAM,CAAC,MAAM,4BAAS;IACtB,MAAM,CAAC,YAAY,EAAE,KAAK,CAAW;IAGrC,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,UAAU,CAAqB;IAGtC,KAAK,EAAE,WAAW,CAAS;IAG3B,KAAK,QAAuB;IAG5B,WAAW,UAAS;IAGpB,QAAQ,UAAS;IAGjB,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,SAAS,aAGR;IAED,OAAO;IAUP,MAAM,6CAoBJ;CAEF"}
package/dist/ui/switch.js CHANGED
@@ -20,6 +20,7 @@ let Switch = Switch_1 = class Switch extends LitElement {
20
20
  this.state = 'off';
21
21
  this.shape = Switch_1.defaultShape;
22
22
  this.noAnimation = false;
23
+ this.disabled = false;
23
24
  this._onChange = () => {
24
25
  this.state = this.checkbox.checked ? 'on' : 'off';
25
26
  this.dispatchEvent(new SwitchEvent(this.state));
@@ -32,7 +33,7 @@ let Switch = Switch_1 = class Switch extends LitElement {
32
33
  <div></div>
33
34
  </div>
34
35
 
35
- <input type="checkbox" @change="${this._onChange}" ?checked="${this.state == 'on'}">
36
+ <input type="checkbox" @change="${this._onChange}" ?checked="${this.state == 'on'}" ?disabled="${this.disabled}">
36
37
 
37
38
  <div class="slider">
38
39
  <div></div>
@@ -41,7 +42,7 @@ let Switch = Switch_1 = class Switch extends LitElement {
41
42
  </label>
42
43
  ` : html `
43
44
  <label>
44
- <input type="checkbox" @change="${this._onChange}" ?checked="${this.state == 'on'}">
45
+ <input type="checkbox" @change="${this._onChange}" ?checked="${this.state == 'on'}" ?disabled="${this.disabled}">
45
46
  <div class="slider"></div>
46
47
  </label>
47
48
  `;
@@ -73,6 +74,9 @@ __decorate([
73
74
  __decorate([
74
75
  property({ type: Boolean, reflect: true })
75
76
  ], Switch.prototype, "noAnimation", void 0);
77
+ __decorate([
78
+ property({ type: Boolean, reflect: true })
79
+ ], Switch.prototype, "disabled", void 0);
76
80
  __decorate([
77
81
  query('input')
78
82
  ], Switch.prototype, "checkbox", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/C,MAAM,OAAO,WAAY,SAAQ,WAAwB;CAAI;AAGtD,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QASN,UAAK,GAAe,UAAU,CAAC,MAAM,CAAC;QAGtC,UAAK,GAAgB,KAAK,CAAC;QAG3B,UAAK,GAAG,QAAM,CAAC,YAAY,CAAC;QAG5B,gBAAW,GAAG,KAAK,CAAC;QAKpB,cAAS,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,CAAC,CAAA;QAYD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;qCAQT,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,KAAK,IAAI,IAAI;;;;;;;EAOlF,CAAC,CAAC,CAAC,IAAI,CAAA;;qCAE4B,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,KAAK,IAAI,IAAI;;;EAGlF,CAAC;IAEH,CAAC;IAhCA,OAAO;QACN,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE;;yBAEV,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;0BAChC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;;;GAGzD,EAAE,cAAc,CAAC,CAAC;IACpB,CAAC;;AAlCM,aAAM,GAAG,KAAK,AAAR,CAAS;AACf,mBAAY,GAAU,OAAO,AAAjB,CAAkB;AAGrC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACF;AAGtC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACb;AAG3B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACZ;AAG5B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CACrB;AAGpB;IADC,KAAK,CAAC,OAAO,CAAC;wCACY;AArBf,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CA4DlB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes } from '../types';\nimport { dom } from '../common';\nimport { style } from './switch.style';\nimport { ChangeEvent } from '../common/events';\n\nexport type SwitchState = 'on' | 'off';\ntype Shape = 'round' | 'square' | 'hexagon';\n\nexport class SwitchEvent extends ChangeEvent<SwitchState> { }\n\n@customElement(`og-switch`)\nexport class Switch extends LitElement {\n\n\tstatic styles = style;\n\tstatic defaultShape: Shape = 'round'; \n\n\t@property({type: String})\n\ttext: string;\n\n\t@property({type: String, reflect: true})\n\tcolor: ColorTypes = ColorTypes.Accent;\n\n\t@property({type: String, reflect: true})\n\tstate: SwitchState = 'off';\t\n\n\t@property({type: String, reflect: true})\n\tshape = Switch.defaultShape;\n\n\t@property({type: Boolean, reflect: true})\n\tnoAnimation = false;\n\n\t@query('input')\n\tcheckbox: HTMLInputElement;\n\n\t_onChange = () => {\n\t\tthis.state = this.checkbox.checked ? 'on' : 'off';\n\t\tthis.dispatchEvent(new SwitchEvent(this.state));\n\t}\n\n\tupdated() {\n\t\tdom.appendStyle(this.shadowRoot, `\n\t\t\t:host {\n\t\t\t\t--og-switch-width: ${dom.numToPixels(this.offsetWidth)};\n\t\t\t\t--og-switch-height: ${dom.numToPixels(this.offsetHeight)};\n\t\t\t\t--og-switch-margin: 6px;\n\t\t\t}\t\n\t\t`, 'switch-style');\n\t}\n\n\trender = () => this.shape == 'hexagon' ? html`\n\t\t<label>\n\t\t\t<div class=\"background\">\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t</div>\n\t\t\t\n\t\t\t<input type=\"checkbox\" @change=\"${this._onChange}\" ?checked=\"${this.state == 'on'}\">\n\t\t\t\n\t\t\t<div class=\"slider\">\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t</div>\n\t\t</label>\t\n\t` : html`\n\t\t<label>\n\t\t\t<input type=\"checkbox\" @change=\"${this._onChange}\" ?checked=\"${this.state == 'on'}\">\n\t\t\t<div class=\"slider\"></div>\n\t\t</label>\n\t`;\n\t\n}"]}
1
+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/C,MAAM,OAAO,WAAY,SAAQ,WAAwB;CAAI;AAGtD,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QASN,UAAK,GAAe,UAAU,CAAC,MAAM,CAAC;QAGtC,UAAK,GAAgB,KAAK,CAAC;QAG3B,UAAK,GAAG,QAAM,CAAC,YAAY,CAAC;QAG5B,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAKjB,cAAS,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,CAAC,CAAA;QAYD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;qCAQT,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,KAAK,IAAI,IAAI,gBAAgB,IAAI,CAAC,QAAQ;;;;;;;EAO/G,CAAC,CAAC,CAAC,IAAI,CAAA;;qCAE4B,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,KAAK,IAAI,IAAI,gBAAgB,IAAI,CAAC,QAAQ;;;EAG/G,CAAC;IAEH,CAAC;IAhCA,OAAO;QACN,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE;;yBAEV,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;0BAChC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;;;GAGzD,EAAE,cAAc,CAAC,CAAC;IACpB,CAAC;;AArCM,aAAM,GAAG,KAAK,AAAR,CAAS;AACf,mBAAY,GAAU,OAAO,AAAjB,CAAkB;AAGrC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACF;AAGtC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACb;AAG3B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACZ;AAG5B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CACrB;AAGpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCACxB;AAGjB;IADC,KAAK,CAAC,OAAO,CAAC;wCACY;AAxBf,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CA+DlB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes } from '../types';\nimport { dom } from '../common';\nimport { style } from './switch.style';\nimport { ChangeEvent } from '../common/events';\n\nexport type SwitchState = 'on' | 'off';\ntype Shape = 'round' | 'square' | 'hexagon';\n\nexport class SwitchEvent extends ChangeEvent<SwitchState> { }\n\n@customElement(`og-switch`)\nexport class Switch extends LitElement {\n\n\tstatic styles = style;\n\tstatic defaultShape: Shape = 'round'; \n\n\t@property({type: String})\n\ttext: string;\n\n\t@property({type: String, reflect: true})\n\tcolor: ColorTypes = ColorTypes.Accent;\n\n\t@property({type: String, reflect: true})\n\tstate: SwitchState = 'off';\t\n\n\t@property({type: String, reflect: true})\n\tshape = Switch.defaultShape;\n\n\t@property({type: Boolean, reflect: true})\n\tnoAnimation = false;\n\n\t@property({type: Boolean, reflect: true})\n\tdisabled = false;\n\n\t@query('input')\n\tcheckbox: HTMLInputElement;\n\n\t_onChange = () => {\n\t\tthis.state = this.checkbox.checked ? 'on' : 'off';\n\t\tthis.dispatchEvent(new SwitchEvent(this.state));\n\t}\n\n\tupdated() {\n\t\tdom.appendStyle(this.shadowRoot, `\n\t\t\t:host {\n\t\t\t\t--og-switch-width: ${dom.numToPixels(this.offsetWidth)};\n\t\t\t\t--og-switch-height: ${dom.numToPixels(this.offsetHeight)};\n\t\t\t\t--og-switch-margin: 6px;\n\t\t\t}\t\n\t\t`, 'switch-style');\n\t}\n\n\trender = () => this.shape == 'hexagon' ? html`\n\t\t<label>\n\t\t\t<div class=\"background\">\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t</div>\n\t\t\t\n\t\t\t<input type=\"checkbox\" @change=\"${this._onChange}\" ?checked=\"${this.state == 'on'}\" ?disabled=\"${this.disabled}\">\n\t\t\t\n\t\t\t<div class=\"slider\">\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t</div>\n\t\t</label>\t\n\t` : html`\n\t\t<label>\n\t\t\t<input type=\"checkbox\" @change=\"${this._onChange}\" ?checked=\"${this.state == 'on'}\" ?disabled=\"${this.disabled}\">\n\t\t\t<div class=\"slider\"></div>\n\t\t</label>\n\t`;\n\t\n}"]}
@@ -1 +1 @@
1
- {"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,2BAiJhB,CAAC"}
1
+ {"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,2BAsJhB,CAAC"}
@@ -41,6 +41,11 @@ export const style = [...Object.values(ColorTypes).map(type => css `
41
41
  width: var(--og-switch-width);
42
42
  height: var(--og-switch-height);
43
43
  }
44
+
45
+ :host([disabled]) label {
46
+ cursor: not-allowed;
47
+ opacity: 0.5;
48
+ }
44
49
 
45
50
  input {
46
51
  opacity: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"switch.style.js","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAA;iBACjD,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;;iBAGvC,SAAS,CAAC,IAAI,CAAC;4CACY,SAAS,CAAC,IAAI,CAAC;;;iBAG1C,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;;iBAGvC,SAAS,CAAC,IAAI,CAAC;iBACf,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;CAEvD,CAAC,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIN,CAAC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ColorTypes } from '../types';\n\nexport const style = [...Object.values(ColorTypes).map(type => css`\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(2) {\n\t\tbackground-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(1) {\n\t\tborder-bottom-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(3) {\n\t\tborder-top-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][shape=\"square\"][state=\"on\"]) label,\n\t:host([color=\"${unsafeCSS(type)}\"][shape=\"round\"][state=\"on\"]) label {\n\t\tbackground-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n`), css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: var(--og-switch-width, 36px);\n\t\theight: var(--og-switch-height, 20px);\n\t}\n\n\t:host {\n\t\t--og-slider-size: calc(var(--og-switch-height) - var(--og-switch-margin));\n\t\t--og-slider-sqrt3: calc(var(--og-slider-size) * sqrt(3));\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: var(--og-switch-width);\n\t\theight: var(--og-switch-height);\n\t}\n\t \n\tinput {\n\t\topacity: 0;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\t:host([shape=\"square\"]) label, :host([shape=\"round\"]) label {\n\t\tbackground-color: var(--og-switch-background-color);\n\t}\n\n\t:host([shape=\"round\"]) label {\n\t\tborder-radius: calc(var(--og-switch-width) / 2);\n\t}\n\n\t:host([shape=\"round\"]) .slider {\n\t\tborder-radius: calc(var(--og-slider-size) / 2);\n\t}\n\n\t:host([shape=\"square\"]) .slider, :host([shape=\"round\"]) .slider {\n\t\twidth: var(--og-slider-size);\n\t\theight: var(--og-slider-size);\n\t\tbackground-color: var(--og-switch-slider-color);\n\t}\n\n\t:host([shape=\"square\"]) label {\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([shape=\"square\"]) .slider {\n\t\tborder-radius: calc(var(--og-base-radius) - 1px);\n\t}\n\n\n\t.background {\n\t\twidth: 100%;\n\t}\n\n\t.background > div:nth-child(1) {\n\t\tborder-bottom: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);\n\t\tborder-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\tborder-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\theight: 0;\n\t\twidth: var(--og-switch-width);\n\t}\n\n\t.background > div:nth-child(2) {\n\t\theight: calc(var(--og-switch-height) / 2);\n\t\twidth: var(--og-switch-width);\n\t\tbackground-color: var(--og-switch-background-color);\n\t}\n\n\t.background > div:nth-child(3) {\n\t\tborder-top: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);\n\t\tborder-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\tborder-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\theight: 0;\n\t\twidth: var(--og-switch-width);\n\t}\n\n\t.slider {\n\t\tposition: absolute;\n\t\ttop: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);\n\t\tleft: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);\n\t\twidth: calc(var(--og-slider-size) * sqrt(3) / 2);\n\t\ttransition: .4s;\n\t}\n\n\t:host([noAnimation]) .slider {\n\t\ttransition: none;\n\t}\n\n\t.slider > div {\n\t\tposition: absolute;\n\t}\n\n\t.slider > div:nth-child(1) {\n\t\tborder-right: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);\n\t\tborder-top: calc(var(--og-slider-size) / 4) solid transparent;\n\t\tborder-bottom: calc(var(--og-slider-size) / 4) solid transparent;\n\t\twidth: 0;\n\t\theight: var(--og-slider-size);\n\t\ttop: 0;\n\t\tleft: 0;\n\t}\n\n\t.slider > div:nth-child(2) {\n\t\tborder-left: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);\n\t\tborder-top: calc(var(--og-slider-size) / 4) solid transparent;\n\t\tborder-bottom: calc(var(--og-slider-size) / 4) solid transparent;\n\t\twidth: 0;\n\t\theight: var(--og-slider-size);\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n\n\t:host([shape=\"hexagon\"]) input:checked + .slider {\n\t\ttransform: translateX(calc(var(--og-switch-width) - (var(--og-slider-sqrt3) / 2) - ((var(--og-switch-height) - var(--og-slider-size)))));\n\t}\n\n\t:host([shape=\"round\"]) input:checked + .slider, :host([shape=\"square\"]) input:checked + .slider {\n\t\ttransform: translateX(calc(var(--og-switch-width) - var(--og-slider-size) - var(--og-switch-height) + var(--og-slider-size)));\n\t}\n`];\n"]}
1
+ {"version":3,"file":"switch.style.js","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAA;iBACjD,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;;iBAGvC,SAAS,CAAC,IAAI,CAAC;4CACY,SAAS,CAAC,IAAI,CAAC;;;iBAG1C,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;;iBAGvC,SAAS,CAAC,IAAI,CAAC;iBACf,SAAS,CAAC,IAAI,CAAC;yCACS,SAAS,CAAC,IAAI,CAAC;;CAEvD,CAAC,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIN,CAAC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ColorTypes } from '../types';\n\nexport const style = [...Object.values(ColorTypes).map(type => css`\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(2) {\n\t\tbackground-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(1) {\n\t\tborder-bottom-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][state=\"on\"]) .background > div:nth-child(3) {\n\t\tborder-top-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n\n\t:host([color=\"${unsafeCSS(type)}\"][shape=\"square\"][state=\"on\"]) label,\n\t:host([color=\"${unsafeCSS(type)}\"][shape=\"round\"][state=\"on\"]) label {\n\t\tbackground-color: var(--og-colortype-${unsafeCSS(type)}-background-color);\n\t}\n`), css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: var(--og-switch-width, 36px);\n\t\theight: var(--og-switch-height, 20px);\n\t}\n\n\t:host {\n\t\t--og-slider-size: calc(var(--og-switch-height) - var(--og-switch-margin));\n\t\t--og-slider-sqrt3: calc(var(--og-slider-size) * sqrt(3));\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: var(--og-switch-width);\n\t\theight: var(--og-switch-height);\n\t}\n\n\t:host([disabled]) label {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\t \n\tinput {\n\t\topacity: 0;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\t:host([shape=\"square\"]) label, :host([shape=\"round\"]) label {\n\t\tbackground-color: var(--og-switch-background-color);\n\t}\n\n\t:host([shape=\"round\"]) label {\n\t\tborder-radius: calc(var(--og-switch-width) / 2);\n\t}\n\n\t:host([shape=\"round\"]) .slider {\n\t\tborder-radius: calc(var(--og-slider-size) / 2);\n\t}\n\n\t:host([shape=\"square\"]) .slider, :host([shape=\"round\"]) .slider {\n\t\twidth: var(--og-slider-size);\n\t\theight: var(--og-slider-size);\n\t\tbackground-color: var(--og-switch-slider-color);\n\t}\n\n\t:host([shape=\"square\"]) label {\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([shape=\"square\"]) .slider {\n\t\tborder-radius: calc(var(--og-base-radius) - 1px);\n\t}\n\n\n\t.background {\n\t\twidth: 100%;\n\t}\n\n\t.background > div:nth-child(1) {\n\t\tborder-bottom: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);\n\t\tborder-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\tborder-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\theight: 0;\n\t\twidth: var(--og-switch-width);\n\t}\n\n\t.background > div:nth-child(2) {\n\t\theight: calc(var(--og-switch-height) / 2);\n\t\twidth: var(--og-switch-width);\n\t\tbackground-color: var(--og-switch-background-color);\n\t}\n\n\t.background > div:nth-child(3) {\n\t\tborder-top: calc(var(--og-switch-height) / 4) solid var(--og-switch-background-color);\n\t\tborder-left: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\tborder-right: calc(var(--og-switch-height) * sqrt(3) / 4) solid transparent;\n\t\theight: 0;\n\t\twidth: var(--og-switch-width);\n\t}\n\n\t.slider {\n\t\tposition: absolute;\n\t\ttop: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);\n\t\tleft: calc((var(--og-switch-height) - var(--og-slider-size)) / 2);\n\t\twidth: calc(var(--og-slider-size) * sqrt(3) / 2);\n\t\ttransition: .4s;\n\t}\n\n\t:host([noAnimation]) .slider {\n\t\ttransition: none;\n\t}\n\n\t.slider > div {\n\t\tposition: absolute;\n\t}\n\n\t.slider > div:nth-child(1) {\n\t\tborder-right: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);\n\t\tborder-top: calc(var(--og-slider-size) / 4) solid transparent;\n\t\tborder-bottom: calc(var(--og-slider-size) / 4) solid transparent;\n\t\twidth: 0;\n\t\theight: var(--og-slider-size);\n\t\ttop: 0;\n\t\tleft: 0;\n\t}\n\n\t.slider > div:nth-child(2) {\n\t\tborder-left: calc(0.5px + var(--og-slider-sqrt3) / 4) solid var(--og-switch-slider-color);\n\t\tborder-top: calc(var(--og-slider-size) / 4) solid transparent;\n\t\tborder-bottom: calc(var(--og-slider-size) / 4) solid transparent;\n\t\twidth: 0;\n\t\theight: var(--og-slider-size);\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n\n\t:host([shape=\"hexagon\"]) input:checked + .slider {\n\t\ttransform: translateX(calc(var(--og-switch-width) - (var(--og-slider-sqrt3) / 2) - ((var(--og-switch-height) - var(--og-slider-size)))));\n\t}\n\n\t:host([shape=\"round\"]) input:checked + .slider, :host([shape=\"square\"]) input:checked + .slider {\n\t\ttransform: translateX(calc(var(--og-switch-width) - var(--og-slider-size) - var(--og-switch-height) + var(--og-slider-size)));\n\t}\n`];\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omegagrid/core",
3
- "version": "0.10.37",
3
+ "version": "0.10.40",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Core components",
6
6
  "main": "./dist/index.js",
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@fortawesome/fontawesome-svg-core": "^7.0.1",
39
- "@omegagrid/localize": "^0.10.37",
39
+ "@omegagrid/localize": "^0.10.40",
40
40
  "color": "^4.2.3",
41
41
  "date-fns": "^3.2.0",
42
42
  "lit": "^3.1.1",