@omegagrid/core 0.6.93 → 0.6.94
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.
package/dist/ui/switch.d.ts
CHANGED
|
@@ -2,17 +2,21 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import { ColorTypes } from '../types';
|
|
3
3
|
import { ChangeEvent } from '../common/events';
|
|
4
4
|
export type SwitchState = 'on' | 'off';
|
|
5
|
+
type Shape = 'round' | 'square' | 'hexagon';
|
|
5
6
|
export declare class SwitchEvent extends ChangeEvent<SwitchState> {
|
|
6
7
|
}
|
|
7
8
|
export declare class Switch extends LitElement {
|
|
8
9
|
static styles: import("lit").CSSResult[];
|
|
10
|
+
static defaultShape: Shape;
|
|
9
11
|
text: string;
|
|
10
12
|
color: ColorTypes;
|
|
11
13
|
state: SwitchState;
|
|
12
|
-
shape:
|
|
14
|
+
shape: Shape;
|
|
15
|
+
noAnimation: boolean;
|
|
13
16
|
checkbox: HTMLInputElement;
|
|
14
17
|
_onChange: () => void;
|
|
15
18
|
updated(): void;
|
|
16
19
|
render: () => import("lit-html").TemplateResult<1>;
|
|
17
20
|
}
|
|
21
|
+
export {};
|
|
18
22
|
//# sourceMappingURL=switch.d.ts.map
|
package/dist/ui/switch.d.ts.map
CHANGED
|
@@ -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;
|
|
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"}
|
package/dist/ui/switch.js
CHANGED
|
@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
+
var Switch_1;
|
|
7
8
|
import { LitElement, html } from 'lit';
|
|
8
9
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
9
10
|
import { ColorTypes } from '../types';
|
|
@@ -12,12 +13,13 @@ import { style } from './switch.style';
|
|
|
12
13
|
import { ChangeEvent } from '../common/events';
|
|
13
14
|
export class SwitchEvent extends ChangeEvent {
|
|
14
15
|
}
|
|
15
|
-
let Switch = class Switch extends LitElement {
|
|
16
|
+
let Switch = Switch_1 = class Switch extends LitElement {
|
|
16
17
|
constructor() {
|
|
17
18
|
super(...arguments);
|
|
18
19
|
this.color = ColorTypes.Accent;
|
|
19
20
|
this.state = 'off';
|
|
20
|
-
this.shape =
|
|
21
|
+
this.shape = Switch_1.defaultShape;
|
|
22
|
+
this.noAnimation = false;
|
|
21
23
|
this._onChange = () => {
|
|
22
24
|
this.state = this.checkbox.checked ? 'on' : 'off';
|
|
23
25
|
this.dispatchEvent(new SwitchEvent(this.state));
|
|
@@ -55,6 +57,7 @@ let Switch = class Switch extends LitElement {
|
|
|
55
57
|
}
|
|
56
58
|
};
|
|
57
59
|
Switch.styles = style;
|
|
60
|
+
Switch.defaultShape = 'round';
|
|
58
61
|
__decorate([
|
|
59
62
|
property({ type: String })
|
|
60
63
|
], Switch.prototype, "text", void 0);
|
|
@@ -67,10 +70,13 @@ __decorate([
|
|
|
67
70
|
__decorate([
|
|
68
71
|
property({ type: String, reflect: true })
|
|
69
72
|
], Switch.prototype, "shape", void 0);
|
|
73
|
+
__decorate([
|
|
74
|
+
property({ type: Boolean, reflect: true })
|
|
75
|
+
], Switch.prototype, "noAnimation", void 0);
|
|
70
76
|
__decorate([
|
|
71
77
|
query('input')
|
|
72
78
|
], Switch.prototype, "checkbox", void 0);
|
|
73
|
-
Switch = __decorate([
|
|
79
|
+
Switch = Switch_1 = __decorate([
|
|
74
80
|
customElement(`og-switch`)
|
|
75
81
|
], Switch);
|
|
76
82
|
export { Switch };
|
package/dist/ui/switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":"
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../src/ui/switch.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,2BAiJhB,CAAC"}
|
package/dist/ui/switch.style.js
CHANGED
|
@@ -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
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/core",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.94",
|
|
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": "6.4.2",
|
|
39
|
-
"@omegagrid/localize": "^0.6.
|
|
39
|
+
"@omegagrid/localize": "^0.6.94",
|
|
40
40
|
"@riovir/wc-fontawesome": "^0.1.9",
|
|
41
41
|
"color": "^4.2.3",
|
|
42
42
|
"date-fns": "^3.2.0",
|