@proximus/lavender-switch 1.0.0-alpha.8 → 1.0.0-beta.0
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/Switch.d.ts +27 -0
- package/dist/index.d.ts +1 -0
- package/dist/{index.js → index.es.js} +2 -2
- package/package.json +11 -33
package/dist/Switch.d.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { PxElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare enum InputState {
|
|
3
|
+
ERROR = "error",
|
|
4
|
+
SUCCESS = "success"
|
|
5
|
+
}
|
|
6
|
+
export declare class Switch extends PxElement<HTMLInputElement> {
|
|
7
|
+
static nativeName: string;
|
|
8
|
+
protected internals: ElementInternals;
|
|
9
|
+
private template;
|
|
10
|
+
constructor();
|
|
11
|
+
static get observedAttributes(): string[];
|
|
12
|
+
connectedCallback(): void;
|
|
13
|
+
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
14
|
+
formData(): FormData;
|
|
15
|
+
static get formAssociated(): boolean;
|
|
16
|
+
formResetCallback(): void;
|
|
17
|
+
formStateRestoreCallback(state: any): void;
|
|
18
|
+
setupForId(): void;
|
|
19
|
+
get $label(): HTMLLabelElement;
|
|
20
|
+
get $switch(): Element;
|
|
21
|
+
get inverted(): string;
|
|
22
|
+
set inverted(value: string);
|
|
23
|
+
get checked(): boolean;
|
|
24
|
+
set checked(value: boolean);
|
|
25
|
+
set disabled(value: boolean);
|
|
26
|
+
get disabled(): boolean;
|
|
27
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Switch';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PxElement as l } from "@proximus/lavender-common";
|
|
2
|
-
const d = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}.switch:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}.switch:has(input[inverted]):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default)}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media only screen and (min-width:
|
|
2
|
+
const d = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}.switch:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}.switch:has(input[inverted]):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none-default);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default);cursor:pointer}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media only screen and (min-width: 48em){label{padding:var(--px-padding-3xs-desktop)}}@media only screen and (min-width: 64.0625em){label{padding:var(--px-padding-3xs-desktop)}}', a = new CSSStyleSheet();
|
|
3
3
|
a.replaceSync(d);
|
|
4
4
|
var c = /* @__PURE__ */ ((i) => (i.ERROR = "error", i.SUCCESS = "success", i))(c || {});
|
|
5
5
|
const o = class o extends l {
|
|
@@ -92,7 +92,7 @@ const o = class o extends l {
|
|
|
92
92
|
};
|
|
93
93
|
o.nativeName = "input";
|
|
94
94
|
let r = o;
|
|
95
|
-
customElements.define("px-switch", r);
|
|
95
|
+
customElements.get("px-switch") || customElements.define("px-switch", r);
|
|
96
96
|
export {
|
|
97
97
|
c as InputState,
|
|
98
98
|
r as Switch
|
package/package.json
CHANGED
|
@@ -1,46 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-switch",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-beta.0",
|
|
4
4
|
"description": "",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"
|
|
7
|
-
".": {
|
|
8
|
-
"types": "./src/index.ts",
|
|
9
|
-
"development": "./src/index.ts",
|
|
10
|
-
"default": "./dist/index.js"
|
|
11
|
-
},
|
|
12
|
-
"./src/*.css": {
|
|
13
|
-
"development": "src/*.css"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
5
|
+
"main": "dist/index.es.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
16
7
|
"files": [
|
|
17
8
|
"dist"
|
|
18
9
|
],
|
|
19
10
|
"type": "module",
|
|
20
11
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
12
|
+
"transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
|
|
13
|
+
"clean": "rm -rf dist",
|
|
14
|
+
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
|
+
"test": "vitest run --coverage",
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
|
|
23
17
|
},
|
|
24
18
|
"publishConfig": {
|
|
25
19
|
"access": "public"
|
|
26
20
|
},
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
"publish": {
|
|
31
|
-
"assets": [
|
|
32
|
-
"CHANGELOG.md",
|
|
33
|
-
"package.json",
|
|
34
|
-
"dist/*.js",
|
|
35
|
-
"dist/*.cjs",
|
|
36
|
-
"dist/css/**/*.css",
|
|
37
|
-
"dist/js/**/*.js",
|
|
38
|
-
"dist/*.svg",
|
|
39
|
-
"dist/*.ttf",
|
|
40
|
-
"dist/glyphmap.json",
|
|
41
|
-
"dist/*.d.ts"
|
|
42
|
-
]
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
21
|
+
"customElements": "dist/custom-elements.json",
|
|
22
|
+
"web-types": "./dist/web-types.json",
|
|
23
|
+
"gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
|
|
46
24
|
}
|