godown 3.0.0-canary.13 → 3.0.0-canary.14
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/README.md +1 -1
- package/alert.js +1 -5
- package/alert.js.map +1 -1
- package/avatar.js +1 -5
- package/avatar.js.map +1 -1
- package/breath.js +1 -5
- package/breath.js.map +1 -1
- package/button.js +1 -5
- package/button.js.map +1 -1
- package/card.js +1 -5
- package/card.js.map +1 -1
- package/carousel.js +1 -5
- package/carousel.js.map +1 -1
- package/components/alert.js +1 -174
- package/components/alert.js.map +1 -1
- package/components/avatar.js +1 -68
- package/components/avatar.js.map +1 -1
- package/components/breath.js +1 -81
- package/components/breath.js.map +1 -1
- package/components/button.js +1 -185
- package/components/button.js.map +1 -1
- package/components/card.js +1 -49
- package/components/card.js.map +1 -1
- package/components/carousel.js +1 -119
- package/components/carousel.js.map +1 -1
- package/components/details.js +1 -53
- package/components/details.js.map +1 -1
- package/components/dialog.js +1 -98
- package/components/dialog.js.map +1 -1
- package/components/divider.js +1 -35
- package/components/divider.js.map +1 -1
- package/components/dragbox.js +1 -111
- package/components/dragbox.js.map +1 -1
- package/components/flex.js +1 -63
- package/components/flex.js.map +1 -1
- package/components/form.js +1 -75
- package/components/form.js.map +1 -1
- package/components/grid.js +1 -57
- package/components/grid.js.map +1 -1
- package/components/input.js +1 -51
- package/components/input.js.map +1 -1
- package/components/layout.js +1 -58
- package/components/layout.js.map +1 -1
- package/components/link.js +1 -53
- package/components/link.js.map +1 -1
- package/components/progress.js +1 -59
- package/components/progress.js.map +1 -1
- package/components/range.d.ts +1 -0
- package/components/range.d.ts.map +1 -1
- package/components/range.js +1 -267
- package/components/range.js.map +1 -1
- package/components/rotate.js +1 -56
- package/components/rotate.js.map +1 -1
- package/components/router.js +1 -247
- package/components/router.js.map +1 -1
- package/components/select.js +1 -217
- package/components/select.js.map +1 -1
- package/components/skeleton.js +1 -55
- package/components/skeleton.js.map +1 -1
- package/components/split.js +1 -154
- package/components/split.js.map +1 -1
- package/components/switch.js +1 -93
- package/components/switch.js.map +1 -1
- package/components/text.js +1 -46
- package/components/text.js.map +1 -1
- package/components/time.js +1 -78
- package/components/time.js.map +1 -1
- package/components/tooltip.js +1 -85
- package/components/tooltip.js.map +1 -1
- package/components/typewriter.js +1 -128
- package/components/typewriter.js.map +1 -1
- package/core/global-style.js +1 -52
- package/core/global-style.js.map +1 -1
- package/core/super-anchor.js +1 -39
- package/core/super-anchor.js.map +1 -1
- package/core/super-input.js +1 -117
- package/core/super-input.js.map +1 -1
- package/core/super-openable.js +1 -37
- package/core/super-openable.js.map +1 -1
- package/custom-elements.json +1 -1
- package/details.js +1 -5
- package/details.js.map +1 -1
- package/dev/components/range.d.ts +1 -0
- package/dev/components/range.d.ts.map +1 -1
- package/dev/components/range.js +8 -3
- package/dev/components/range.js.map +1 -1
- package/dev/components/router.js +2 -2
- package/dev/components/router.js.map +1 -1
- package/dialog.js +1 -5
- package/dialog.js.map +1 -1
- package/divider.js +1 -5
- package/divider.js.map +1 -1
- package/dragbox.js +1 -5
- package/dragbox.js.map +1 -1
- package/flex.js +1 -5
- package/flex.js.map +1 -1
- package/form.js +1 -5
- package/form.js.map +1 -1
- package/grid.js +1 -5
- package/grid.js.map +1 -1
- package/index.js +1 -56
- package/index.js.map +1 -1
- package/input.js +1 -5
- package/input.js.map +1 -1
- package/layout.js +1 -5
- package/layout.js.map +1 -1
- package/link.js +1 -5
- package/link.js.map +1 -1
- package/package.json +1 -1
- package/progress.js +1 -5
- package/progress.js.map +1 -1
- package/range.js +1 -5
- package/range.js.map +1 -1
- package/rotate.js +1 -5
- package/rotate.js.map +1 -1
- package/router.js +1 -5
- package/router.js.map +1 -1
- package/select.js +1 -5
- package/select.js.map +1 -1
- package/skeleton.js +1 -5
- package/skeleton.js.map +1 -1
- package/split.js +1 -5
- package/split.js.map +1 -1
- package/src/components/range.ts +9 -3
- package/src/components/router.ts +2 -2
- package/switch.js +1 -5
- package/switch.js.map +1 -1
- package/text.js +1 -5
- package/text.js.map +1 -1
- package/time.js +1 -5
- package/time.js.map +1 -1
- package/tooltip.js +1 -5
- package/tooltip.js.map +1 -1
- package/typewriter.js +1 -5
- package/typewriter.js.map +1 -1
- package/web-types.json +1 -1
package/components/input.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../src/components/input.ts"],"sourcesContent":null,"names":[
|
1
|
+
{"version":3,"file":"input.js","sources":["../src/components/input.ts"],"sourcesContent":null,"names":["Input","SuperInput","constructor","this","type","variant","render","html","attr","observedRecord","classList","_renderPrefix","makeId","value","placeholder","nothing","autofocus","autocapitalize","autocomplete","disabled","_handleInput","_renderSuffix","reset","_input","default","__decorate","property","prototype","part","godown","styles","css","cssGlobalVars","input","foreground","Input$1"],"mappings":"ohBAsBA,IAAMA,EAAN,MAAMA,cAAcC,EAApB,WAAAC,uBACEC,KAAIC,KAA6D,OAQjED,KAAOE,QAA0B,UAKvB,MAAAC,GACR,OAAOC,CAAI,oBAAoBC,EAAKL,KAAKM,0BAA0BC,EAAU,cAAeP,KAAKE,aAC/F,CACAF,KAAKQ,gBACLJ,CAAI,6BAEMJ,KAAKC,aACPD,KAAKS,mBACDT,KAAKU,uBACAV,KAAKW,aAAeC,kBACrBZ,KAAKa,8BACDb,KAAKc,gBAAkBF,oBACzBZ,KAAKe,cAAgBH,iBACxBZ,KAAKgB,qBACRhB,KAAKiB,iBAEjBjB,KAAKkB,yBAKT,KAAAC,GACEnB,KAAKoB,OAAOV,MAAQV,KAAKqB,QACzBrB,KAAKU,MAAQV,KAAKqB,UA5BpBC,EAAA,CADCC,KACyC1B,EAAA2B,UAAA,eAAA,GAGhCF,EAAA,CADTG,EAAK,UAC4B5B,EAAA2B,UAAA,cAAA,GAZ9B3B,EAAKyB,EAAA,CAJVI,EAPiB,SAQjBC,EACCC,CAAG,mBAAmBC,EAAcC,2BAA2BD,EAAcC,2BAA2BD,EAAcE,8BAA8BF,EAAcC,uCAAuCD,EAAcC,iCAEnNjC,GAyCN,IAAAmC,EAAenC"}
|
package/components/layout.js
CHANGED
@@ -1,59 +1,2 @@
|
|
1
|
-
import {
|
2
|
-
import { godown } from '@godown/element/decorators/godown.js';
|
3
|
-
import { styles } from '@godown/element/decorators/styles.js';
|
4
|
-
import { attr } from '@godown/element/directives/attr.js';
|
5
|
-
import { htmlSlot } from '@godown/element/directives/html-slot.js';
|
6
|
-
import { css, html } from 'lit';
|
7
|
-
import { property } from 'lit/decorators.js';
|
8
|
-
import { GlobalStyle } from '../core/global-style.js';
|
9
|
-
|
10
|
-
const protoName = "layout";
|
11
|
-
/**
|
12
|
-
* {@linkcode NavLayout} renders slot and optional top header, bottom footer.
|
13
|
-
*
|
14
|
-
* @slot - The main content of the layout.
|
15
|
-
* @slot header - The header of the layout.
|
16
|
-
* @slot footer - The footer of the layout.
|
17
|
-
* @category layout
|
18
|
-
*/
|
19
|
-
let NavLayout = class NavLayout extends GlobalStyle {
|
20
|
-
constructor() {
|
21
|
-
super(...arguments);
|
22
|
-
/**
|
23
|
-
* If true, remove the header slot.
|
24
|
-
*/
|
25
|
-
this.noHeader = false;
|
26
|
-
/**
|
27
|
-
* If true, remove the footer slot.
|
28
|
-
*/
|
29
|
-
this.noFooter = false;
|
30
|
-
/**
|
31
|
-
* If true, header will sticky.
|
32
|
-
*/
|
33
|
-
this.sticky = false;
|
34
|
-
}
|
35
|
-
render() {
|
36
|
-
return html `<div part="root" ${attr(this.observedRecord)}>${!this.noHeader
|
37
|
-
? html `<header part="header">${htmlSlot("header")}</header>`
|
38
|
-
: ""}<main part="main">${htmlSlot()}</main>${!this.noFooter
|
39
|
-
? html `<footer part="footer">${htmlSlot("footer")}</footer>`
|
40
|
-
: ""}</div>`;
|
41
|
-
}
|
42
|
-
};
|
43
|
-
__decorate([
|
44
|
-
property({ type: Boolean })
|
45
|
-
], NavLayout.prototype, "noHeader", void 0);
|
46
|
-
__decorate([
|
47
|
-
property({ type: Boolean })
|
48
|
-
], NavLayout.prototype, "noFooter", void 0);
|
49
|
-
__decorate([
|
50
|
-
property({ type: Boolean })
|
51
|
-
], NavLayout.prototype, "sticky", void 0);
|
52
|
-
NavLayout = __decorate([
|
53
|
-
godown(protoName),
|
54
|
-
styles(css `:host,:host([contents]) [part=root]{min-height:100%;display:flex;flex-direction:column}[part=root]{display:contents}[sticky] header{position:sticky;top:0;z-index:1}[part=main]{position:relative;flex:1;width:100%}footer,header,main{width:100%}`)
|
55
|
-
], NavLayout);
|
56
|
-
var Layout = NavLayout;
|
57
|
-
|
58
|
-
export { Layout as default };
|
1
|
+
import{__decorate as o}from"tslib";import{godown as t}from"@godown/element/decorators/godown.js";import{styles as e}from"@godown/element/decorators/styles.js";import{attr as r}from"@godown/element/directives/attr.js";import{htmlSlot as i}from"@godown/element/directives/html-slot.js";import{css as s,html as a}from"lit";import{property as n}from"lit/decorators.js";import{GlobalStyle as d}from"../core/global-style.js";let p=class NavLayout extends d{constructor(){super(...arguments),this.noHeader=!1,this.noFooter=!1,this.sticky=!1}render(){return a`<div part="root" ${r(this.observedRecord)}>${this.noHeader?"":a`<header part="header">${i("header")}</header>`}<main part="main">${i()}</main>${this.noFooter?"":a`<footer part="footer">${i("footer")}</footer>`}</div>`}};o([n({type:Boolean})],p.prototype,"noHeader",void 0),o([n({type:Boolean})],p.prototype,"noFooter",void 0),o([n({type:Boolean})],p.prototype,"sticky",void 0),p=o([t("layout"),e(s`:host,:host([contents]) [part=root]{min-height:100%;display:flex;flex-direction:column}[part=root]{display:contents}[sticky] header{position:sticky;top:0;z-index:1}[part=main]{position:relative;flex:1;width:100%}footer,header,main{width:100%}`)],p);var m=p;export{m as default};
|
59
2
|
//# sourceMappingURL=layout.js.map
|
package/components/layout.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"layout.js","sources":["../src/components/layout.ts"],"sourcesContent":null,"names":[
|
1
|
+
{"version":3,"file":"layout.js","sources":["../src/components/layout.ts"],"sourcesContent":null,"names":["NavLayout","GlobalStyle","constructor","this","noHeader","noFooter","sticky","render","html","attr","observedRecord","htmlSlot","__decorate","property","type","Boolean","prototype","godown","styles","css","Layout"],"mappings":"maAuBA,IAAMA,EAAN,MAAMA,kBAAkBC,EAAxB,WAAAC,uBAKEC,KAAQC,UAAG,EAMXD,KAAQE,UAAG,EAMXF,KAAMG,QAAG,EAEC,MAAAC,GACR,OAAOC,CAAI,oBAAoBC,EAAKN,KAAKO,mBAEtCP,KAAKC,SAEF,GADAI,CAAI,yBAAyBG,EAAS,yCAGxBA,aAEjBR,KAAKE,SAEF,GADAG,CAAI,yBAAyBG,EAAS,+BAxB9CC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACFf,EAAAgB,UAAA,gBAAA,GAMhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACFf,EAAAgB,UAAA,gBAAA,GAMhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACJf,EAAAgB,UAAA,cAAA,GAjBVhB,EAASY,EAAA,CAJdK,EAViB,UAWjBC,EACCC,CAAG,uPAECnB,GAoCN,IAAAoB,EAAepB"}
|
package/components/link.js
CHANGED
@@ -1,54 +1,2 @@
|
|
1
|
-
import {
|
2
|
-
import { godown } from '@godown/element/decorators/godown.js';
|
3
|
-
import { property } from 'lit/decorators.js';
|
4
|
-
import SuperAnchor from '../core/super-anchor.js';
|
5
|
-
import Router from './router.js';
|
6
|
-
|
7
|
-
const protoName = "link";
|
8
|
-
/**
|
9
|
-
* {@linkcode Link} is used for link jumping.
|
10
|
-
*
|
11
|
-
* Set `type` to `"push" `or `"replace"`,
|
12
|
-
* will invoke the history api and trigger the {@linkcode Router.updateAll}.
|
13
|
-
*
|
14
|
-
* @category navigation
|
15
|
-
*/
|
16
|
-
let Link = class Link extends SuperAnchor {
|
17
|
-
constructor() {
|
18
|
-
super(...arguments);
|
19
|
-
/**
|
20
|
-
* If "push", call `history.pushState`.
|
21
|
-
*
|
22
|
-
* If "replace", call `history.replaceState`.
|
23
|
-
*
|
24
|
-
* If "normal", behave like a normal anchor.
|
25
|
-
*/
|
26
|
-
this.type = "normal";
|
27
|
-
/**
|
28
|
-
* Suppress the update of the {@linkcode Router}.
|
29
|
-
*/
|
30
|
-
this.suppress = false;
|
31
|
-
}
|
32
|
-
_handleClick(e) {
|
33
|
-
if (this.type === "push" || this.type === "replace") {
|
34
|
-
e.preventDefault();
|
35
|
-
(history[`${this.type}State`])(null, "", this.href);
|
36
|
-
if (!this.suppress) {
|
37
|
-
Router.updateAll();
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
};
|
42
|
-
__decorate([
|
43
|
-
property()
|
44
|
-
], Link.prototype, "type", void 0);
|
45
|
-
__decorate([
|
46
|
-
property({ type: Boolean })
|
47
|
-
], Link.prototype, "suppress", void 0);
|
48
|
-
Link = __decorate([
|
49
|
-
godown(protoName)
|
50
|
-
], Link);
|
51
|
-
var Link$1 = Link;
|
52
|
-
|
53
|
-
export { Link$1 as default };
|
1
|
+
import{__decorate as t}from"tslib";import{godown as e}from"@godown/element/decorators/godown.js";import{property as o}from"lit/decorators.js";import r from"../core/super-anchor.js";import s from"./router.js";let p=class Link extends r{constructor(){super(...arguments),this.type="normal",this.suppress=!1}_handleClick(t){"push"!==this.type&&"replace"!==this.type||(t.preventDefault(),history[`${this.type}State`](null,"",this.href),this.suppress||s.updateAll())}};t([o()],p.prototype,"type",void 0),t([o({type:Boolean})],p.prototype,"suppress",void 0),p=t([e("link")],p);var i=p;export{i as default};
|
54
2
|
//# sourceMappingURL=link.js.map
|
package/components/link.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"link.js","sources":["../src/components/link.ts"],"sourcesContent":null,"names":[
|
1
|
+
{"version":3,"file":"link.js","sources":["../src/components/link.ts"],"sourcesContent":null,"names":["Link","SuperAnchor","constructor","this","type","suppress","_handleClick","e","preventDefault","history","href","Router","updateAll","__decorate","property","prototype","Boolean","godown","Link$1"],"mappings":"gNAiBA,IAAMA,EAAN,MAAMA,aAAaC,EAAnB,WAAAC,uBASEC,KAAIC,KAAkC,SAMtCD,KAAQE,UAAG,EAED,YAAAC,CAAaC,GACH,SAAdJ,KAAKC,MAAiC,YAAdD,KAAKC,OAC/BG,EAAEC,iBACDC,QAAQ,GAAGN,KAAKC,aAAc,KAAM,GAAID,KAAKO,MACzCP,KAAKE,UACRM,EAAOC,eAbbC,EAAA,CADCC,KAC6Cd,EAAAe,UAAA,YAAA,GAM9CF,EAAA,CADCC,EAAS,CAAEV,KAAMY,WACFhB,EAAAe,UAAA,gBAAA,GAfZf,EAAIa,EAAA,CADTI,EAViB,SAWZjB,GA4BN,IAAAkB,EAAelB"}
|
package/components/progress.js
CHANGED
@@ -1,60 +1,2 @@
|
|
1
|
-
import {
|
2
|
-
import { godown } from '@godown/element/decorators/godown.js';
|
3
|
-
import { styles } from '@godown/element/decorators/styles.js';
|
4
|
-
import { attr } from '@godown/element/directives/attr.js';
|
5
|
-
import { isNil } from '@godown/element/tools/lib.js';
|
6
|
-
import { css, html } from 'lit';
|
7
|
-
import { property } from 'lit/decorators.js';
|
8
|
-
import { cssGlobalVars, GlobalStyle } from '../core/global-style.js';
|
9
|
-
|
10
|
-
const protoName = "progress";
|
11
|
-
/**
|
12
|
-
* {@linkcode Progress} similar to `<progress>`.
|
13
|
-
*
|
14
|
-
* @category feedback
|
15
|
-
*/
|
16
|
-
let Progress = class Progress extends GlobalStyle {
|
17
|
-
constructor() {
|
18
|
-
super(...arguments);
|
19
|
-
this.max = 1;
|
20
|
-
this.min = 0;
|
21
|
-
}
|
22
|
-
render() {
|
23
|
-
let width = 20;
|
24
|
-
let className;
|
25
|
-
if (!isNil(this.value)) {
|
26
|
-
width = this.parsePercent(this.value);
|
27
|
-
className = "static";
|
28
|
-
}
|
29
|
-
return html `<div part="root" ${attr(this.observedRecord)} class="${className}"><i part="value" style="width:${width}"></i></div>`;
|
30
|
-
}
|
31
|
-
/**
|
32
|
-
* Convert s to a percentage without a percent sign.
|
33
|
-
*
|
34
|
-
* @param s String or number to convert.
|
35
|
-
* @returns Percentage without a percent sign.
|
36
|
-
*/
|
37
|
-
parsePercent(s = "0") {
|
38
|
-
if (String(s).includes("%")) {
|
39
|
-
return parseFloat(String(s));
|
40
|
-
}
|
41
|
-
return (parseFloat(String(s)) / (this.max - this.min)) * 100;
|
42
|
-
}
|
43
|
-
};
|
44
|
-
__decorate([
|
45
|
-
property({ type: Number })
|
46
|
-
], Progress.prototype, "max", void 0);
|
47
|
-
__decorate([
|
48
|
-
property({ type: Number })
|
49
|
-
], Progress.prototype, "min", void 0);
|
50
|
-
__decorate([
|
51
|
-
property({ type: Number })
|
52
|
-
], Progress.prototype, "value", void 0);
|
53
|
-
Progress = __decorate([
|
54
|
-
godown(protoName),
|
55
|
-
styles(css `:host{width:100%;height:.5em;border-radius:.25em;background:var(${cssGlobalVars.passive});color:var(${cssGlobalVars.active})}:host,[part=root]{display:block}[part=root]{height:inherit;z-index:1;position:relative;border-radius:inherit}[part=value]{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:inherit;transition:all .3s;animation:progress 1.8s ease-in-out infinite alternate;background:currentColor}@keyframes progress{from{left:0}to{left:80%}}.static [part=value]{animation:none}`)
|
56
|
-
], Progress);
|
57
|
-
var Progress$1 = Progress;
|
58
|
-
|
59
|
-
export { Progress$1 as default };
|
1
|
+
import{__decorate as t}from"tslib";import{godown as r}from"@godown/element/decorators/godown.js";import{styles as e}from"@godown/element/decorators/styles.js";import{attr as o}from"@godown/element/directives/attr.js";import{isNil as i}from"@godown/element/tools/lib.js";import{css as s,html as a}from"lit";import{property as n}from"lit/decorators.js";import{cssGlobalVars as l,GlobalStyle as p}from"../core/global-style.js";let m=class Progress extends p{constructor(){super(...arguments),this.max=1,this.min=0}render(){let t,r=20;return i(this.value)||(r=this.parsePercent(this.value),t="static"),a`<div part="root" ${o(this.observedRecord)} class="${t}"><i part="value" style="width:${r}"></i></div>`}parsePercent(t="0"){return String(t).includes("%")?parseFloat(String(t)):parseFloat(String(t))/(this.max-this.min)*100}};t([n({type:Number})],m.prototype,"max",void 0),t([n({type:Number})],m.prototype,"min",void 0),t([n({type:Number})],m.prototype,"value",void 0),m=t([r("progress"),e(s`:host{width:100%;height:.5em;border-radius:.25em;background:var(${l.passive});color:var(${l.active})}:host,[part=root]{display:block}[part=root]{height:inherit;z-index:1;position:relative;border-radius:inherit}[part=value]{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:inherit;transition:all .3s;animation:progress 1.8s ease-in-out infinite alternate;background:currentColor}@keyframes progress{from{left:0}to{left:80%}}.static [part=value]{animation:none}`)],m);var d=m;export{d as default};
|
60
2
|
//# sourceMappingURL=progress.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"progress.js","sources":["../src/components/progress.ts"],"sourcesContent":null,"names":[
|
1
|
+
{"version":3,"file":"progress.js","sources":["../src/components/progress.ts"],"sourcesContent":null,"names":["Progress","GlobalStyle","constructor","this","max","min","render","className","width","isNil","value","parsePercent","html","attr","observedRecord","s","String","includes","parseFloat","__decorate","property","type","Number","prototype","godown","styles","css","cssGlobalVars","passive","active","Progress$1"],"mappings":"waAkBA,IAAMA,EAAN,MAAMA,iBAAiBC,EAAvB,WAAAC,uBAEEC,KAAGC,IAAG,EAGND,KAAGE,IAAG,EAKI,MAAAC,GACR,IACIC,EADAC,EAAQ,GAMZ,OAJKC,EAAMN,KAAKO,SACdF,EAAQL,KAAKQ,aAAaR,KAAKO,OAC/BH,EAAY,UAEPK,CAAI,oBAAoBC,EAAKV,KAAKW,0BAA0BP,mCAClCC,gBAUnC,YAAAG,CAAaI,EAAqB,KAChC,OAAIC,OAAOD,GAAGE,SAAS,KACdC,WAAWF,OAAOD,IAEnBG,WAAWF,OAAOD,KAAOZ,KAAKC,IAAMD,KAAKE,KAAQ,MA9B3Dc,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACXtB,EAAAuB,UAAA,WAAA,GAGPJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACXtB,EAAAuB,UAAA,WAAA,GAGPJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACLtB,EAAAuB,UAAA,aAAA,GARTvB,EAAQmB,EAAA,CAFbK,EAPiB,YAQjBC,EAAOC,CAAG,mEAAqEC,EAAcC,sBAAsBD,EAAcE,qYAC5H7B,GAoCN,IAAA8B,EAAe9B"}
|
package/components/range.d.ts
CHANGED
@@ -39,6 +39,7 @@ declare class Range extends SuperInput {
|
|
39
39
|
protected _root: HTMLElement;
|
40
40
|
protected _handles: NodeListOf<HTMLElement>;
|
41
41
|
lastFocus?: number;
|
42
|
+
protected _focusStack: number[];
|
42
43
|
/**
|
43
44
|
* Returns true when the second number is greater than the first number.
|
44
45
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../src/components/range.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;;GAQG;AACH,cAMM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IAER;;OAEG;IAEH,GAAG,SAAO;IAEV;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEzB;;OAEG;IAEH,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC;IAG3B,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAG7B,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,EAAE,CAEzB;IAED;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE;IAS1C,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IA0BrC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;IAQxD,OAAO,CAAC,aAAa,CAAqC;IAE1D,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;
|
1
|
+
{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../src/components/range.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;;GAQG;AACH,cAMM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IAER;;OAEG;IAEH,GAAG,SAAO;IAEV;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEzB;;OAEG;IAEH,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC;IAG3B,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAG7B,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,WAAW,EAAE,MAAM,EAAE,CAAM;IAErC;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,EAAE,CAEzB;IAED;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE;IAS1C,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IA0BrC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;IAQxD,OAAO,CAAC,aAAa,CAAqC;IAE1D,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAchC,UAAU,IAAI,IAAI;IAKlB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,OAI7B,aAAa,KAAG,IAAI;IAWjC,eAAe,CAAC,KAAK,EAAE,MAAM,OAChB,UAAU,KAAG,IAAI;IAM9B,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAMlD,cAAc,CAAC,KAAK,EAAE,MAAM,sBACA,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,KAAG,IAAI;IAavE,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI3B;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM;IAO9C;;OAEG;IACH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAM/C,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAgBnD,SAAS,CAAC,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OAC9D,UAAU,KAAG,IAAI;IAa9B,SAAS,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OACrD,UAAU,KAAG,IAAI;IAS9B,SAAS,CAAC,cAAc,IAAI,IAAI;IAahC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,MAAM,GAAG,MAAM,EAAE;IAIzB,QAAQ,IAAI,MAAM,GAAG,MAAM,EAAE;CAM9B;AAED,eAAe,KAAK,CAAC"}
|
package/components/range.js
CHANGED
@@ -1,268 +1,2 @@
|
|
1
|
-
import {
|
2
|
-
import { godown } from '@godown/element/decorators/godown.js';
|
3
|
-
import { part } from '@godown/element/decorators/part.js';
|
4
|
-
import { styles } from '@godown/element/decorators/styles.js';
|
5
|
-
import { attr } from '@godown/element/directives/attr.js';
|
6
|
-
import { classList } from '@godown/element/directives/class-list.js';
|
7
|
-
import { joinProperties } from '@godown/element/tools/css.js';
|
8
|
-
import { isNil } from '@godown/element/tools/lib.js';
|
9
|
-
import { css, html } from 'lit';
|
10
|
-
import { property, queryAll, state } from 'lit/decorators.js';
|
11
|
-
import { scopePrefix, cssGlobalVars } from '../core/global-style.js';
|
12
|
-
import SuperInput from '../core/super-input.js';
|
13
|
-
|
14
|
-
const protoName = "range";
|
15
|
-
const cssScope = scopePrefix(protoName);
|
16
|
-
/**
|
17
|
-
* {@linkcode Range} is similar to `<input type="range">`.
|
18
|
-
*
|
19
|
-
* Value accepts number, or array.
|
20
|
-
*
|
21
|
-
* Number has 1 handle, the array has the number of its elements and the minimum is 2.
|
22
|
-
*
|
23
|
-
* @category input
|
24
|
-
*/
|
25
|
-
let Range = class Range extends SuperInput {
|
26
|
-
constructor() {
|
27
|
-
super(...arguments);
|
28
|
-
/**
|
29
|
-
* Minimum value.
|
30
|
-
*/
|
31
|
-
this.min = 0;
|
32
|
-
/**
|
33
|
-
* Maximum value.
|
34
|
-
*/
|
35
|
-
this.max = 100;
|
36
|
-
/**
|
37
|
-
* Display vertically.
|
38
|
-
*/
|
39
|
-
this.vertical = false;
|
40
|
-
}
|
41
|
-
/**
|
42
|
-
* Returns true when the second number is greater than the first number.
|
43
|
-
*/
|
44
|
-
get reverse() {
|
45
|
-
return this.range ? this.value[0] > this.value[1] : false;
|
46
|
-
}
|
47
|
-
/**
|
48
|
-
* If value is array.
|
49
|
-
*/
|
50
|
-
get range() {
|
51
|
-
return Array.isArray(this.value);
|
52
|
-
}
|
53
|
-
/**
|
54
|
-
* Return values in the form of an array.
|
55
|
-
*/
|
56
|
-
get rangeValue() {
|
57
|
-
return (this.range ? this.value : [this.value]);
|
58
|
-
}
|
59
|
-
/**
|
60
|
-
* @param len Minimum result length.
|
61
|
-
* @param value Fill value.
|
62
|
-
* @returns Array with length of len.
|
63
|
-
*/
|
64
|
-
padValue(len, value = 0) {
|
65
|
-
const { rangeValue } = this;
|
66
|
-
const miss = len - rangeValue.length;
|
67
|
-
if (miss > 0) {
|
68
|
-
return new Array(miss).fill(value).concat(rangeValue);
|
69
|
-
}
|
70
|
-
return rangeValue;
|
71
|
-
}
|
72
|
-
render() {
|
73
|
-
const rangeValue = this.padValue(2);
|
74
|
-
const from = Math.min(...rangeValue);
|
75
|
-
const to = Math.max(...rangeValue);
|
76
|
-
const gap = this.max - this.min;
|
77
|
-
return html `<div part="root" ${attr(this.observedRecord)} @mousedown="${this.disabled ? null : this._handleMousedownRoot}" style="${joinProperties({
|
78
|
-
"--from": `${((from - this.min) / gap) * 100}%`,
|
79
|
-
"--to": `${((to - this.min) / gap) * 100}%`,
|
80
|
-
...(this.range
|
81
|
-
? Object.fromEntries(rangeValue.map((value, index) => [
|
82
|
-
`--handle-${index}`,
|
83
|
-
`${((value - this.min) / gap) * 100}%`,
|
84
|
-
]))
|
85
|
-
: {}),
|
86
|
-
})}"><div part="track"></div>${this.range
|
87
|
-
? this.value.map((_, index) => this.renderHandle(index))
|
88
|
-
: this.renderHandle(0)}</div>`;
|
89
|
-
}
|
90
|
-
renderHandle(index) {
|
91
|
-
const { range } = this;
|
92
|
-
const end = !range || index === this.value.length - 1;
|
93
|
-
return html `<i tabindex="0" part="handle" class="${classList({ "last-focus": this.lastFocus === index })}" @mousedown="${this.disabled ? null : this.createMouseDown(index)}" @focus="${this.disabled ? null : () => this.focusHandle(index)}" @blur="${this.disabled ? null : this.blurHandle}" style="--handle:var(--${
|
94
|
-
/* In single-handle mod or end, it is max value */
|
95
|
-
(!range && end) ? `to` : `handle-${index}`})"></i>`;
|
96
|
-
}
|
97
|
-
focusHandle(index) {
|
98
|
-
this.lastFocus = index;
|
99
|
-
const handleItem = this._handles.item(index);
|
100
|
-
handleItem?.focus();
|
101
|
-
if (!this._keydownEvent) {
|
102
|
-
this._keydownEvent = this.events.add(document, "keydown", this.createKeydownEvent(index));
|
103
|
-
}
|
104
|
-
}
|
105
|
-
blurHandle() {
|
106
|
-
this.lastFocus = undefined;
|
107
|
-
this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
|
108
|
-
}
|
109
|
-
createKeydownEvent(index) {
|
110
|
-
if (!this.range) {
|
111
|
-
index = 0;
|
112
|
-
}
|
113
|
-
return (e) => {
|
114
|
-
if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
|
115
|
-
e.preventDefault();
|
116
|
-
this.createSetValue(index)(old => old - this.step);
|
117
|
-
}
|
118
|
-
else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
|
119
|
-
e.preventDefault();
|
120
|
-
this.createSetValue(index)(old => old + this.step);
|
121
|
-
}
|
122
|
-
};
|
123
|
-
}
|
124
|
-
createMouseDown(index) {
|
125
|
-
return (e) => {
|
126
|
-
this.focusHandle(index);
|
127
|
-
this.createMousedownListener(this.createSetValue(index))(e);
|
128
|
-
};
|
129
|
-
}
|
130
|
-
_handleMousedownEnd(e) {
|
131
|
-
this.lastFocus = 0;
|
132
|
-
this.createMousedownListener(this.setEnd)(e);
|
133
|
-
this.focusHandle(0);
|
134
|
-
}
|
135
|
-
createSetValue(index) {
|
136
|
-
return (numberOrModifier) => {
|
137
|
-
const number = typeof numberOrModifier === "number"
|
138
|
-
? this.normalizeValue(numberOrModifier)
|
139
|
-
: numberOrModifier(this.rangeValue[index]);
|
140
|
-
let newValue = number;
|
141
|
-
if (this.range) {
|
142
|
-
newValue = [...this.rangeValue];
|
143
|
-
newValue[index] = number;
|
144
|
-
}
|
145
|
-
this.value = newValue;
|
146
|
-
};
|
147
|
-
}
|
148
|
-
setEnd(value) {
|
149
|
-
this.createSetValue(this.value?.length - 1 || 0)(value);
|
150
|
-
}
|
151
|
-
/**
|
152
|
-
* Compute value from event.
|
153
|
-
*/
|
154
|
-
_computeValue(e) {
|
155
|
-
const rect = this._root.getBoundingClientRect();
|
156
|
-
const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
|
157
|
-
const value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
|
158
|
-
return this.normalizeValue(value);
|
159
|
-
}
|
160
|
-
/**
|
161
|
-
* Ensure that the values do not exceed the range of max and min.
|
162
|
-
*/
|
163
|
-
normalizeValue(value) {
|
164
|
-
if (value > this.max) {
|
165
|
-
value -= this.step;
|
166
|
-
}
|
167
|
-
else if (value < this.min) {
|
168
|
-
value += this.step;
|
169
|
-
}
|
170
|
-
return value;
|
171
|
-
}
|
172
|
-
_handleMousedownRoot(e) {
|
173
|
-
const value = this._computeValue(e);
|
174
|
-
const index = this.range
|
175
|
-
? this.rangeValue.reduce((acc, item, index) => {
|
176
|
-
const diff = Math.abs(value - item);
|
177
|
-
const prevDiff = Math.abs(value - this.rangeValue[acc]);
|
178
|
-
return diff < prevDiff ? index : acc;
|
179
|
-
}, 0)
|
180
|
-
: 0;
|
181
|
-
const set = this.createSetValue(index);
|
182
|
-
set(value);
|
183
|
-
this.createMousedownListener(set)(e);
|
184
|
-
this.focusHandle(index);
|
185
|
-
}
|
186
|
-
createMousedownListener(mouseMoveCallback) {
|
187
|
-
return (e) => {
|
188
|
-
e.preventDefault();
|
189
|
-
e.stopPropagation();
|
190
|
-
const move = this.createMousemoveListener(mouseMoveCallback);
|
191
|
-
this.events.add(document, "mousemove", move);
|
192
|
-
const stop = () => {
|
193
|
-
this.events.remove(document, "mousemove", move);
|
194
|
-
this.events.remove(document, "mouseup", stop);
|
195
|
-
};
|
196
|
-
this.events.add(document, "mouseup", stop);
|
197
|
-
};
|
198
|
-
}
|
199
|
-
createMousemoveListener(callback) {
|
200
|
-
return (e) => {
|
201
|
-
const value = this._computeValue(e);
|
202
|
-
if (value > this.max || value < this.min) {
|
203
|
-
return;
|
204
|
-
}
|
205
|
-
callback?.call(this, value);
|
206
|
-
};
|
207
|
-
}
|
208
|
-
_connectedInit() {
|
209
|
-
const gap = this.max - this.min;
|
210
|
-
this.step ||= gap / 100;
|
211
|
-
if (isNil(this.value)) {
|
212
|
-
if (!isNil(this.default)) {
|
213
|
-
this.value = this.default;
|
214
|
-
}
|
215
|
-
else {
|
216
|
-
this.value = Math.round(gap / 2 / this.step) * this.step;
|
217
|
-
}
|
218
|
-
}
|
219
|
-
this.default ??= this.value;
|
220
|
-
}
|
221
|
-
reset() {
|
222
|
-
this.value = this.default;
|
223
|
-
}
|
224
|
-
sort() {
|
225
|
-
return this.value = this.toSorted();
|
226
|
-
}
|
227
|
-
toSorted() {
|
228
|
-
if (this.range) {
|
229
|
-
return [...this.value].sort((a, b) => a - b);
|
230
|
-
}
|
231
|
-
return this.value;
|
232
|
-
}
|
233
|
-
};
|
234
|
-
__decorate([
|
235
|
-
property({ type: Number })
|
236
|
-
], Range.prototype, "min", void 0);
|
237
|
-
__decorate([
|
238
|
-
property({ type: Number })
|
239
|
-
], Range.prototype, "max", void 0);
|
240
|
-
__decorate([
|
241
|
-
property({ type: Number })
|
242
|
-
], Range.prototype, "step", void 0);
|
243
|
-
__decorate([
|
244
|
-
property({ type: Boolean, reflect: true })
|
245
|
-
], Range.prototype, "vertical", void 0);
|
246
|
-
__decorate([
|
247
|
-
property({ type: Array })
|
248
|
-
], Range.prototype, "value", void 0);
|
249
|
-
__decorate([
|
250
|
-
property({ type: Array })
|
251
|
-
], Range.prototype, "default", void 0);
|
252
|
-
__decorate([
|
253
|
-
part("root")
|
254
|
-
], Range.prototype, "_root", void 0);
|
255
|
-
__decorate([
|
256
|
-
queryAll("[part=handle]")
|
257
|
-
], Range.prototype, "_handles", void 0);
|
258
|
-
__decorate([
|
259
|
-
state()
|
260
|
-
], Range.prototype, "lastFocus", void 0);
|
261
|
-
Range = __decorate([
|
262
|
-
godown(protoName),
|
263
|
-
styles(css `:host{${cssScope}--handle-active:var(${cssGlobalVars.active});${cssScope}--track-width:.5em;${cssScope}--length:var(${cssGlobalVars.input}-width);background:var(${cssGlobalVars.input}-background);width:var(${cssScope}--length);display:block}:host([contents]) [part=root]{width:inherit}:host([vertical]){height:var(${cssScope}--length);width:-moz-fit-content;width:fit-content}:host(:not([disabled])) .last-focus{z-index:1;${cssScope}--handle-scale:1.05;background:var(${cssScope}--handle-active)}[part=root]{min-height:inherit;position:relative;border-radius:inherit;width:100%;--from:0%;--to:50%;height:var(${cssScope}--track-width)}[part=track]{height:100%;min-height:inherit;display:flex;position:absolute;pointer-events:none;border-radius:inherit;justify-content:space-between;left:min(var(--from),var(--to));background:var(${cssGlobalVars.active});width:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)))}[part=handle]{width:1em;height:1em;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:absolute;border:.1em solid;border-radius:50%;transform-origin:0 25%;transform:scale(var(${cssScope}--handle-scale,1)) translate(-50%,-25%);background:var(${cssGlobalVars.active});border-color:var(${cssGlobalVars.input}-control)}`, css `[vertical]{height:inherit;width:var(${cssScope}--track-width)}[vertical] i{transform:translate(-25%,-50%)}[vertical] [part=track]{width:100%;height:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)));top:min(var(--from),var(--to));left:0}`, css `[part=handle]{left:var(--handle);top:0}[vertical] [part=handle]{top:var(--handle);left:0}`)
|
264
|
-
], Range);
|
265
|
-
var Range$1 = Range;
|
266
|
-
|
267
|
-
export { Range$1 as default };
|
1
|
+
import{__decorate as t}from"tslib";import{godown as e}from"@godown/element/decorators/godown.js";import{part as r}from"@godown/element/decorators/part.js";import{styles as s}from"@godown/element/decorators/styles.js";import{attr as o}from"@godown/element/directives/attr.js";import{classList as i}from"@godown/element/directives/class-list.js";import{joinProperties as a}from"@godown/element/tools/css.js";import{isNil as n}from"@godown/element/tools/lib.js";import{css as h,html as l}from"lit";import{property as d,queryAll as u,state as c}from"lit/decorators.js";import{scopePrefix as m,cssGlobalVars as v}from"../core/global-style.js";import p from"../core/super-input.js";const f="range",g=m(f);let w=class Range extends p{constructor(){super(...arguments),this.min=0,this.max=100,this.vertical=!1,this._focusStack=[]}get reverse(){return!!this.range&&this.value[0]>this.value[1]}get range(){return Array.isArray(this.value)}get rangeValue(){return this.range?this.value:[this.value]}padValue(t,e=0){const{rangeValue:r}=this,s=t-r.length;return s>0?new Array(s).fill(e).concat(r):r}render(){const t=this.padValue(2),e=Math.min(...t),r=Math.max(...t),s=this.max-this.min;return l`<div part="root" ${o(this.observedRecord)} @mousedown="${this.disabled?null:this._handleMousedownRoot}" style="${a({"--from":(e-this.min)/s*100+"%","--to":(r-this.min)/s*100+"%",...this.range?Object.fromEntries(t.map(((t,e)=>[`--handle-${e}`,(t-this.min)/s*100+"%"]))):{}})}"><div part="track"></div>${this.range?this.value.map(((t,e)=>this.renderHandle(e))):this.renderHandle(0)}</div>`}renderHandle(t){const{range:e}=this,r=!e||t===this.value.length-1;return l`<i tabindex="0" part="handle" class="${i({"last-focus":this.lastFocus===t})}" @mousedown="${this.disabled?null:this.createMouseDown(t)}" @focus="${this.disabled?null:()=>this.focusHandle(t)}" @blur="${this.disabled?null:this.blurHandle}" style="z-index:${this._focusStack.indexOf(t)+1};--handle:var(--${!e&&r?"to":`handle-${t}`})"></i>`}focusHandle(t){this.lastFocus=t;const e=this._focusStack.indexOf(t);-1!==e&&this._focusStack.splice(e,1),this._focusStack.push(t);const r=this._handles.item(t);r?.focus(),this._keydownEvent||(this._keydownEvent=this.events.add(document,"keydown",this.createKeydownEvent(t)))}blurHandle(){this.lastFocus=void 0,this._keydownEvent=this.events.remove(document,"keydown",this._keydownEvent)}createKeydownEvent(t){return this.range||(t=0),e=>{"ArrowLeft"===e.key||"ArrowDown"===e.key?(e.preventDefault(),this.createSetValue(t)((t=>t-this.step))):"ArrowRight"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),this.createSetValue(t)((t=>t+this.step)))}}createMouseDown(t){return e=>{this.focusHandle(t),this.createMousedownListener(this.createSetValue(t))(e)}}_handleMousedownEnd(t){this.lastFocus=0,this.createMousedownListener(this.setEnd)(t),this.focusHandle(0)}createSetValue(t){return e=>{const r="number"==typeof e?this.normalizeValue(e):e(this.rangeValue[t]);let s=r;this.range&&(s=[...this.rangeValue],s[t]=r),this.value=s}}setEnd(t){this.createSetValue(this.value?.length-1||0)(t)}_computeValue(t){const e=this._root.getBoundingClientRect(),r=this.vertical?(t.clientY-e.top)/e.height:(t.clientX-e.left)/e.width,s=Math.round(r*(this.max-this.min)/this.step)*this.step;return this.normalizeValue(s)}normalizeValue(t){return t>this.max?t-=this.step:t<this.min&&(t+=this.step),t}_handleMousedownRoot(t){const e=this._computeValue(t),r=this.range?this.rangeValue.reduce(((t,r,s)=>Math.abs(e-r)<Math.abs(e-this.rangeValue[t])?s:t),0):0,s=this.createSetValue(r);s(e),this.createMousedownListener(s)(t),this.focusHandle(r)}createMousedownListener(t){return e=>{e.preventDefault(),e.stopPropagation();const r=this.createMousemoveListener(t);this.events.add(document,"mousemove",r);const s=()=>{this.events.remove(document,"mousemove",r),this.events.remove(document,"mouseup",s)};this.events.add(document,"mouseup",s)}}createMousemoveListener(t){return e=>{const r=this._computeValue(e);r>this.max||r<this.min||t?.call(this,r)}}_connectedInit(){const t=this.max-this.min;this.step||=t/100,n(this.value)&&(n(this.default)?this.value=Math.round(t/2/this.step)*this.step:this.value=this.default),this.default??=this.value}reset(){this.value=this.default}sort(){return this.value=this.toSorted()}toSorted(){return this.range?[...this.value].sort(((t,e)=>t-e)):this.value}};t([d({type:Number})],w.prototype,"min",void 0),t([d({type:Number})],w.prototype,"max",void 0),t([d({type:Number})],w.prototype,"step",void 0),t([d({type:Boolean,reflect:!0})],w.prototype,"vertical",void 0),t([d({type:Array})],w.prototype,"value",void 0),t([d({type:Array})],w.prototype,"default",void 0),t([r("root")],w.prototype,"_root",void 0),t([u("[part=handle]")],w.prototype,"_handles",void 0),t([c()],w.prototype,"lastFocus",void 0),w=t([e(f),s(h`:host{${g}--handle-active:var(${v.active});${g}--track-width:.5em;${g}--length:var(${v.input}-width);background:var(${v.input}-background);width:var(${g}--length);display:block}:host([contents]) [part=root]{width:inherit}:host([vertical]){height:var(${g}--length);width:-moz-fit-content;width:fit-content}:host(:not([disabled])) .last-focus{${g}--handle-scale:1.05;background:var(${g}--handle-active)}[part=root]{min-height:inherit;position:relative;border-radius:inherit;width:100%;--from:0%;--to:50%;height:var(${g}--track-width)}[part=track]{height:100%;min-height:inherit;display:flex;position:absolute;pointer-events:none;border-radius:inherit;justify-content:space-between;left:min(var(--from),var(--to));background:var(${v.active});width:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)))}[part=handle]{width:1em;height:1em;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:absolute;border:.1em solid;border-radius:50%;transform-origin:0 25%;transform:scale(var(${g}--handle-scale,1)) translate(-50%,-25%);background:var(${v.active});border-color:var(${v.input}-control)}`,h`[vertical]{height:inherit;width:var(${g}--track-width)}[vertical] i{transform:translate(-25%,-50%)}[vertical] [part=track]{width:100%;height:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)));top:min(var(--from),var(--to));left:0}`,h`[part=handle]{left:var(--handle);top:0}[vertical] [part=handle]{top:var(--handle);left:0}`)],w);var y=w;export{y as default};
|
268
2
|
//# sourceMappingURL=range.js.map
|
package/components/range.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"range.js","sources":["../src/components/range.ts"],"sourcesContent":null,"names":[
|
1
|
+
{"version":3,"file":"range.js","sources":["../src/components/range.ts"],"sourcesContent":null,"names":["protoName","cssScope","scopePrefix","Range","SuperInput","constructor","this","min","max","vertical","_focusStack","reverse","range","value","Array","isArray","rangeValue","padValue","len","miss","length","fill","concat","render","from","Math","to","gap","html","attr","observedRecord","disabled","_handleMousedownRoot","joinProperties","Object","fromEntries","map","index","_","renderHandle","end","classList","lastFocus","createMouseDown","focusHandle","blurHandle","indexOf","indexOfFocusStack","splice","push","handleItem","_handles","item","focus","_keydownEvent","events","add","document","createKeydownEvent","undefined","remove","e","key","preventDefault","createSetValue","old","step","createMousedownListener","_handleMousedownEnd","setEnd","numberOrModifier","number","normalizeValue","newValue","_computeValue","rect","_root","getBoundingClientRect","div","clientY","top","height","clientX","left","width","round","reduce","acc","abs","set","mouseMoveCallback","stopPropagation","move","createMousemoveListener","stop","callback","call","_connectedInit","isNil","default","reset","sort","toSorted","a","b","__decorate","property","type","Number","prototype","Boolean","reflect","part","queryAll","state","godown","styles","css","cssGlobalVars","active","input","Range$1"],"mappings":"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"}
|