smoothly 1.0.0-alpha.76 → 1.0.0-alpha.78
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/cjs/{index-6ae370b4.js → index-43af753b.js} +1 -4
- package/dist/cjs/index-43af753b.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/smoothly-accordion_66.cjs.entry.js +31 -22
- package/dist/cjs/smoothly-accordion_66.cjs.entry.js.map +1 -1
- package/dist/cjs/smoothly-address-display.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-address.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-addresses.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-color.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-country.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-display-date-time.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-google-font.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-reorder.cjs.entry.js +4 -4
- package/dist/cjs/smoothly-reorder.cjs.entry.js.map +1 -1
- package/dist/cjs/smoothly-trigger-sink.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-trigger-source.cjs.entry.js +1 -1
- package/dist/cjs/smoothly.cjs.js +2 -2
- package/dist/collection/components/app/index.js +2 -8
- package/dist/collection/components/app/index.js.map +1 -1
- package/dist/collection/components/app/style.css +6 -6
- package/dist/collection/components/burger/index.js +33 -18
- package/dist/collection/components/burger/index.js.map +1 -1
- package/dist/collection/components/burger/style.css +2 -2
- package/dist/collection/components/display-demo/index.js +1 -1
- package/dist/collection/components/display-demo/index.js.map +1 -1
- package/dist/custom-elements/index.js +32 -23
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/{index-c196715a.js → index-258984d3.js} +2 -4
- package/dist/esm/index-258984d3.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/smoothly-accordion_66.entry.js +31 -22
- package/dist/esm/smoothly-accordion_66.entry.js.map +1 -1
- package/dist/esm/smoothly-address-display.entry.js +1 -1
- package/dist/esm/smoothly-address.entry.js +1 -1
- package/dist/esm/smoothly-addresses.entry.js +1 -1
- package/dist/esm/smoothly-color.entry.js +1 -1
- package/dist/esm/smoothly-country.entry.js +1 -1
- package/dist/esm/smoothly-display-date-time.entry.js +1 -1
- package/dist/esm/smoothly-google-font.entry.js +1 -1
- package/dist/esm/smoothly-radio-group.entry.js +1 -1
- package/dist/esm/smoothly-reorder.entry.js +2 -2
- package/dist/esm/smoothly-reorder.entry.js.map +1 -1
- package/dist/esm/smoothly-trigger-sink.entry.js +1 -1
- package/dist/esm/smoothly-trigger-source.entry.js +1 -1
- package/dist/esm/smoothly.js +3 -3
- package/dist/smoothly/{p-663ccbd0.entry.js → p-12182a73.entry.js} +2 -2
- package/dist/smoothly/{p-9992c8c4.entry.js → p-47151a53.entry.js} +2 -2
- package/dist/smoothly/{p-d0b8061e.js → p-5e387578.js} +3 -3
- package/dist/smoothly/p-5e387578.js.map +1 -0
- package/dist/smoothly/{p-1efa3261.entry.js → p-66e9a8b1.entry.js} +2 -2
- package/dist/smoothly/{p-8a45ae84.entry.js → p-69108043.entry.js} +2 -2
- package/dist/smoothly/{p-dbd1afa9.entry.js → p-6aebb818.entry.js} +2 -2
- package/dist/smoothly/p-6dea9679.entry.js +2 -0
- package/dist/smoothly/p-6dea9679.entry.js.map +1 -0
- package/dist/smoothly/{p-c4ffc15d.entry.js → p-70dede91.entry.js} +2 -2
- package/dist/smoothly/{p-4d743f07.entry.js → p-7bf147bf.entry.js} +2 -2
- package/dist/smoothly/{p-b82ef190.entry.js → p-863ff3c6.entry.js} +2 -2
- package/dist/smoothly/p-b3eac6af.entry.js +2 -0
- package/dist/smoothly/{p-4ff439dd.entry.js.map → p-b3eac6af.entry.js.map} +1 -1
- package/dist/smoothly/{p-f96e41aa.entry.js → p-cb493516.entry.js} +2 -2
- package/dist/smoothly/{p-ce4e6f44.entry.js → p-eef1c80b.entry.js} +2 -2
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/smoothly/smoothly.esm.js.map +1 -1
- package/dist/types/components/app/index.d.ts +1 -1
- package/dist/types/components/burger/index.d.ts +3 -2
- package/dist/types/components.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cjs/index-6ae370b4.js.map +0 -1
- package/dist/esm/index-c196715a.js.map +0 -1
- package/dist/smoothly/p-32d6942f.entry.js +0 -2
- package/dist/smoothly/p-32d6942f.entry.js.map +0 -1
- package/dist/smoothly/p-4ff439dd.entry.js +0 -2
- package/dist/smoothly/p-d0b8061e.js.map +0 -1
- /package/dist/smoothly/{p-663ccbd0.entry.js.map → p-12182a73.entry.js.map} +0 -0
- /package/dist/smoothly/{p-9992c8c4.entry.js.map → p-47151a53.entry.js.map} +0 -0
- /package/dist/smoothly/{p-1efa3261.entry.js.map → p-66e9a8b1.entry.js.map} +0 -0
- /package/dist/smoothly/{p-8a45ae84.entry.js.map → p-69108043.entry.js.map} +0 -0
- /package/dist/smoothly/{p-dbd1afa9.entry.js.map → p-6aebb818.entry.js.map} +0 -0
- /package/dist/smoothly/{p-c4ffc15d.entry.js.map → p-70dede91.entry.js.map} +0 -0
- /package/dist/smoothly/{p-4d743f07.entry.js.map → p-7bf147bf.entry.js.map} +0 -0
- /package/dist/smoothly/{p-b82ef190.entry.js.map → p-863ff3c6.entry.js.map} +0 -0
- /package/dist/smoothly/{p-f96e41aa.entry.js.map → p-cb493516.entry.js.map} +0 -0
- /package/dist/smoothly/{p-ce4e6f44.entry.js.map → p-eef1c80b.entry.js.map} +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-43af753b.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = "[color=default].sc-smoothly-color{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-color{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-color{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-color{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-color{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-color{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-color{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-color{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-color{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-color{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-43af753b.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-43af753b.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = "smoothly-radio-group{display:flex;position:relative;color:none !important;background:none !important;margin:0.5em 0}smoothly-radio-group[hidden]{display:none}smoothly-radio-group[orientation=vertical] *:not(:first-of-type)>input[type=radio]~label{border-top:none}smoothly-radio-group:not([orientation=vertical]) *:not(:first-of-type)>input[type=radio]~label{border-left:none}smoothly-radio-group[orientation=vertical]{flex-direction:column}smoothly-radio-group[orientation=vertical] :first-of-type>input[type=radio]~label{border-radius:4px 4px 0 0}smoothly-radio-group[orientation=vertical] :last-of-type>input[type=radio]~label{border-radius:0 0 4px 4px}smoothly-radio-group:not([orientation=vertical]){flex-direction:row}smoothly-radio-group:not([orientation=vertical]) :first-of-type>input[type=radio]~label{border-radius:4px 0 0 4px}smoothly-radio-group:not([orientation=vertical]) :last-of-type>input[type=radio]~label{border-radius:0 4px 4px 0}";
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-43af753b.js');
|
|
6
6
|
|
|
7
7
|
const styleCss = "smoothly-reorder>*{cursor:move;transition:transform 0.3s}smoothly-reorder>*.dragging{transition:none;box-shadow:0 0 10px rgba(var(--smoothly-dark-color));z-index:1;user-select:none}";
|
|
8
8
|
|
|
@@ -16,9 +16,9 @@ const SmoothlyReorder = class {
|
|
|
16
16
|
if (this.childrenCache)
|
|
17
17
|
result = this.childrenCache;
|
|
18
18
|
else {
|
|
19
|
-
for (let index
|
|
20
|
-
const element = this.element.children[index
|
|
21
|
-
if (element instanceof
|
|
19
|
+
for (let index = 0; index < this.element.children.length; index++) {
|
|
20
|
+
const element = this.element.children[index];
|
|
21
|
+
if (element instanceof HTMLElement) {
|
|
22
22
|
const bounds = element.getBoundingClientRect();
|
|
23
23
|
result.push({
|
|
24
24
|
top: bounds.top,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"smoothly-reorder.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,uLAAuL;;MCM3L,eAAe;;;;;EAK3B,IAAY,QAAQ;IACnB,IAAI,MAAM,GAAgB,EAAE,CAAA;IAC5B,IAAI,IAAI,CAAC,aAAa;MACrB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAA;SACvB;MACJ,KAAK,
|
|
1
|
+
{"file":"smoothly-reorder.entry.cjs.js","mappings":"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","names":[],"sources":["./src/components/reorder/style.css?tag=smoothly-reorder","./src/components/reorder/index.tsx"],"sourcesContent":["smoothly-reorder > * {\n\tcursor: move;\n\ttransition: transform 0.3s;\n}\nsmoothly-reorder > *.dragging {\n\ttransition: none;\n\tbox-shadow: 0 0 10px rgba(var(--smoothly-dark-color));\n\tz-index: 1;\n\tuser-select: none;\n}\n","import { Component, Element, Event, EventEmitter } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-reorder\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyReorder {\n\t@Event() reorder: EventEmitter<[number, number]>\n\t@Element() element: HTMLSmoothlyReorderElement\n\tprivate bounds?: DOMRect\n\tprivate childrenCache?: Draggable[]\n\tprivate get children(): Draggable[] {\n\t\tlet result: Draggable[] = []\n\t\tif (this.childrenCache)\n\t\t\tresult = this.childrenCache\n\t\telse {\n\t\t\tfor (let index = 0; index < this.element.children.length; index++) {\n\t\t\t\tconst element = this.element.children[index]\n\t\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\t\tconst bounds = element.getBoundingClientRect()\n\t\t\t\t\tresult.push({\n\t\t\t\t\t\ttop: bounds.top,\n\t\t\t\t\t\tmiddle: bounds.top + bounds.height / 2,\n\t\t\t\t\t\tbottom: bounds.bottom,\n\t\t\t\t\t\telement: element,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.childrenCache = result\n\t\t}\n\t\treturn result\n\t}\n\tprivate dragged?: Dragged\n\tprivate move?: { from: number; to: number }\n\n\tprivate onMouseDown(event: MouseEvent) {\n\t\tif (!this.move && this.element.children.length > 1) {\n\t\t\tthis.bounds = this.element.getBoundingClientRect()\n\t\t\tthis.childrenCache = undefined\n\t\t\tconst index = this.getCurrentIndex(event.clientY)\n\t\t\tthis.dragged = {\n\t\t\t\t...this.children[index],\n\t\t\t\tstartY: event.clientY,\n\t\t\t\toffsetY: event.clientY - this.children[index].middle,\n\t\t\t\tindex,\n\t\t\t\theight:\n\t\t\t\t\tindex < this.children.length - 1\n\t\t\t\t\t\t? this.children[index + 1].top - this.children[index].top\n\t\t\t\t\t\t: this.children[index].bottom - this.children[index - 1].bottom,\n\t\t\t}\n\t\t\tthis.dragged.element.className += \" dragging\"\n\t\t}\n\t}\n\n\tprivate onMouseMove(event: MouseEvent) {\n\t\tif (this.dragged && this.bounds && event.clientY >= this.bounds.top && event.clientY <= this.bounds.bottom) {\n\t\t\tconst currentIndex = this.getCurrentIndex(event.clientY - this.dragged.offsetY)\n\t\t\tthis.translate(this.dragged.index, currentIndex, event.clientY - this.dragged.startY)\n\t\t}\n\t}\n\n\tprivate onMouseUp(event: MouseEvent) {\n\t\tif (this.dragged) {\n\t\t\tthis.dragged.element.className = this.dragged.element.className.replace(\" dragging\", \"\")\n\t\t\tconst index = this.getCurrentIndex(event.clientY - this.dragged.offsetY)\n\t\t\tthis.translate(this.dragged.index, index, this.children[index].top - this.dragged.top)\n\t\t\tthis.move = { from: this.dragged.index, to: index }\n\t\t\tthis.dragged = undefined\n\n\t\t\twindow.setTimeout(() => {\n\t\t\t\tif (this.move) {\n\t\t\t\t\tconst children = [...this.children.map(c => c.element)]\n\t\t\t\t\tconst e = children.splice(this.move.from, 1)\n\t\t\t\t\tchildren.splice(this.move.to, 0, ...e)\n\t\t\t\t\tchildren.forEach(child => this.element.removeChild(child))\n\t\t\t\t\tchildren.forEach(child => {\n\t\t\t\t\t\tchild.style.transform = \"\"\n\t\t\t\t\t\tthis.element.appendChild(child)\n\t\t\t\t\t})\n\t\t\t\t\tthis.reorder.emit([this.move.from, this.move.to])\n\t\t\t\t\tthis.move = undefined\n\t\t\t\t}\n\t\t\t}, 500)\n\t\t}\n\t}\n\n\tprivate translate(fromIndex: number, toIndex: number, y: number) {\n\t\tfor (let index = 0; index < this.children.length; index++) {\n\t\t\tlet value: number\n\t\t\tif (this.dragged) {\n\t\t\t\tif (fromIndex < toIndex && index > fromIndex && index <= toIndex)\n\t\t\t\t\tvalue = -this.dragged.height\n\t\t\t\telse if (fromIndex > toIndex && index < fromIndex && index >= toIndex)\n\t\t\t\t\tvalue = this.dragged.height\n\t\t\t\telse\n\t\t\t\t\tvalue = index == fromIndex ? y : 0\n\n\t\t\t\tthis.children[index].element.style.transform = `translateY(${value}px)`\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate getCurrentIndex(y: number): number {\n\t\treturn this.children.findIndex(c => y < c.bottom)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.element.childNodes.forEach(child => {\n\t\t\tchild.addEventListener(\"mousedown\", (e: MouseEvent) => this.onMouseDown(e))\n\t\t\tchild.addEventListener(\"mousemove\", (e: MouseEvent) => this.onMouseMove(e))\n\t\t\tchild.addEventListener(\"mouseup\", (e: MouseEvent) => this.onMouseUp(e))\n\t\t})\n\t}\n}\n"],"version":3}
|
package/dist/cjs/smoothly.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-43af753b.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["smoothly-accordion_66.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[2,"smoothly-table-demo"],[0,"smoothly-display-demo"],[4,"smoothly-app",{"label":[1],"color":[1],"menuOpen":[1540,"menu-open"],"selected":[32]},[[
|
|
20
|
+
return index.bootstrapLazy([["smoothly-accordion_66.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[2,"smoothly-table-demo"],[0,"smoothly-display-demo"],[4,"smoothly-app",{"label":[1],"color":[1],"menuOpen":[1540,"menu-open"],"selected":[32]},[[8,"popstate","locationChangeHandler"],[0,"smoothlyRoomSelected","roomSelectedHandler"],[0,"smoothlyRoomLoaded","roomLoadedHandler"]]],[0,"smoothly-button-demo"],[0,"smoothly-dialog-demo"],[2,"smoothly-select-demo"],[6,"smoothly-app-room",{"label":[1],"icon":[1],"path":[1],"to":[1],"selected":[1540],"getContent":[64]}],[2,"smoothly-icon-demo"],[2,"smoothly-picker-demo",{"data":[32],"change":[32]},[[0,"smoothlyFormSubmit","submitHandler"]]],[2,"smoothly-table-demo-filtered",{"criteria":[32],"data":[32],"selector":[32]},[[0,"filters","onFilterUpdate"],[2,"smoothlyChecked","smoothlyCheckedHandler"]]],[2,"smoothly-table-testing",{"counter":[32]}],[6,"smoothly-input-date",{"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028],"clear":[64]},[[0,"dateSet","dateSetHandler"]]],[2,"smoothly-input-date-range",{"name":[513],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"],"labelStart":[1,"label-start"],"labelEnd":[1,"label-end"],"clear":[64]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-burger",{"visible":[1540],"open":[1540],"mediaQuery":[513,"media-query"],"history":[32]},[[9,"resize","resizeHandler"]]],[6,"smoothly-checkbox",{"size":[1],"checked":[1540],"intermediate":[1540],"name":[1],"value":[8],"disabled":[516],"t":[32],"toggle":[64]}],[6,"smoothly-input-file",{"accept":[1],"camera":[513],"name":[513],"showLabel":[516,"show-label"],"value":[1040],"placeholder":[1537],"dragging":[32],"clear":[64]}],[6,"smoothly-radio-button-item",{"value":[8],"selected":[1540],"color":[513]}],[6,"smoothly-summary",{"open":[1540],"color":[1],"fill":[1],"size":[1]}],[1,"smoothly-toggle-switch",{"selected":[1540],"disabled":[516],"size":[513],"name":[1],"value":[8]}],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025],"removeItem":[64]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemWillLoad","onAccordionItemDidLoad"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1],"toInteger":[4,"to-integer"]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tab":[2]}],[6,"smoothly-radio-button",{"name":[1],"value":[1032],"deselectable":[516],"decoration":[513]},[[2,"radioItemSelectInternal","radioSelectHandler"]]],[2,"smoothly-skeleton",{"widths":[16],"width":[1025],"color":[1],"period":[2],"distance":[1],"align":[513]}],[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}],[6,"smoothly-toggle",{"selected":[1540],"shape":[513],"disabled":[516],"name":[1],"value":[8]},[[0,"click","onClick"]]],[1,"smoothly-filter",{"placeholder":[1025],"criteria":[1040],"inputValue":[1032,"input-value"],"expanded":[32],"freeSearchValue":[32],"clear":[64]},[[0,"filter","filterHandler"]]],[6,"smoothly-picker",{"name":[513],"open":[1540],"mutable":[516],"multiple":[516],"readonly":[516],"validator":[16],"selected":[32],"display":[32],"clear":[64]},[[0,"smoothlyPickerMenuLoaded","menuLoadedHandler"],[0,"smoothlyPickerOptionLoaded","optionLoadedHandler"],[0,"smoothlyPickerOptionChange","optionChangeHandler"]]],[1,"smoothly-filter-input",{"name":[513],"value":[1025],"type":[513],"required":[1540],"minLength":[2,"min-length"],"showLabel":[516,"show-label"],"maxLength":[2,"max-length"],"autocomplete":[4],"pattern":[16],"placeholder":[1],"disabled":[4],"readonly":[516],"currency":[513],"comparison":[1],"criteria":[32],"clear":[64]}],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[6,"smoothly-input-clear",{"color":[513],"expand":[513],"fill":[513],"disabled":[1540],"size":[513],"shape":[513],"display":[1540],"type":[513]},[[0,"click","clickHandler"]]],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"smoothlyTableLoad","handleTableLoaded"]]],[0,"smoothly-tuple",{"tuple":[16]}],[6,"smoothly-picker-menu",{"multiple":[516],"mutable":[516],"readonly":[516],"validator":[16],"backend":[32],"options":[32],"created":[32],"search":[32],"valid":[32],"display":[32]},[[0,"smoothlyPickerOptionLoad","optionLoadHandler"],[0,"smoothlyPickerOptionLoaded","optionLoadedHandler"],[0,"smoothlyPickerOptionChange","optionChangeHandler"],[0,"smoothlySlotEmpty","emptyDisplayHandler"]]],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-table-cell"],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"click","onClick"],[0,"smoothlyTableLoad","handleTableLoaded"]]],[6,"smoothly-table",{"root":[1540],"align":[513],"open":[1540]},[[0,"smoothlyExpandableLoad","handleExpandableLoaded"],[0,"smoothlyExpandableChange","handleExpandableState"],[0,"smoothlySpotlightChange","handleSpotlightState"],[0,"smoothlyNestedTable","handleNestedTable"],[0,"smoothlyExpansionLoad","handleEvents"],[0,"smoothlyExpansionOpen","handleEvents"]]],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",{"open":[1540]},[[0,"smoothlyExpansionLoad","onExpansionLoad"],[0,"smoothlyExpandableChange","onExpansionChange"],[0,"smoothlyExpansionOpen","onExpansionOpen"]]],[2,"smoothly-input-month",{"value":[1025]}],[1,"smoothly-picker-option",{"selected":[1540],"visible":[1540],"value":[1032],"search":[1040],"readonly":[32],"slotted":[32],"clickHandler":[64]}],[6,"smoothly-slot-elements",{"clone":[4],"nodes":[1040]}],[6,"smoothly-submit",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"size":[513],"shape":[513],"prevent":[4]},[[0,"click","clickHandler"]]],[6,"smoothly-input-select",{"initialPrompt":[1,"initial-prompt"],"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32],"reset":[64]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"marked":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-slotted-elements",{"clone":[4]}],[4,"smoothly-form",{"value":[1040],"looks":[513],"name":[1],"method":[1],"action":[1],"processing":[1540],"prevent":[4],"changed":[1540],"notice":[32],"submit":[64],"clear":[64]},[[0,"smoothlyInput","smoothlyInputHandler"],[0,"smoothlySubmit","smoothlySubmitHandler"],[0,"smoothlyInputLoad","SmoothlyInputLoadHandler"]]],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"size":[513],"shape":[513],"link":[1],"download":[4]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[2,"smoothly-notification",{"notice":[16],"closable":[4],"icon":[4],"tick":[32]},[[0,"trigger","onTrigger"]]],[6,"smoothly-trigger",{"color":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1537],"disabled":[1028],"readonly":[1540],"currency":[513],"changed":[1540],"initialValue":[32],"clear":[64],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]},[[0,"smoothlyInputLoad","SmoothlyInputLoadHandler"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[513],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-addresses.cjs",[[2,"smoothly-addresses",{"value":[16],"editable":[16]}]]],["smoothly-color.cjs",[[6,"smoothly-color",{"color":[513]}]]],["smoothly-country.cjs",[[2,"smoothly-country",{"value":[1],"text":[1],"language":[32]}]]],["smoothly-display-date-time.cjs",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-address-display.cjs",[[2,"smoothly-address-display",{"value":[16],"editable":[4]}]]],["smoothly-address.cjs",[[2,"smoothly-address",{"value":[16],"editable":[4]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -25,7 +25,7 @@ export class SmoothlyApp {
|
|
|
25
25
|
}
|
|
26
26
|
burgerStatusHandler(event) {
|
|
27
27
|
event.stopPropagation();
|
|
28
|
-
this.menuOpen = event.detail
|
|
28
|
+
this.menuOpen = event.detail;
|
|
29
29
|
}
|
|
30
30
|
async locationChangeHandler(event) {
|
|
31
31
|
var _a;
|
|
@@ -44,7 +44,7 @@ export class SmoothlyApp {
|
|
|
44
44
|
this.rooms[event.target.path.toString()] = { element: event.target };
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h("smoothly-notifier", null, h("header", { color: this.color }, h("h1", null, h("a", { href: "" }, this.label)), h("slot", { name: "header" }), h("nav", { class: this.menuOpen
|
|
47
|
+
return (h("smoothly-notifier", null, h("header", { color: this.color }, h("h1", null, h("a", { href: "" }, this.label)), h("slot", { name: "header" }), h("nav", { class: { menuOpen: this.menuOpen } }, h("ul", null, h("slot", { name: "nav-start" }), h("slot", null, " "), h("slot", { name: "nav-end" }))), h("smoothly-burger", { onNavStatus: e => this.burgerStatusHandler(e) })), h("main", { ref: e => (this.mainElement = e) })));
|
|
48
48
|
}
|
|
49
49
|
static get is() { return "smoothly-app"; }
|
|
50
50
|
static get originalStyleUrls() {
|
|
@@ -132,12 +132,6 @@ export class SmoothlyApp {
|
|
|
132
132
|
}
|
|
133
133
|
static get listeners() {
|
|
134
134
|
return [{
|
|
135
|
-
"name": "burgerStatus",
|
|
136
|
-
"method": "burgerStatusHandler",
|
|
137
|
-
"target": undefined,
|
|
138
|
-
"capture": false,
|
|
139
|
-
"passive": false
|
|
140
|
-
}, {
|
|
141
135
|
"name": "popstate",
|
|
142
136
|
"method": "locationChangeHandler",
|
|
143
137
|
"target": "window",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAaxE,MAAM,OAAO,WAAW;;IAMvB,UAAK,GAAyB,EAAE,CAAA;iBALhB,KAAK;;oBAE8B,KAAK;;;EAMxD,KAAK,CAAC,eAAe,CAAC,KAAuB,EAAE,QAA0B;;IACxE,IAAI,QAAQ,EAAE;MACb,QAAQ,CAAC,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAA;KACjC;IACD,IAAI,KAAK,EAAE;MACV,KAAK,CAAC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAA;MAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;MAC1C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;MAExB,OAAO,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,MAAA,KAAK,CAAC,OAAO,CAAC,KAAK,mCAAI,EAAE,EAAE,IAAI,CAAC,CAAA;MAE1E,IAAI,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,EAAE,CAAA;QAC/B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAA;OAC9D;KACD;EACF,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen, Prop, State, Watch } from \"@stencil/core\"\nimport { SmoothlyAppRoomCustomEvent } from \"../../components\"\nimport { Color } from \"../../model\"\n\ntype Room = {\n\telement: HTMLSmoothlyAppRoomElement\n}\n\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop() label = \"App\"\n\t@Prop() color: Color\n\t@Prop({ mutable: true, reflect: true }) menuOpen = false\n\t@State() selected?: Room\n\tmainElement?: HTMLElement\n\trooms: Record<string, Room> = {}\n\n\t@Watch(\"selected\")\n\tasync selectedChanged(value: Room | undefined, previous: Room | undefined) {\n\t\tif (previous) {\n\t\t\tprevious.element.selected = false\n\t\t}\n\t\tif (value) {\n\t\t\tvalue.element.selected = true\n\t\t\tconst path = value.element.path.toString()\n\t\t\tthis.rooms[path] = value\n\n\t\t\thistory.pushState({ smoothlyPath: path }, value.element.label ?? \"\", path)\n\n\t\t\tif (this.mainElement) {\n\t\t\t\tthis.mainElement.innerHTML = \"\"\n\t\t\t\tthis.mainElement.appendChild(await value.element.getContent())\n\t\t\t}\n\t\t}\n\t}\n\tburgerStatusHandler(event: CustomEvent<boolean>) {\n\t\tevent.stopPropagation()\n\t\tthis.menuOpen = event.detail\n\t}\n\t@Listen(\"popstate\", { target: \"window\" })\n\tasync locationChangeHandler(event: PopStateEvent) {\n\t\tif (typeof event.state.smoothlyPath != \"string\" && event.state.smoothlyPath !== this.selected?.element.path) {\n\t\t\tthis.selected = this.rooms[event.state.smoothlyPath]\n\t\t}\n\t\tif (this.mainElement) {\n\t\t\tthis.mainElement.innerHTML = \"\"\n\t\t\tthis.mainElement.appendChild(await this.rooms[event.state.smoothlyPath].element.getContent())\n\t\t}\n\t}\n\t@Listen(\"smoothlyRoomSelected\")\n\troomSelectedHandler(event: SmoothlyAppRoomCustomEvent<HTMLSmoothlyAppRoomElement>) {\n\t\tthis.selected = { element: event.target }\n\t}\n\t@Listen(\"smoothlyRoomLoaded\")\n\troomLoadedHandler(event: SmoothlyAppRoomCustomEvent<HTMLSmoothlyAppRoomElement>) {\n\t\tthis.rooms[event.target.path.toString()] = { element: event.target }\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-notifier>\n\t\t\t\t<header color={this.color}>\n\t\t\t\t\t<h1>\n\t\t\t\t\t\t<a href={\"\"}>{this.label}</a>\n\t\t\t\t\t</h1>\n\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t<nav class={{ menuOpen: this.menuOpen }}>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<slot name=\"nav-start\"></slot>\n\t\t\t\t\t\t\t<slot> </slot>\n\t\t\t\t\t\t\t<slot name=\"nav-end\"></slot>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t\t<smoothly-burger onNavStatus={e => this.burgerStatusHandler(e)} />\n\t\t\t\t</header>\n\t\t\t\t<main ref={e => (this.mainElement = e)}></main>\n\t\t\t</smoothly-notifier>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -5,10 +5,10 @@ smoothly-app {
|
|
|
5
5
|
smoothly-app[hidden] {
|
|
6
6
|
display: none;
|
|
7
7
|
}
|
|
8
|
-
smoothly-app > smoothly-notifier{
|
|
8
|
+
smoothly-app > smoothly-notifier {
|
|
9
9
|
background: none;
|
|
10
10
|
}
|
|
11
|
-
smoothly-app > smoothly-notifier > header{
|
|
11
|
+
smoothly-app > smoothly-notifier > header {
|
|
12
12
|
background: rgba(var(--smoothly-color));
|
|
13
13
|
color: rgba(var(--smoothly-color-contrast));
|
|
14
14
|
}
|
|
@@ -59,7 +59,7 @@ smoothly-app > smoothly-notifier > header > nav > ul li a {
|
|
|
59
59
|
smoothly-app > smoothly-notifier > header > nav > ul {
|
|
60
60
|
width: 100%;
|
|
61
61
|
}
|
|
62
|
-
smoothly-app > smoothly-notifier > header > nav > ul > [slot=nav-start]{
|
|
62
|
+
smoothly-app > smoothly-notifier > header > nav > ul > [slot=nav-start] {
|
|
63
63
|
height: fit-content;
|
|
64
64
|
padding: 0.5em 0em;
|
|
65
65
|
margin-top: 1em;
|
|
@@ -98,12 +98,12 @@ smoothly-app > smoothly-notifier > main {
|
|
|
98
98
|
background-color: rgba(var(--smoothly-color));
|
|
99
99
|
width: 100%;
|
|
100
100
|
}
|
|
101
|
-
smoothly-app > smoothly-notifier > header > nav > ul smoothly-burger{
|
|
101
|
+
smoothly-app > smoothly-notifier > header > nav > ul smoothly-burger {
|
|
102
102
|
position: absolute;
|
|
103
103
|
top: 0;
|
|
104
104
|
right: 0;
|
|
105
105
|
}
|
|
106
|
-
smoothly-app > smoothly-notifier > header > nav > ul > [slot=nav-start]{
|
|
106
|
+
smoothly-app > smoothly-notifier > header > nav > ul > [slot=nav-start] {
|
|
107
107
|
display:none;
|
|
108
108
|
}
|
|
109
109
|
smoothly-app > smoothly-notifier > header > nav > ul > [slot=nav-end] {
|
|
@@ -113,6 +113,6 @@ smoothly-app > smoothly-notifier > main {
|
|
|
113
113
|
background-color: rgba(var(--smoothly-color));
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
|
-
|
|
116
|
+
nav:not(.menuOpen) {
|
|
117
117
|
display: none;
|
|
118
118
|
}
|
|
@@ -2,29 +2,38 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
export class SmoothlyBurger {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.visible = undefined;
|
|
5
|
-
this.open =
|
|
5
|
+
this.open = false;
|
|
6
6
|
this.mediaQuery = "(max-width: 900px)";
|
|
7
|
+
this.history = undefined;
|
|
7
8
|
}
|
|
8
9
|
componentWillLoad() {
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
this.history = window.matchMedia(this.mediaQuery).matches;
|
|
11
|
+
if (!window.matchMedia(this.mediaQuery).matches)
|
|
12
|
+
this.visible = false;
|
|
13
|
+
else
|
|
14
|
+
this.visible = true;
|
|
15
|
+
this.navStatus.emit(!this.visible);
|
|
11
16
|
}
|
|
12
|
-
|
|
13
|
-
this.
|
|
17
|
+
openChanged() {
|
|
18
|
+
this.navStatus.emit(this.open);
|
|
14
19
|
}
|
|
15
20
|
resizeHandler() {
|
|
16
|
-
const
|
|
17
|
-
if (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
const result = window.matchMedia(this.mediaQuery).matches;
|
|
22
|
+
if (result != this.history) {
|
|
23
|
+
if (result) {
|
|
24
|
+
this.visible = true;
|
|
25
|
+
this.open = false;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
this.visible = false;
|
|
29
|
+
this.open = false;
|
|
30
|
+
}
|
|
31
|
+
this.navStatus.emit(!this.visible);
|
|
24
32
|
}
|
|
33
|
+
this.history = result;
|
|
25
34
|
}
|
|
26
35
|
render() {
|
|
27
|
-
return (h(Host, null, h("span", { class: "burger", onClick: () => (this.open = !this.open) }, h("smoothly-icon", { name: "menu" }
|
|
36
|
+
return (h(Host, null, h("span", { class: "burger", onClick: () => (this.open = !this.open) }, h("smoothly-icon", { name: "menu" }))));
|
|
28
37
|
}
|
|
29
38
|
static get is() { return "smoothly-burger"; }
|
|
30
39
|
static get encapsulation() { return "scoped"; }
|
|
@@ -72,7 +81,8 @@ export class SmoothlyBurger {
|
|
|
72
81
|
"text": ""
|
|
73
82
|
},
|
|
74
83
|
"attribute": "open",
|
|
75
|
-
"reflect": true
|
|
84
|
+
"reflect": true,
|
|
85
|
+
"defaultValue": "false"
|
|
76
86
|
},
|
|
77
87
|
"mediaQuery": {
|
|
78
88
|
"type": "string",
|
|
@@ -94,10 +104,15 @@ export class SmoothlyBurger {
|
|
|
94
104
|
}
|
|
95
105
|
};
|
|
96
106
|
}
|
|
107
|
+
static get states() {
|
|
108
|
+
return {
|
|
109
|
+
"history": {}
|
|
110
|
+
};
|
|
111
|
+
}
|
|
97
112
|
static get events() {
|
|
98
113
|
return [{
|
|
99
|
-
"method": "
|
|
100
|
-
"name": "
|
|
114
|
+
"method": "navStatus",
|
|
115
|
+
"name": "navStatus",
|
|
101
116
|
"bubbles": true,
|
|
102
117
|
"cancelable": true,
|
|
103
118
|
"composed": true,
|
|
@@ -115,7 +130,7 @@ export class SmoothlyBurger {
|
|
|
115
130
|
static get watchers() {
|
|
116
131
|
return [{
|
|
117
132
|
"propName": "open",
|
|
118
|
-
"methodName": "
|
|
133
|
+
"methodName": "openChanged"
|
|
119
134
|
}];
|
|
120
135
|
}
|
|
121
136
|
static get listeners() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/burger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/burger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOnG,MAAM,OAAO,cAAc;;;gBAEqB,KAAK;sBACd,oBAAoB;;;EAI1D,iBAAiB;IAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IACzD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;MAC9C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;;MAEpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAGD,WAAW;IACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC/B,CAAC;EAGD,aAAa;IACZ,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IACzD,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;MAC3B,IAAI,MAAM,EAAE;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;OACjB;WAAM;QACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;OACjB;MACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAClC;IACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,YAAM,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3D,qBAAe,IAAI,EAAC,MAAM,GAAG,CACvB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-burger\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyBurger {\n\t@Prop({ mutable: true, reflect: true }) visible: boolean\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) mediaQuery = \"(max-width: 900px)\"\n\t@State() history: boolean\n\t@Event() navStatus: EventEmitter<boolean>\n\n\tcomponentWillLoad() {\n\t\tthis.history = window.matchMedia(this.mediaQuery).matches\n\t\tif (!window.matchMedia(this.mediaQuery).matches)\n\t\t\tthis.visible = false\n\t\telse\n\t\t\tthis.visible = true\n\t\tthis.navStatus.emit(!this.visible)\n\t}\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.navStatus.emit(this.open)\n\t}\n\n\t@Listen(\"resize\", { target: \"window\" })\n\tresizeHandler() {\n\t\tconst result = window.matchMedia(this.mediaQuery).matches\n\t\tif (result != this.history) {\n\t\t\tif (result) {\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.open = false\n\t\t\t} else {\n\t\t\t\tthis.visible = false\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t\tthis.navStatus.emit(!this.visible)\n\t\t}\n\t\tthis.history = result\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span class=\"burger\" onClick={() => (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-icon name=\"menu\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -12,11 +12,11 @@ height: 100%;
|
|
|
12
12
|
:host:not([visible]){
|
|
13
13
|
display: none;
|
|
14
14
|
}
|
|
15
|
-
:host([open]) smoothly-icon{
|
|
15
|
+
:host:not([open]) smoothly-icon{
|
|
16
16
|
transform: rotate(0deg);
|
|
17
17
|
transition: transform 100ms ease-in-out;
|
|
18
18
|
}
|
|
19
|
-
:host
|
|
19
|
+
:host([open]) smoothly-icon{
|
|
20
20
|
transform: rotate(-90deg);
|
|
21
21
|
transition: transform 100ms ease-in-out;
|
|
22
22
|
}
|
|
@@ -7,7 +7,7 @@ export class SmoothlyDisplayDemo {
|
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
9
|
return [
|
|
10
|
-
h("main", null, h("fieldset", null, h("h2", null, "Smoothly display"), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Europe/Stockholm" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Deprecated display date time"), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-")))), h("fieldset", null, h("h2", null, "Smoothly skeleton"), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), h("fieldset", null, h("h2", null, "Smoothly URL encoded"), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), h("fieldset", null, h("h2", null, "Smoothly popup"), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup"))), h("fieldset", null, h("h2", null, "Test of different kinds of notifier"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", null, h("h2", null, "Smoothly spinner"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), h("fieldset", null, h("h2", null, "Smoothly summary"), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "danger", fill: "clear" }, h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", null, "Person"), h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { slot: "content" }, "Some person information.")), h("smoothly-summary", { color: "danger", fill: "clear", open: true
|
|
10
|
+
h("main", null, h("fieldset", null, h("h2", null, "Smoothly display"), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Europe/Stockholm" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Deprecated display date time"), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-")))), h("fieldset", null, h("h2", null, "Smoothly skeleton"), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), h("fieldset", null, h("h2", null, "Smoothly URL encoded"), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), h("fieldset", null, h("h2", null, "Smoothly popup"), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup"))), h("fieldset", null, h("h2", null, "Test of different kinds of notifier"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", null, h("h2", null, "Smoothly spinner"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), h("fieldset", null, h("h2", null, "Smoothly summary"), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "danger", fill: "clear" }, h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", null, "Person"), h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { slot: "content" }, "Some person information.")), h("smoothly-summary", { color: "danger", fill: "clear", open: true }, h("p", { slot: "summary" }, "Some other title"), h("p", { slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")))),
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "smoothly-display-demo"; }
|