smoothly 1.2.1-alpha.35 → 1.2.1-alpha.36
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/smoothly-app_107.cjs.entry.js +3 -3
- package/dist/cjs/smoothly-app_107.cjs.entry.js.map +1 -1
- package/dist/collection/components/button/Button.js +1 -1
- package/dist/collection/components/button/Button.js.map +1 -1
- package/dist/collection/components/toggle/index.js +1 -1
- package/dist/collection/components/toggle/index.js.map +1 -1
- package/dist/collection/components/toggle-switch/index.js +1 -1
- package/dist/collection/components/toggle-switch/index.js.map +1 -1
- package/dist/components/{p-41a512ff.js → p-0960a2bb.js} +3 -3
- package/dist/components/{p-41a512ff.js.map → p-0960a2bb.js.map} +1 -1
- package/dist/components/{p-3cd7697d.js → p-09934532.js} +2 -2
- package/dist/components/{p-3cd7697d.js.map → p-09934532.js.map} +1 -1
- package/dist/components/{p-32e1ce99.js → p-214c06fa.js} +4 -4
- package/dist/components/{p-32e1ce99.js.map → p-214c06fa.js.map} +1 -1
- package/dist/components/{p-f79897b4.js → p-2738b430.js} +2 -2
- package/dist/components/{p-f79897b4.js.map → p-2738b430.js.map} +1 -1
- package/dist/components/{p-517dfb9c.js → p-29f6edb8.js} +3 -3
- package/dist/components/{p-517dfb9c.js.map → p-29f6edb8.js.map} +1 -1
- package/dist/components/{p-6e2f3b1e.js → p-2b111073.js} +2 -2
- package/dist/components/{p-6e2f3b1e.js.map → p-2b111073.js.map} +1 -1
- package/dist/components/{p-5afc1cdb.js → p-2c7d79f3.js} +6 -6
- package/dist/components/{p-5afc1cdb.js.map → p-2c7d79f3.js.map} +1 -1
- package/dist/components/{p-be6d380e.js → p-306f9cb3.js} +2 -2
- package/dist/components/{p-be6d380e.js.map → p-306f9cb3.js.map} +1 -1
- package/dist/components/{p-3a315e0d.js → p-3dad2f38.js} +10 -10
- package/dist/components/{p-3a315e0d.js.map → p-3dad2f38.js.map} +1 -1
- package/dist/components/{p-662c812d.js → p-41d6da47.js} +2 -2
- package/dist/components/p-41d6da47.js.map +1 -0
- package/dist/components/{p-c227ce6a.js → p-43b737be.js} +2 -2
- package/dist/components/{p-c227ce6a.js.map → p-43b737be.js.map} +1 -1
- package/dist/components/{p-be80faf1.js → p-44a51525.js} +20 -20
- package/dist/components/{p-be80faf1.js.map → p-44a51525.js.map} +1 -1
- package/dist/components/{p-47a1a01b.js → p-45ff39e4.js} +2 -2
- package/dist/components/p-45ff39e4.js.map +1 -0
- package/dist/components/{p-116f927a.js → p-498755ab.js} +2 -2
- package/dist/components/{p-116f927a.js.map → p-498755ab.js.map} +1 -1
- package/dist/components/{p-afd795e9.js → p-4d026008.js} +6 -6
- package/dist/components/{p-afd795e9.js.map → p-4d026008.js.map} +1 -1
- package/dist/components/{p-0dfa98b7.js → p-62b70c3f.js} +2 -2
- package/dist/components/{p-0dfa98b7.js.map → p-62b70c3f.js.map} +1 -1
- package/dist/components/{p-94f31f21.js → p-631148b4.js} +3 -3
- package/dist/components/{p-94f31f21.js.map → p-631148b4.js.map} +1 -1
- package/dist/components/{p-10a6e3b4.js → p-686ec006.js} +2 -2
- package/dist/components/{p-10a6e3b4.js.map → p-686ec006.js.map} +1 -1
- package/dist/components/{p-52e7f174.js → p-702f01d3.js} +5 -5
- package/dist/components/{p-52e7f174.js.map → p-702f01d3.js.map} +1 -1
- package/dist/components/{p-7f4ad104.js → p-7514961a.js} +2 -2
- package/dist/components/{p-7f4ad104.js.map → p-7514961a.js.map} +1 -1
- package/dist/components/{p-41f34075.js → p-8ea7eab2.js} +2 -2
- package/dist/components/{p-41f34075.js.map → p-8ea7eab2.js.map} +1 -1
- package/dist/components/{p-2b9f42a3.js → p-93e899e7.js} +5 -5
- package/dist/components/{p-2b9f42a3.js.map → p-93e899e7.js.map} +1 -1
- package/dist/components/{p-f9fe97a3.js → p-95404634.js} +6 -6
- package/dist/components/{p-f9fe97a3.js.map → p-95404634.js.map} +1 -1
- package/dist/components/{p-e7f4bf69.js → p-980ec6be.js} +2 -2
- package/dist/components/{p-e7f4bf69.js.map → p-980ec6be.js.map} +1 -1
- package/dist/components/{p-d3fafc96.js → p-99eb5153.js} +2 -2
- package/dist/components/{p-d3fafc96.js.map → p-99eb5153.js.map} +1 -1
- package/dist/components/{p-d3fe1762.js → p-a509a3b5.js} +4 -4
- package/dist/components/{p-d3fe1762.js.map → p-a509a3b5.js.map} +1 -1
- package/dist/components/{p-39cad705.js → p-acb7d70d.js} +12 -12
- package/dist/components/{p-39cad705.js.map → p-acb7d70d.js.map} +1 -1
- package/dist/components/{p-82e0a492.js → p-bb959ca6.js} +5 -5
- package/dist/components/{p-82e0a492.js.map → p-bb959ca6.js.map} +1 -1
- package/dist/components/{p-25c47692.js → p-ccb21ce6.js} +2 -2
- package/dist/components/{p-25c47692.js.map → p-ccb21ce6.js.map} +1 -1
- package/dist/components/{p-1bd15293.js → p-ce0f05d1.js} +4 -4
- package/dist/components/{p-1bd15293.js.map → p-ce0f05d1.js.map} +1 -1
- package/dist/components/{p-db24ff3a.js → p-d1daa4a3.js} +3 -3
- package/dist/components/{p-db24ff3a.js.map → p-d1daa4a3.js.map} +1 -1
- package/dist/components/{p-4f0db835.js → p-e3d11a1b.js} +5 -5
- package/dist/components/{p-4f0db835.js.map → p-e3d11a1b.js.map} +1 -1
- package/dist/components/{p-025840ff.js → p-e59eebf8.js} +3 -3
- package/dist/components/{p-025840ff.js.map → p-e59eebf8.js.map} +1 -1
- package/dist/components/{p-3335c1e5.js → p-e73af3d4.js} +7 -7
- package/dist/components/{p-3335c1e5.js.map → p-e73af3d4.js.map} +1 -1
- package/dist/components/{p-53671a89.js → p-f4da0b35.js} +2 -2
- package/dist/components/p-f4da0b35.js.map +1 -0
- package/dist/components/smoothly-app-demo.js +34 -34
- package/dist/components/smoothly-button-confirm.js +1 -1
- package/dist/components/smoothly-button-demo.js +1 -1
- package/dist/components/smoothly-button.js +1 -1
- package/dist/components/smoothly-dialog-demo.js +1 -1
- package/dist/components/smoothly-display-demo.js +1 -1
- package/dist/components/smoothly-form-demo-all.js +1 -1
- package/dist/components/smoothly-form-demo-card.js +1 -1
- package/dist/components/smoothly-form-demo-controlled.js +1 -1
- package/dist/components/smoothly-form-demo-date-range.js +1 -1
- package/dist/components/smoothly-form-demo-date.js +1 -1
- package/dist/components/smoothly-form-demo-login.js +1 -1
- package/dist/components/smoothly-form-demo-pet.js +1 -1
- package/dist/components/smoothly-form-demo-prices.js +1 -1
- package/dist/components/smoothly-form-demo-transparent.js +1 -1
- package/dist/components/smoothly-form-demo-typed.js +1 -1
- package/dist/components/smoothly-form-demo.js +1 -1
- package/dist/components/smoothly-icon-demo.js +1 -1
- package/dist/components/smoothly-input-checkbox-demo.js +9 -9
- package/dist/components/smoothly-input-clear.js +1 -1
- package/dist/components/smoothly-input-color-demo.js +1 -1
- package/dist/components/smoothly-input-color.js +1 -1
- package/dist/components/smoothly-input-demo-standard.js +1 -1
- package/dist/components/smoothly-input-demo.js +1 -1
- package/dist/components/smoothly-input-edit.js +1 -1
- package/dist/components/smoothly-input-file.js +1 -1
- package/dist/components/smoothly-input-range-demo.js +1 -1
- package/dist/components/smoothly-input-reset.js +1 -1
- package/dist/components/smoothly-input-submit.js +1 -1
- package/dist/components/smoothly-submit.js +1 -1
- package/dist/components/smoothly-table-demo.js +1 -1
- package/dist/components/smoothly-table-testing.js +1 -1
- package/dist/components/smoothly-theme-demo.js +1 -1
- package/dist/components/smoothly-toggle-switch-demo.js +1 -1
- package/dist/components/smoothly-toggle-switch.js +1 -1
- package/dist/components/smoothly-toggle.js +1 -1
- package/dist/esm/smoothly-app_107.entry.js +3 -3
- package/dist/esm/smoothly-app_107.entry.js.map +1 -1
- package/dist/smoothly/p-191595d1.entry.js +2 -0
- package/dist/smoothly/p-191595d1.entry.js.map +1 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-47a1a01b.js.map +0 -1
- package/dist/components/p-53671a89.js.map +0 -1
- package/dist/components/p-662c812d.js.map +0 -1
- package/dist/smoothly/p-e75cd2a4.entry.js +0 -2
- package/dist/smoothly/p-e75cd2a4.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-116f927a.js","mappings":"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","names":[],"sources":["src/components/input/file/style.css?tag=smoothly-input-file&encapsulation=scoped","src/components/input/file/index.tsx"],"sourcesContent":["@import \"../shared.css\";\n\n:host {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-wrap: wrap;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100%;\n\tpadding-left: var(--input-padding-side);\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tbox-sizing: border-box;\n}\n\n:host>div>div.drag-overlay {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: rgb(var(--smoothly-input-hover-background), 0.6);\n\tborder-radius: var(--smoothly-input-border-radius);\n\tborder: 0.25rem dashed rgb(var(--smoothly-input-hover-foreground));\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n:host>div>div.drag-overlay>smoothly-icon {\n\tcolor: rgb(var(--smoothly-input-hover-foreground));\n}\n\n:host:not(.dragging)>div>div.drag-overlay {\n\tdisplay: none;\n}\n\n:host>div.input>input {\n\toverflow: hidden;\n\theight: 0;\n\twidth: 0;\n\tpadding: 0;\n}\n\n:host:not([show-label])>div.input {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-bottom: 0.2rem;\n}\n\n:host:not([show-label])>smoothly-button:not(:empty) {\n\tmargin-right: 1ch;\n}\n\n:host([show-label]) > div.input {\n\tdisplay: flex;\n\tpadding-block: var(--input-value-padding-top) var(--input-value-padding-bottom);\n\theight: 100%;\n\tbox-sizing: border-box;\n\tflex-grow: 1;\n}\n\n:host>div>smoothly-button {\n\tmargin: 0;\n\tborder: none;\n}\n\n:host>label {\n\tleft: var(--input-padding-side);\n}\n\n:host,\n:host * {\n\tcursor: pointer;\n}\n\n:host[readonly],\n:host[readonly] * {\n\tcursor: not-allowed;\n}\n","import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-file\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputFile implements ComponentWillLoad, Input, Clearable, Editable {\n\t@Element() element: HTMLSmoothlyInputFileElement\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() accept?: string\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true }) camera: \"front\" | \"back\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) value?: File\n\t@Prop({ mutable: true, reflect: true }) placeholder: string | undefined\n\t@State() dragging = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tparent: Editable | undefined\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\tprivate transfer: DataTransfer = new DataTransfer()\n\tprivate input?: HTMLInputElement\n\tprivate initialValue: SmoothlyInputFile[\"value\"]\n\n\tprivate get files(): FileList {\n\t\tthis.transfer.items.clear()\n\t\tthis.value && this.transfer.items.add(this.value)\n\t\treturn this.transfer.files\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tthis.smoothlyInputLooks.emit(\n\t\t\t(looks, color) => ((this.looks = this.looks ?? looks), !this.color && (this.color = color))\n\t\t)\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync getValue(): Promise<File | undefined> {\n\t\treturn this.value\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputFile) => void>): void {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.valueChanged()\n\t}\n\t@Method()\n\tasync binary(): Promise<boolean> {\n\t\treturn true\n\t}\n\n\t@Watch(\"value\")\n\tasync valueChanged(): Promise<void> {\n\t\tthis.changed = this.initialValue !== this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t}\n\n\tinputHandler(event: Event): void {\n\t\tevent.stopPropagation()\n\t\tif (this.input?.files?.length)\n\t\t\tthis.value = this.input?.files[0]\n\t}\n\tdropHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t\tthis.dragging = false\n\t\tif (event.dataTransfer?.files.length)\n\t\t\tthis.value = event.dataTransfer.files[0]\n\t}\n\tclickHandler(event: MouseEvent): void {\n\t\tif (!this.readonly && !event.composedPath().find(target => target == this.input)) {\n\t\t\tthis.input?.click()\n\t\t}\n\t}\n\tdragOverHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\tdragEnterHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\t!this.readonly && (this.dragging = true)\n\t}\n\tdragLeaveHandler(event: DragEvent): void {\n\t\tevent.stopPropagation()\n\t\tthis.dragging = false\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{ dragging: this.dragging, \"has-value\": !!this.value }}\n\t\t\t\ttabindex={0}\n\t\t\t\tonClick={(e: MouseEvent) => this.clickHandler(e)}\n\t\t\t\tonDragOver={(e: DragEvent) => this.dragOverHandler(e)}\n\t\t\t\tonDragEnter={(e: DragEvent) => this.dragEnterHandler(e)}>\n\t\t\t\t<label>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</label>\n\t\t\t\t<div class=\"input\">\n\t\t\t\t\t<smoothly-button color={this.color} fill={\"clear\"} size=\"flexible\">\n\t\t\t\t\t\t<slot name={\"button\"} />\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<span>{this.value?.name ?? this.placeholder}</span>\n\t\t\t\t\t<div class={\"drag-overlay\"} onDrop={e => this.dropHandler(e)} onDragLeave={e => this.dragLeaveHandler(e)}>\n\t\t\t\t\t\t<smoothly-icon name={\"document-attach-outline\"} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={element => (this.input = element)}\n\t\t\t\t\t\ttype={\"file\"}\n\t\t\t\t\t\tcapture={this.camera == \"back\" ? \"environment\" : \"user\"}\n\t\t\t\t\t\taccept={this.accept ?? (!this.camera ? undefined : \"image/jpeg\")}\n\t\t\t\t\t\tfiles={this.files}\n\t\t\t\t\t\tonInput={e => this.inputHandler(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"end\" onClick={(e: MouseEvent) => e.stopPropagation()}>\n\t\t\t\t\t<slot name=\"end\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-498755ab.js","mappings":"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","names":[],"sources":["src/components/input/file/style.css?tag=smoothly-input-file&encapsulation=scoped","src/components/input/file/index.tsx"],"sourcesContent":["@import \"../shared.css\";\n\n:host {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-wrap: wrap;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100%;\n\tpadding-left: var(--input-padding-side);\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tbox-sizing: border-box;\n}\n\n:host>div>div.drag-overlay {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: rgb(var(--smoothly-input-hover-background), 0.6);\n\tborder-radius: var(--smoothly-input-border-radius);\n\tborder: 0.25rem dashed rgb(var(--smoothly-input-hover-foreground));\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n:host>div>div.drag-overlay>smoothly-icon {\n\tcolor: rgb(var(--smoothly-input-hover-foreground));\n}\n\n:host:not(.dragging)>div>div.drag-overlay {\n\tdisplay: none;\n}\n\n:host>div.input>input {\n\toverflow: hidden;\n\theight: 0;\n\twidth: 0;\n\tpadding: 0;\n}\n\n:host:not([show-label])>div.input {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-bottom: 0.2rem;\n}\n\n:host:not([show-label])>smoothly-button:not(:empty) {\n\tmargin-right: 1ch;\n}\n\n:host([show-label]) > div.input {\n\tdisplay: flex;\n\tpadding-block: var(--input-value-padding-top) var(--input-value-padding-bottom);\n\theight: 100%;\n\tbox-sizing: border-box;\n\tflex-grow: 1;\n}\n\n:host>div>smoothly-button {\n\tmargin: 0;\n\tborder: none;\n}\n\n:host>label {\n\tleft: var(--input-padding-side);\n}\n\n:host,\n:host * {\n\tcursor: pointer;\n}\n\n:host[readonly],\n:host[readonly] * {\n\tcursor: not-allowed;\n}\n","import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-file\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputFile implements ComponentWillLoad, Input, Clearable, Editable {\n\t@Element() element: HTMLSmoothlyInputFileElement\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() accept?: string\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true }) camera: \"front\" | \"back\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) value?: File\n\t@Prop({ mutable: true, reflect: true }) placeholder: string | undefined\n\t@State() dragging = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tparent: Editable | undefined\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\tprivate transfer: DataTransfer = new DataTransfer()\n\tprivate input?: HTMLInputElement\n\tprivate initialValue: SmoothlyInputFile[\"value\"]\n\n\tprivate get files(): FileList {\n\t\tthis.transfer.items.clear()\n\t\tthis.value && this.transfer.items.add(this.value)\n\t\treturn this.transfer.files\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tthis.smoothlyInputLooks.emit(\n\t\t\t(looks, color) => ((this.looks = this.looks ?? looks), !this.color && (this.color = color))\n\t\t)\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync getValue(): Promise<File | undefined> {\n\t\treturn this.value\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputFile) => void>): void {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.valueChanged()\n\t}\n\t@Method()\n\tasync binary(): Promise<boolean> {\n\t\treturn true\n\t}\n\n\t@Watch(\"value\")\n\tasync valueChanged(): Promise<void> {\n\t\tthis.changed = this.initialValue !== this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t}\n\n\tinputHandler(event: Event): void {\n\t\tevent.stopPropagation()\n\t\tif (this.input?.files?.length)\n\t\t\tthis.value = this.input?.files[0]\n\t}\n\tdropHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t\tthis.dragging = false\n\t\tif (event.dataTransfer?.files.length)\n\t\t\tthis.value = event.dataTransfer.files[0]\n\t}\n\tclickHandler(event: MouseEvent): void {\n\t\tif (!this.readonly && !event.composedPath().find(target => target == this.input)) {\n\t\t\tthis.input?.click()\n\t\t}\n\t}\n\tdragOverHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\tdragEnterHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\t!this.readonly && (this.dragging = true)\n\t}\n\tdragLeaveHandler(event: DragEvent): void {\n\t\tevent.stopPropagation()\n\t\tthis.dragging = false\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{ dragging: this.dragging, \"has-value\": !!this.value }}\n\t\t\t\ttabindex={0}\n\t\t\t\tonClick={(e: MouseEvent) => this.clickHandler(e)}\n\t\t\t\tonDragOver={(e: DragEvent) => this.dragOverHandler(e)}\n\t\t\t\tonDragEnter={(e: DragEvent) => this.dragEnterHandler(e)}>\n\t\t\t\t<label>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</label>\n\t\t\t\t<div class=\"input\">\n\t\t\t\t\t<smoothly-button color={this.color} fill={\"clear\"} size=\"flexible\">\n\t\t\t\t\t\t<slot name={\"button\"} />\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<span>{this.value?.name ?? this.placeholder}</span>\n\t\t\t\t\t<div class={\"drag-overlay\"} onDrop={e => this.dropHandler(e)} onDragLeave={e => this.dragLeaveHandler(e)}>\n\t\t\t\t\t\t<smoothly-icon name={\"document-attach-outline\"} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={element => (this.input = element)}\n\t\t\t\t\t\ttype={\"file\"}\n\t\t\t\t\t\tcapture={this.camera == \"back\" ? \"environment\" : \"user\"}\n\t\t\t\t\t\taccept={this.accept ?? (!this.camera ? undefined : \"image/jpeg\")}\n\t\t\t\t\t\tfiles={this.files}\n\t\t\t\t\t\tonInput={e => this.inputHandler(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"end\" onClick={(e: MouseEvent) => e.stopPropagation()}>\n\t\t\t\t\t<slot name=\"end\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
|
|
2
2
|
import { D as Date, C as Currency } from './p-390767c7.js';
|
|
3
|
-
import { d as defineCustomElement$c } from './p-
|
|
4
|
-
import { d as defineCustomElement$b } from './p-
|
|
3
|
+
import { d as defineCustomElement$c } from './p-306f9cb3.js';
|
|
4
|
+
import { d as defineCustomElement$b } from './p-686ec006.js';
|
|
5
5
|
import { d as defineCustomElement$a } from './p-ca69a0ef.js';
|
|
6
6
|
import { d as defineCustomElement$9 } from './p-c63db1c1.js';
|
|
7
7
|
import { d as defineCustomElement$8 } from './p-0b16cab5.js';
|
|
8
|
-
import { d as defineCustomElement$7 } from './p-
|
|
8
|
+
import { d as defineCustomElement$7 } from './p-62b70c3f.js';
|
|
9
9
|
import { d as defineCustomElement$6 } from './p-b20e3206.js';
|
|
10
|
-
import { d as defineCustomElement$5 } from './p-
|
|
10
|
+
import { d as defineCustomElement$5 } from './p-2738b430.js';
|
|
11
11
|
import { d as defineCustomElement$4 } from './p-083143a9.js';
|
|
12
|
-
import { d as defineCustomElement$3 } from './p-
|
|
12
|
+
import { d as defineCustomElement$3 } from './p-631148b4.js';
|
|
13
13
|
import { d as defineCustomElement$2 } from './p-edcdcc51.js';
|
|
14
14
|
import { d as defineCustomElement$1 } from './p-c77944e7.js';
|
|
15
15
|
|
|
@@ -135,4 +135,4 @@ defineCustomElement();
|
|
|
135
135
|
|
|
136
136
|
export { SmoothlyFormDemoControlled as S, defineCustomElement as d };
|
|
137
137
|
|
|
138
|
-
//# sourceMappingURL=p-
|
|
138
|
+
//# sourceMappingURL=p-4d026008.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-4d026008.js","mappings":"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","names":["isoly.Date","isoly.Currency"],"sources":["src/components/form/demo/controlled/index.tsx"],"sourcesContent":["import { Component, h, Host, State, VNode, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { SmoothlyFormCustomEvent } from \"../../../../components\"\nimport { Data } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-form-demo-controlled\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoControlled {\n\t@State() name = \"Initial name\"\n\t@State() currency: isoly.Currency = \"EUR\"\n\t@State() date: isoly.Date = isoly.Date.now()\n\tprivate currencies: isoly.Currency[] = [\"GBP\", \"SEK\", \"EUR\", \"USD\"]\n\n\t@Watch(\"name\")\n\tnameChanged(current: string, previous: string): void {\n\t\tconsole.log(`updated name from '${previous}' to '${current}'`)\n\t}\n\n\tasync submitHandler(\n\t\tevent: SmoothlyFormCustomEvent<{ result: (result: boolean) => void; value: Data }>\n\t): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tconsole.log(\"Received event. Processing...\", event.detail)\n\t\tif (!(typeof event.detail.value.name == \"string\")) {\n\t\t\tconsole.error(\"Bad input. Resolving false.\")\n\t\t} else if (!(typeof event.detail.value.date == \"string\"))\n\t\t\tconsole.error(\"Bad input. Resolving false.\")\n\t\telse if (!isoly.Currency.is(event.detail.value.currency))\n\t\t\tconsole.error(\"Bad input. Resolving false.\")\n\t\telse {\n\t\t\tawait new Promise(resolve => window.setTimeout(resolve, 1_000))\n\t\t\tthis.name = event.detail.value.name\n\t\t\tthis.date = event.detail.value.date\n\t\t\tthis.currency = event.detail.value.currency\n\t\t\tconsole.log(\"Finished processing successfully. Resolving true.\")\n\t\t\tevent.detail.result(true)\n\t\t}\n\t\tevent.detail.result(false)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Controlled</h2>\n\t\t\t\t<smoothly-form readonly looks={\"grid\"} onSmoothlyFormSubmit={e => this.submitHandler(e)}>\n\t\t\t\t\t<smoothly-input type={\"text\"} name={\"name\"} value={this.name}>\n\t\t\t\t\t\tName\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-select name={\"currency\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Currency</span>\n\t\t\t\t\t\t{this.currencies.map(currency => (\n\t\t\t\t\t\t\t<smoothly-item selected={currency == this.currency} value={currency}>\n\t\t\t\t\t\t\t\t{currency}\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input>Dummy</smoothly-input>\n\t\t\t\t\t<smoothly-input-month name={\"date\"} value={this.date} next previous>\n\t\t\t\t\t\t<span slot={\"year-label\"}>Year</span>\n\t\t\t\t\t\t<span slot={\"month-label\"}>Month</span>\n\t\t\t\t\t</smoothly-input-month>\n\t\t\t\t\t<smoothly-input-edit slot={\"edit\"} size={\"icon\"} color={\"primary\"} fill={\"default\"} />\n\t\t\t\t\t<smoothly-input-reset slot={\"reset\"} size={\"icon\"} color={\"warning\"} fill={\"default\"} />\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"} size={\"icon\"} color={\"success\"} />\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
|
|
2
2
|
import { E as Editable } from './p-b0d7a2e6.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-306f9cb3.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './p-c63db1c1.js';
|
|
5
5
|
|
|
6
6
|
const styleCss = "[color=default].sc-smoothly-input-edit{--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-input-edit{--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-input-edit{--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-input-edit{--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-input-edit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-edit{--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-input-edit{--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-input-edit{--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-input-edit{--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-input-edit{--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)}.sc-smoothly-input-edit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-edit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-edit-h{display:inline}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-edit-h>a.sc-smoothly-input-edit:empty,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:empty{border-width:0}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-edit{padding:0.8em;min-width:8em}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-edit{padding:0.6em}[size=icon].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{padding:0.5em}[type=button].sc-smoothly-input-edit-h>a.sc-smoothly-input-edit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:100%}[size=large].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:130%}.sc-smoothly-input-edit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-edit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-edit-h{width:100%}[expand=full].sc-smoothly-input-edit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-edit-h:not([fill=clear])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-visible,[fill=outline].sc-smoothly-input-edit-h:active>button.sc-smoothly-input-edit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:hover::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:focus-within::before,[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:hover,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:focus-visible,.sc-smoothly-input-edit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-edit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h .sc-smoothly-input-edit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-edit-h{display:none}.sc-smoothly-input-edit-h:not([display]){display:none}[editable].sc-smoothly-input-edit-h{opacity:0.5}.sc-smoothly-input-edit-h[type=\"input\"].sc-smoothly-input-edit-s>smoothly-button>button{cursor:pointer;filter:opacity(60%);--smoothly-button-foreground:var(--smoothly-input-foreground);background-color:transparent}.sc-smoothly-input-edit-h smoothly-icon.default.sc-smoothly-input-edit{transform:translate(.1em, -.1em)}.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>button>*+smoothly-icon{display:none}";
|
|
@@ -78,4 +78,4 @@ defineCustomElement();
|
|
|
78
78
|
|
|
79
79
|
export { SmoothlyInputEdit as S, defineCustomElement as d };
|
|
80
80
|
|
|
81
|
-
//# sourceMappingURL=p-
|
|
81
|
+
//# sourceMappingURL=p-62b70c3f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-62b70c3f.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,qoNAAqoN,CAAC;AACvpN,gCAAe,QAAQ;;MCQV,iBAAiB;;;;;qBAEL,UAAU;;;wBAGiB,KAAK;uBACN,IAAI;;oBAEJ,OAAO;;uBAEvC,MAAM;;IAExB,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM;YACjC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;gBAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;gBACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAM,CAAC;oBAC/B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAA;iBACzB,CAAC,CAAA;aACF;SACD,CAAC,CAAA;KACF;IAED,YAAY;;QACX,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAA;KACvB;IAED,MAAM;;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACxB,wEACC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,oCAAK,IAAI,CAAC,IAAI,IAAI,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,IAC/D,8DAAQ,EACR,sEAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAG,CAClD,CACZ,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/edit/style.css?tag=smoothly-input-edit&encapsulation=scoped","src/components/input/edit/index.tsx"],"sourcesContent":["@import \"../../button/style.css\";\n\n:host(:not([display])) {\n\tdisplay: none;\n}\n\n:host([editable]){\n\topacity: 0.5;\n}\n\n:host([type=\"input\"])::slotted(smoothly-button>button) {\n\tcursor: pointer;\n\tfilter: opacity(60%);\n\t--smoothly-button-foreground: var(--smoothly-input-foreground);\n\tbackground-color: transparent;\n}\n\n:host smoothly-icon.default {\n\ttransform: translate(.1em, -.1em);\n}\n\n:host::slotted(button > * > * + smoothly-icon) {\n\tdisplay: none;\n}\n","import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Listen, Prop, VNode } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Editable } from \"../Editable\"\n\n@Component({\n\ttag: \"smoothly-input-edit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputEdit implements ComponentWillLoad {\n\tprivate parent?: Editable\n\t@Prop() color?: Color = \"tertiary\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = true\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) type: \"form\" | \"input\" = \"input\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Prop() toolTip = \"Edit\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\tthis.display = p.readonly\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.edit(true)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host title={this.toolTip}>\n\t\t\t\t<smoothly-button\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\tshape={this.shape}\n\t\t\t\t\texpand={this.expand}\n\t\t\t\t\tcolor={this.color}\n\t\t\t\t\tfill={this.fill ?? (this.type == \"input\" ? \"clear\" : undefined)}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<smoothly-icon class=\"default\" name=\"create-outline\" size=\"tiny\" />\n\t\t\t\t</smoothly-button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
|
2
2
|
import { T as Type } from './p-d471066b.js';
|
|
3
3
|
import { E as Editable } from './p-b0d7a2e6.js';
|
|
4
4
|
import { S as Submittable } from './p-66744584.js';
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-306f9cb3.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-686ec006.js';
|
|
7
7
|
import { d as defineCustomElement$1 } from './p-c63db1c1.js';
|
|
8
8
|
|
|
9
9
|
const styleCss = "[color=default].sc-smoothly-input-submit{--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-input-submit{--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-input-submit{--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-input-submit{--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-input-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-contrast);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-submit{--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-input-submit{--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-input-submit{--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-input-submit{--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-input-submit{--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)}.sc-smoothly-input-submit-h{--smoothly-button-border-radius:0.5rem;display:inline-block;box-sizing:border-box;border-radius:var(--smoothly-button-border-radius);cursor:pointer;border:none;outline:none;position:relative}[shape=rounded].sc-smoothly-input-submit-h{--smoothly-button-border-radius:2rem}[type=link].sc-smoothly-input-submit-h{display:inline}[disabled].sc-smoothly-input-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:110%;font-weight:400;border:1px solid transparent;outline:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem;box-sizing:border-box}.sc-smoothly-input-submit-h>a.sc-smoothly-input-submit:empty,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:empty{border-width:0}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-weight:bold;justify-content:center;height:100%;width:100%;border-radius:var(--smoothly-button-border-radius);align-items:center}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-submit{padding:0.8em;min-width:8em}.sc-smoothly-input-submit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-submit{padding:0.6em}[size=icon].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{padding:0.5em}[type=button].sc-smoothly-input-submit-h>a.sc-smoothly-input-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:100%}[size=large].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{font-size:130%}.sc-smoothly-input-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center}[size=flexible].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{min-width:unset;padding:0;margin:0}[expand].sc-smoothly-input-submit-h{width:100%}[expand=full].sc-smoothly-input-submit-h{border-left:none;border-right:none;--smoothly-button-border-radius:0}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit{background-color:transparent;color:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));border-color:rgb(var(--smoothly-button-foreground))}.sc-smoothly-input-submit-h:not([fill=clear])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-visible,[fill=outline].sc-smoothly-input-submit-h:active>button.sc-smoothly-input-submit::before{border-color:rgb(var(--smoothly-button-focus-color))}[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:hover::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:focus-within::before,[fill=outline].sc-smoothly-input-submit-h>button.sc-smoothly-input-submit:active::before{content:\"\";position:absolute;border:2px solid rgb(var(--smoothly-button-focus-border));inset:-1px;border-radius:var(--smoothly-button-border-radius)}.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:hover,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:focus-visible,.sc-smoothly-input-submit-h:not([fill=clear]):not([fill=outline])>button.sc-smoothly-input-submit:active{background:rgb(var(--smoothly-button-hover-background))}.sc-smoothly-input-submit-h>button.sc-smoothly-input-submit,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-icon,.sc-smoothly-input-submit-h .sc-smoothly-input-submit-s>smoothly-icon{color:rgb(var(--smoothly-button-foreground));stroke:rgb(var(--smoothly-button-foreground));fill:rgb(var(--smoothly-button-foreground))}[hidden].sc-smoothly-input-submit-h{display:none}.sc-smoothly-input-submit-h{display:flex}.sc-smoothly-input-submit-h:not([display]){display:none}.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button button>*+smoothly-icon,.sc-smoothly-input-submit-h.sc-smoothly-input-submit-s>smoothly-button-confirm button>*+smoothly-icon{display:none}[disabled].sc-smoothly-input-submit-h{cursor:not-allowed}";
|
|
@@ -94,4 +94,4 @@ defineCustomElement();
|
|
|
94
94
|
|
|
95
95
|
export { SmoothlyInputSubmit as S, defineCustomElement as d };
|
|
96
96
|
|
|
97
|
-
//# sourceMappingURL=p-
|
|
97
|
+
//# sourceMappingURL=p-631148b4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-631148b4.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,6nNAA6nN,CAAC;AAC/oN,kCAAe,QAAQ;;MCUV,mBAAmB;;;;;sBAEG,KAAK;;oBAEV,mBAAmB;;;wBAGG,KAAK;uBACN,KAAK;;oBAEkB,MAAM;uBAC7D,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ;;IAEnD,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM;YACjC,IAAI,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;gBACvD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;gBACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAM,CAAC;;oBAC/B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAA;oBAC1B,IAAI,CAAC,QAAQ;wBACZ,CAAC,IAAI,CAAC,MAAM;6BACX,CAAC,CAAC,QAAQ;iCACT,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,YAAYA,IAAS,IAAI,EAAC,MAAA,CAAC,CAAC,SAAS,0CAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA,CAAC;gCACnF,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;iBACb,CAAC,CAAA;aACF;SACD,CAAC,CAAA;KACF;IACD,YAAY;;QACX,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KAChC;IAED,MAAM;;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACvB,IAAI,CAAC,MAAM,IAAI,IAAI,IACnB,+BACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,QAAQ,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,iBAAiB,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAC5C,eAAQ,EACR,qBAAe,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,CACtC,KAE1B,uBACC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAClC,eAAQ,EACP,IAAI,CAAC,IAAI,IAAI,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,CACxD,CAClB,CACK,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.Type"],"sources":["src/components/input/submit/style.css?tag=smoothly-input-submit&encapsulation=scoped","src/components/input/submit/index.tsx"],"sourcesContent":["@import \"../../button/style.css\"; \n\n:host {\n\tdisplay: flex;\n}\n\n:host(:not([display])) {\n\tdisplay: none;\n}\n\n:host::slotted(smoothly-button button > * > * + smoothly-icon),\n:host::slotted(smoothly-button-confirm button > * > * + smoothly-icon) {\n\tdisplay: none;\n}\n\n:host([disabled]) {\n\tcursor: not-allowed\n}\n","import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\nimport { isly } from \"isly\"\nimport { Color, Fill, Icon } from \"../../../model\"\nimport { Editable } from \"../Editable\"\nimport { Submittable } from \"../Submittable\"\n\n@Component({\n\ttag: \"smoothly-input-submit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSubmit implements ComponentWillLoad {\n\tprivate parent?: Submittable & Editable\n\t@Prop({ reflect: true }) delete = false\n\t@Prop() color?: Color\n\t@Prop() icon: Icon | false = \"checkmark-outline\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = false\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\" = \"icon\"\n\t@Prop() toolTip = this.delete ? \"Remove\" : \"Submit\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent) && Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\tthis.display = !p.readonly\n\t\t\t\t\tthis.disabled =\n\t\t\t\t\t\t!this.delete &&\n\t\t\t\t\t\t(p.readonly ||\n\t\t\t\t\t\t\t(\"validator\" in p && p.validator instanceof isly.Type && !p.validator?.is(p.value)) ||\n\t\t\t\t\t\t\t!p.changed)\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\tclickHandler() {\n\t\tthis.parent?.submit(this.delete)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host title={this.toolTip}>\n\t\t\t\t{this.delete == true ? (\n\t\t\t\t\t<smoothly-button-confirm\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"danger\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tonSmoothlyConfirm={() => this.clickHandler()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<smoothly-icon name=\"trash-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-button-confirm>\n\t\t\t\t) : (\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"success\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tonClick={() => this.clickHandler()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t{this.icon && <smoothly-icon name={this.icon} fill=\"solid\" size=\"tiny\" />}\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-306f9cb3.js';
|
|
3
3
|
import { d as defineCustomElement$1 } from './p-c63db1c1.js';
|
|
4
4
|
|
|
5
5
|
const styleCss = ".sc-smoothly-button-confirm-h{display:inline-block}[disabled].sc-smoothly-button-confirm-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-confirm-h:not([warning])>smoothly-button.sc-smoothly-button-confirm:first-child{display:none}[warning].sc-smoothly-button-confirm-h>smoothly-button.sc-smoothly-button-confirm:nth-child(2){display:none}[expand].sc-smoothly-button-confirm-h{width:100%}";
|
|
@@ -76,4 +76,4 @@ defineCustomElement();
|
|
|
76
76
|
|
|
77
77
|
export { SmoothlyButtonConfirm as S, defineCustomElement as d };
|
|
78
78
|
|
|
79
|
-
//# sourceMappingURL=p-
|
|
79
|
+
//# sourceMappingURL=p-686ec006.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-686ec006.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,2YAA2Y,CAAC;AAC7Z,oCAAe,QAAQ;;MCQV,qBAAqB;;;;;;;;+BAIP,GAAG;;;wBAGO,KAAK;;;;;IAOzC,YAAY,CAAC,KAAiB;QAC7B,IAAI,IAAI,CAAC,cAAc,IAAI,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,EAAE;YAC/F,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC7C,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;YAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,CAAA;SAChD;aAAM;YACN,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,SAAS,CAAA;YACrC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;gBAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;aAC/B,EAAE,IAAI,CAAC,CAAA;SACR;KACD;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,cAAc,IACjC,wEACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAC1C,sEACC,IAAI,EAAE,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAC5C,CACe,EAClB,wEACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAC1C,8DAAQ,CACS,CACZ,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/confirm/style.css?tag=smoothly-button-confirm&encapsulation=scoped","src/components/confirm/index.tsx"],"sourcesContent":[":host {\n\tdisplay: inline-block;\n}\n:host([disabled]) {\n\topacity: 0.5;\n\tpointer-events: none;\n}\n:host:not([warning]) > smoothly-button:first-child {\n\tdisplay: none;\n}\n:host[warning] > smoothly-button:nth-child(2) {\n\tdisplay: none;\n}\n:host([expand]) {\n\twidth: 100%;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Color, Data, Fill } from \"../../model\"\nimport { Editable } from \"../input/Editable\"\n\n@Component({\n\ttag: \"smoothly-button-confirm\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyButtonConfirm {\n\ttimer?: number\n\t@Prop() color?: Color\n\t@Prop({ reflect: true }) name: string\n\t@Prop() doubleClickTime = 0.2\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop() fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop() shape?: \"rounded\"\n\t@Prop() size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@State() clickTimeStamp: number | undefined\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyConfirm: EventEmitter<Data>\n\n\tclickHandler(event: MouseEvent): void {\n\t\tif (this.clickTimeStamp && event.timeStamp - this.clickTimeStamp > this.doubleClickTime * 1000) {\n\t\t\tthis.timer && window.clearTimeout(this.timer)\n\t\t\tthis.clickTimeStamp = undefined\n\t\t\tthis.smoothlyConfirm.emit({ [this.name]: true })\n\t\t} else {\n\t\t\tthis.clickTimeStamp = event.timeStamp\n\t\t\tthis.timer = window.setTimeout(() => {\n\t\t\t\tthis.clickTimeStamp = undefined\n\t\t\t}, 2000)\n\t\t}\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host warning={this.clickTimeStamp}>\n\t\t\t\t<smoothly-button\n\t\t\t\t\tfill={this.fill}\n\t\t\t\t\texpand={this.expand}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tshape={this.shape}\n\t\t\t\t\tcolor={\"warning\"}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\tonClick={event => this.clickHandler(event)}>\n\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\tname={\"alert-outline\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tcolor=\"warning\"\n\t\t\t\t\t\tsize={this.size === \"icon\" ? \"tiny\" : \"small\"}\n\t\t\t\t\t/>\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button\n\t\t\t\t\tfill={this.fill}\n\t\t\t\t\texpand={this.expand}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tshape={this.shape}\n\t\t\t\t\tcolor={this.color}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\tonClick={event => this.clickHandler(event)}>\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
|
|
2
|
-
import { d as defineCustomElement$8 } from './p-
|
|
3
|
-
import { d as defineCustomElement$7 } from './p-
|
|
2
|
+
import { d as defineCustomElement$8 } from './p-306f9cb3.js';
|
|
3
|
+
import { d as defineCustomElement$7 } from './p-686ec006.js';
|
|
4
4
|
import { d as defineCustomElement$6 } from './p-ca69a0ef.js';
|
|
5
5
|
import { d as defineCustomElement$5 } from './p-c63db1c1.js';
|
|
6
6
|
import { d as defineCustomElement$4 } from './p-0b16cab5.js';
|
|
7
|
-
import { d as defineCustomElement$3 } from './p-
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { d as defineCustomElement$3 } from './p-2738b430.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-631148b4.js';
|
|
9
9
|
import { d as defineCustomElement$1 } from './p-c77944e7.js';
|
|
10
10
|
|
|
11
11
|
const SmoothlyFormDemoPrices = proxyCustomElement(class SmoothlyFormDemoPrices extends H {
|
|
@@ -74,4 +74,4 @@ defineCustomElement();
|
|
|
74
74
|
|
|
75
75
|
export { SmoothlyFormDemoPrices as S, defineCustomElement as d };
|
|
76
76
|
|
|
77
|
-
//# sourceMappingURL=p-
|
|
77
|
+
//# sourceMappingURL=p-702f01d3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-702f01d3.js","mappings":";;;;;;;;;;MAMa,sBAAsB;;;;;IAClC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,sEAAe,EACf,sEAAe,KAAK,EAAC,MAAM,IAC1B,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,kBAErB,EACjB,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,4BAElD,EACjB,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,UAE1C,EACjB,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,UAExC,EACjB,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,UAEtC,EACjB,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,UAEzC,EACjB,uEAAgB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAC,KAAK,IAC1D,iBAAiB,CACF,EACjB,6EAAsB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,GAAwB,EACrG,8EAAuB,IAAI,EAAC,QAAQ,GAAyB,CAC9C,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form/demo/prices/index.tsx"],"sourcesContent":["import { Component, h, Host, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-form-demo-prices\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoPrices {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Prices</h2>\n\t\t\t\t<smoothly-form looks=\"line\">\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"no\">\n\t\t\t\t\t\tNo currency\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"crowns\" currency=\"SEK\" toInteger>\n\t\t\t\t\t\tSEK (toInteger)\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"usDollar\" currency=\"USD\">\n\t\t\t\t\t\tUSD\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"pounds\" currency=\"GBP\">\n\t\t\t\t\t\tGBP\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"peso\" currency=\"UYW\">\n\t\t\t\t\t\tUYW\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"iceland\" currency=\"ISK\">\n\t\t\t\t\t\tISK\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"Palladium\" currency=\"XPD\">\n\t\t\t\t\t\t{\"XPD (Palladium)\"}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-reset slot=\"reset\" fill=\"default\" type=\"form\" color=\"warning\"></smoothly-input-reset>\n\t\t\t\t\t<smoothly-input-submit slot=\"submit\"></smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-c63db1c1.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-45ff39e4.js';
|
|
4
4
|
|
|
5
5
|
const styleCss = ".sc-smoothly-toggle-switch-demo-h>div.sc-smoothly-toggle-switch-demo{display:grid;grid-template-columns:repeat(5, max-content);gap:1em}.sc-smoothly-toggle-switch-demo-h>div.sc-smoothly-toggle-switch-demo>span.sc-smoothly-toggle-switch-demo>p.sc-smoothly-toggle-switch-demo{margin:0}";
|
|
6
6
|
const SmoothlyToggleSwitchDemoStyle0 = styleCss;
|
|
@@ -42,4 +42,4 @@ defineCustomElement();
|
|
|
42
42
|
|
|
43
43
|
export { SmoothlyToggleSwitchDemo as S, defineCustomElement as d };
|
|
44
44
|
|
|
45
|
-
//# sourceMappingURL=p-
|
|
45
|
+
//# sourceMappingURL=p-7514961a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-7514961a.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,4RAA4R,CAAC;AAC9S,uCAAe,QAAQ;;MCMV,wBAAwB;;;;;IACpC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,+EAAwB,EACxB,8DACC,wEAAgB,EAChB,+DACC,mEAAW,EACX,+EAAwB,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAC,MAAM,GAA0B,CACxE,EACP,+DACC,oEAAY,EACZ,+EAAwB,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAA0B,CACzE,EACP,+DACC,uEAAe,EACf,+EAAwB,QAAQ,EAAE,KAAK,GAA2B,CAC5D,EACP,+DACC,oEAAY,EACZ,+EAAwB,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAA0B,CACzE,EACP,+EAAuB,EACvB,+DACC,qEAAa,EACb,+EAAwB,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAA0B,CACxF,EACP,+DACC,4EAAoB,EACpB,+EAAwB,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAA0B,CACzF,EACP,+DACC,8EAAsB,EACtB,+EAAwB,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAA0B,CAC3F,EACP,2DAAO,EACP,kFAA0B,EAC1B,+DACC,qEAAa,EACb,+EACC,SAAS,EAAE,KAAK,EAChB,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,OAAO,GAA0B,CACjC,EACP,+DACC,4EAAoB,EACpB,+EACC,SAAS,EAAE,KAAK,EAChB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,OAAO,GAA0B,CACjC,EACP,+DACC,8EAAsB,EACtB,+EACC,SAAS,EAAE,KAAK,EAChB,KAAK,EAAC,WAAW,EACjB,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,OAAO,GAA0B,CACjC,CACF,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/toggle-switch/demo/style.css?tag=smoothly-toggle-switch-demo&encapsulation=scoped","src/components/toggle-switch/demo/index.tsx"],"sourcesContent":[":host>div {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 1em;\n}\n\n:host>div>span>p {\n\tmargin: 0;\n}\n","import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-toggle-switch-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyToggleSwitchDemo {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h4>Toggle switches</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<p>Checkmark</p>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Tiny</p>\n\t\t\t\t\t\t<smoothly-toggle-switch disabled={false} size=\"tiny\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Small</p>\n\t\t\t\t\t\t<smoothly-toggle-switch disabled={false} size=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Standard</p>\n\t\t\t\t\t\t<smoothly-toggle-switch disabled={false}></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Large</p>\n\t\t\t\t\t\t<smoothly-toggle-switch disabled={false} size=\"large\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<p>Colors checkmark</p>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Danger</p>\n\t\t\t\t\t\t<smoothly-toggle-switch color=\"danger\" disabled={false} size=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Primary color</p>\n\t\t\t\t\t\t<smoothly-toggle-switch color=\"primary\" disabled={false} size=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Secondary color</p>\n\t\t\t\t\t\t<smoothly-toggle-switch color=\"secondary\" disabled={false} size=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<p></p>\n\t\t\t\t\t<p>Colors no checkmark</p>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Danger</p>\n\t\t\t\t\t\t<smoothly-toggle-switch\n\t\t\t\t\t\t\tcheckmark={false}\n\t\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\t\tdisabled={false}\n\t\t\t\t\t\t\tsize=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Primary color</p>\n\t\t\t\t\t\t<smoothly-toggle-switch\n\t\t\t\t\t\t\tcheckmark={false}\n\t\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t\tdisabled={false}\n\t\t\t\t\t\t\tsize=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<p>Secondary color</p>\n\t\t\t\t\t\t<smoothly-toggle-switch\n\t\t\t\t\t\t\tcheckmark={false}\n\t\t\t\t\t\t\tcolor=\"secondary\"\n\t\t\t\t\t\t\tdisabled={false}\n\t\t\t\t\t\t\tsize=\"small\"></smoothly-toggle-switch>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -8,7 +8,7 @@ import { d as defineCustomElement$c } from './p-ca69a0ef.js';
|
|
|
8
8
|
import { d as defineCustomElement$b } from './p-c63db1c1.js';
|
|
9
9
|
import { d as defineCustomElement$a } from './p-0b16cab5.js';
|
|
10
10
|
import { d as defineCustomElement$9 } from './p-c77944e7.js';
|
|
11
|
-
import { d as defineCustomElement$8 } from './p-
|
|
11
|
+
import { d as defineCustomElement$8 } from './p-43b737be.js';
|
|
12
12
|
import { d as defineCustomElement$7 } from './p-72b742f3.js';
|
|
13
13
|
import { d as defineCustomElement$6 } from './p-5ec298f3.js';
|
|
14
14
|
import { d as defineCustomElement$5 } from './p-cd07fedf.js';
|
|
@@ -163,4 +163,4 @@ defineCustomElement();
|
|
|
163
163
|
|
|
164
164
|
export { SmoothlyTableTesting as S, defineCustomElement as d };
|
|
165
165
|
|
|
166
|
-
//# sourceMappingURL=p-
|
|
166
|
+
//# sourceMappingURL=p-8ea7eab2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-8ea7eab2.js","mappings":";;;;;;;;;;;;;;;;;;;AAAO,MAAM,IAAI,GAAG;IACnB;QACC,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,CAAC;KACN;IACD;QACC,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,CAAC;KACN;IACD;QACC,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,CAAC;KACN;IACD;QACC,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,CAAC;KACN;IACD;QACC,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,CAAC;KACN;CACD;;AC1BD,MAAM,QAAQ,GAAG,+gBAA+gB,CAAC;AACjiB,mCAAe,QAAQ;;MCMV,oBAAoB;;;;uBACb,CAAC;;IACpB,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,uEAAgB,KAAK,EAAC,MAAM,IAC3B,6EACC,uFAAmD,EACnD,uFAAmD,EACnD,sFAAkD,CAC9B,EAEpB,IAAI,CAAC,GAAG,CAAC,MAAM,KACf,yCACC,+BAAsB,MAAM,CAAC,IAAI,CAAuB,EACxD,+BAAsB,MAAM,CAAC,IAAI,CAAuB,EACxD,+BAAsB,MAAM,CAAC,GAAG,CAAuB,EACvD,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM,IACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB,EACzD,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB,EACzD,0BAAiB,MAAM,CAAC,GAAG,CAAkB,EAC7C,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACe,CAChC,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,MAAM,KACf,8BACC,+BAAsB,MAAM,CAAC,IAAI,CAAuB,EACxD,0CACE,MAAM,CAAC,IAAI,EACZ,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM,IACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB,EACzD,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACgB,EACjC,0CACE,MAAM,CAAC,GAAG,EACX,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM,IACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB,EACzD,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB,EACzD,0BAAiB,MAAM,CAAC,GAAG,CAAkB,EAC7C,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACgB,CACb,CACrB,CAAC,EACF,gFACC,2DAAI,OAAO,EAAE,CAAC,IACb,4DAAK,KAAK,EAAC,QAAQ,uCAElB,yEAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,CAC9C,CACF,EACL,gFAAwB,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAyB,CAC7E,CACR,CACX,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/demo/testing/data.ts","src/components/table/demo/testing/style.css?tag=smoothly-table-testing&encapsulation=scoped","src/components/table/demo/testing/index.tsx"],"sourcesContent":["export const data = [\n\t{\n\t\ttype: \"cat\",\n\t\tname: \"Lazie\",\n\t\tage: 3,\n\t},\n\t{\n\t\ttype: \"dog\",\n\t\tname: \"Jessie\",\n\t\tage: 8,\n\t},\n\t{\n\t\ttype: \"cat\",\n\t\tname: \"Snooz\",\n\t\tage: 5,\n\t},\n\t{\n\t\ttype: \"bird\",\n\t\tname: \"Squeak\",\n\t\tage: 1,\n\t},\n\t{\n\t\ttype: \"bird\",\n\t\tname: \"Quirk\",\n\t\tage: 2,\n\t},\n]\n",":host {\n\twidth: 100%;\n\tdisplay: flex;\n\tjustify-content: center;\n}\n\nsmoothly-table {\n\twidth: 80%;\n}\n\n.tableCell {\n\theight: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.tableCell>div {\n\tmargin-left: 3rem;\n\tmargin-right: 3rem;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 2rem;\n}\n\ntd>div.footer {\n\tdisplay: flex;\n\tpadding-left: 1.5em;\n\tflex-direction: row;\n\tgap: 1em;\n}\n","import { Component, h, Host, State } from \"@stencil/core\"\nimport { data } from \"./data\"\n@Component({\n\ttag: \"smoothly-table-testing\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTableTesting {\n\t@State() counter = 0\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-table color=\"dark\">\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Type</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Name</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Age</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t\t{data.map(animal => (\n\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.type}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.name}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.age}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t<smoothly-input value={animal.type}>Type</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-input>{animal.age}</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t))}\n\t\t\t\t\t{data.map(animal => (\n\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.type}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t{animal.name}\n\t\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t{animal.age}\n\t\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.type}>Type</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-input>{animal.age}</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t))}\n\t\t\t\t\t<smoothly-table-footer>\n\t\t\t\t\t\t<td colSpan={2}>\n\t\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t\tCurrently viewing content from:\n\t\t\t\t\t\t\t\t<smoothly-display type=\"date\" value=\"2023-10-12\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<smoothly-table-header>{\"Total age: \" + data.reduce((r, a) => r + a.age, 0)}</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-footer>\n\t\t\t\t</smoothly-table>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
|
|
2
|
-
import { d as defineCustomElement$8 } from './p-
|
|
3
|
-
import { d as defineCustomElement$7 } from './p-
|
|
2
|
+
import { d as defineCustomElement$8 } from './p-306f9cb3.js';
|
|
3
|
+
import { d as defineCustomElement$7 } from './p-686ec006.js';
|
|
4
4
|
import { d as defineCustomElement$6 } from './p-ca69a0ef.js';
|
|
5
5
|
import { d as defineCustomElement$5 } from './p-c63db1c1.js';
|
|
6
6
|
import { d as defineCustomElement$4 } from './p-0b16cab5.js';
|
|
7
|
-
import { d as defineCustomElement$3 } from './p-
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { d as defineCustomElement$3 } from './p-2738b430.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-631148b4.js';
|
|
9
9
|
import { d as defineCustomElement$1 } from './p-c77944e7.js';
|
|
10
10
|
|
|
11
11
|
const SmoothlyFormDemoLogin = proxyCustomElement(class SmoothlyFormDemoLogin extends H {
|
|
@@ -74,4 +74,4 @@ defineCustomElement();
|
|
|
74
74
|
|
|
75
75
|
export { SmoothlyFormDemoLogin as S, defineCustomElement as d };
|
|
76
76
|
|
|
77
|
-
//# sourceMappingURL=p-
|
|
77
|
+
//# sourceMappingURL=p-93e899e7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-93e899e7.js","mappings":";;;;;;;;;;MAMa,qBAAqB;;;;;IACjC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,qEAAc,EACd,sEAAe,KAAK,EAAC,QAAQ,IAC5B,uEAAgB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,eAE1B,EACjB,uEAAgB,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,eAE9B,EACjB,6EAAsB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,GAAwB,EAClG,8EAAuB,IAAI,EAAC,QAAQ,GAAyB,CAC9C,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form/demo/login/index.tsx"],"sourcesContent":["import { Component, h, Host, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-form-demo-login\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoLogin {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Login</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"username\">\n\t\t\t\t\t\tUsername\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\t\tPassword\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-reset slot=\"reset\" type=\"form\" size=\"icon\" color=\"warning\"></smoothly-input-reset>\n\t\t\t\t\t<smoothly-input-submit slot=\"submit\"></smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { C as Color } from './p-8e1e509d.js';
|
|
|
3
3
|
import './p-390767c7.js';
|
|
4
4
|
import './p-47ea6b68.js';
|
|
5
5
|
import { L as Looks, d as defineCustomElement$h } from './p-ca69a0ef.js';
|
|
6
|
-
import { d as defineCustomElement$o } from './p-
|
|
6
|
+
import { d as defineCustomElement$o } from './p-306f9cb3.js';
|
|
7
7
|
import { d as defineCustomElement$n } from './p-5b16ff97.js';
|
|
8
8
|
import { d as defineCustomElement$m } from './p-4f80c811.js';
|
|
9
9
|
import { d as defineCustomElement$l } from './p-f770567b.js';
|
|
@@ -13,11 +13,11 @@ import { d as defineCustomElement$i } from './p-4c6fe645.js';
|
|
|
13
13
|
import { d as defineCustomElement$g } from './p-c63db1c1.js';
|
|
14
14
|
import { d as defineCustomElement$f } from './p-0b16cab5.js';
|
|
15
15
|
import { d as defineCustomElement$e } from './p-b1db8b28.js';
|
|
16
|
-
import { d as defineCustomElement$d } from './p-
|
|
17
|
-
import { d as defineCustomElement$c } from './p-
|
|
16
|
+
import { d as defineCustomElement$d } from './p-09934532.js';
|
|
17
|
+
import { d as defineCustomElement$c } from './p-2b111073.js';
|
|
18
18
|
import { d as defineCustomElement$b } from './p-f2fc107c.js';
|
|
19
19
|
import { d as defineCustomElement$a } from './p-9b4a2430.js';
|
|
20
|
-
import { d as defineCustomElement$9 } from './p-
|
|
20
|
+
import { d as defineCustomElement$9 } from './p-498755ab.js';
|
|
21
21
|
import { d as defineCustomElement$8 } from './p-b20e3206.js';
|
|
22
22
|
import { d as defineCustomElement$7 } from './p-79474a9a.js';
|
|
23
23
|
import { d as defineCustomElement$6 } from './p-a071eaed.js';
|
|
@@ -25,7 +25,7 @@ import { d as defineCustomElement$5 } from './p-4c8ef04f.js';
|
|
|
25
25
|
import { d as defineCustomElement$4 } from './p-083143a9.js';
|
|
26
26
|
import { d as defineCustomElement$3 } from './p-edcdcc51.js';
|
|
27
27
|
import { d as defineCustomElement$2 } from './p-c77944e7.js';
|
|
28
|
-
import { d as defineCustomElement$1 } from './p-
|
|
28
|
+
import { d as defineCustomElement$1 } from './p-45ff39e4.js';
|
|
29
29
|
|
|
30
30
|
const styleCss = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}.vertical.sc-smoothly-input-demo-standard-h{width:100%;row-gap:0;position:relative}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;grid-template-columns:repeat(auto-fill, 14rem);gap:.5rem}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{display:none}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::before,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::after{content:\"\";pointer-events:none;right:0;width:100vw;position:absolute;z-index:2;border-top:1px dotted black}.sc-smoothly-input-demo-standard-h:not(.vertical) .guide-lines.sc-smoothly-input-demo-standard{display:none}.guide-lines.sc-smoothly-input-demo-standard{text-align:end;justify-self:center;align-content:center}.guide-lines.sc-smoothly-input-demo-standard::before{top:1rem}.guide-lines.sc-smoothly-input-demo-standard::after{top:2rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::before{top:1.05rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::after{top:2.3rem}";
|
|
31
31
|
const SmoothlyInputDemoStandardStyle0 = styleCss;
|
|
@@ -197,4 +197,4 @@ defineCustomElement();
|
|
|
197
197
|
|
|
198
198
|
export { SmoothlyInputDemoStandard as S, defineCustomElement as d };
|
|
199
199
|
|
|
200
|
-
//# sourceMappingURL=p-
|
|
200
|
+
//# sourceMappingURL=p-95404634.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-f9fe97a3.js","mappings":"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","names":[],"sources":["src/components/input/demo/standard/style.css?tag=smoothly-input-demo-standard&encapsulation=scoped","src/components/input/demo/standard/index.tsx"],"sourcesContent":[":host {\n\twidth: 50%;\n\tmargin: auto;\n}\n\n:host h2,\n:host p {\n\tmargin: .5rem 0;\n}\ndiv.input-wrapper {\n\tdisplay: grid;\n\tmargin-top: 1rem;\n\tgrid-template-columns: 2fr 1fr;\n\tgap: 1rem;\n\tposition: relative;\n\tjustify-content: space-around;\n}\ndiv.input-wrapper > [name] {\n\tgrid-column: 1 / 2;\n}\ndiv.input-wrapper > .width {\n\twidth: 100%;\n\ttext-align: center;\n\tborder-bottom: 1px dashed black;\n}\ndiv.input-wrapper > .height {\n\talign-content: center;\n\tgrid-column: 2 / 3;\n\tborder-left: 1px dashed black;\n\tpadding-left: 1rem;\n\tcontent: \"hello\";\n}\ndiv.input-wrapper > .left-padding {\n\twidth: 0.5rem;\n\tgrid-column: 1 / 2;\n\twhite-space: nowrap;\n\toverflow: visible;\n\tposition: relative;\n\tcursor: default;\n}\ndiv.input-wrapper > .left-padding::before {\n\tcontent: \"\";\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 1.5rem;\n\tbottom: -1rem;\n\tborder: 1px dashed black;\n\tz-index: 2;\n}\ndiv.input-wrapper > .left-padding:hover::before { \n\tbottom: -100vh;\n}\n\n\n/* --- vertical --- */\n\n:host.vertical {\n\twidth: 100%;\n\trow-gap: 0;\n\tposition: relative;\n}\n:host.vertical > div.input-wrapper {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, 14rem);\n\tgap: .5rem;\n}\n:host.vertical > div.input-wrapper > .width,\n:host.vertical > div.input-wrapper > .height,\n:host.vertical > div.input-wrapper > .left-padding {\n\tdisplay: none;\n}\n\n\n:host.vertical > div.input-wrapper > .guide-lines::before,\n:host.vertical > div.input-wrapper > .guide-lines::after {\n\tcontent: \"\";\n\tpointer-events: none;\n\tright: 0;\n\twidth: 100vw;\n\tposition: absolute;\n\tz-index: 2;\n\tborder-top: 1px dotted black;\n}\n\n:host:not(.vertical) .guide-lines {\n\tdisplay: none;\n}\n\n.guide-lines {\n\ttext-align: end;\n\tjustify-self: center;\n align-content: center;\n}\n\n.guide-lines::before {\n\ttop: 1rem;\n}\n.guide-lines::after {\n\ttop: 2rem;\n}\n.guide-lines.show-label::before {\n\ttop: 1.05rem;\n}\n.guide-lines.show-label::after {\n\ttop: 2.3rem;\n}\n","import { Component, Element, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Color } from \"../../../../model\"\nimport { Looks } from \"../../Looks\"\n\ntype Options = {\n\tlooks?: Looks\n\treadonly?: boolean\n\tcolor?: Color\n\tvertical?: boolean\n\tshowLabel?: boolean\n\tplaceholder?: boolean\n\tborderRadius?: number\n}\n\n@Component({\n\ttag: \"smoothly-input-demo-standard\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemoStandard {\n\t@Element() element: HTMLElement\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() options: Options = { showLabel: true }\n\n\tconnectedCallback() {\n\t\tthis.updateInputHeightText()\n\t}\n\tcomponentDidRender() {\n\t\tthis.updateInputHeightText()\n\t}\n\n\tupdateInputHeightText() {\n\t\tconst rootFontSize = Number(getComputedStyle(document.documentElement).fontSize.replace(\"px\", \"\"))\n\t\tthis.element.querySelectorAll(\".height\").forEach((el: HTMLDivElement) => {\n\t\t\tconst height = el.clientHeight\n\t\t\tel.innerHTML = `<b>${height / rootFontSize}rem</b> (${height}pixels)`\n\t\t})\n\t}\n\n\trender() {\n\t\tconst placeholder = this.options.placeholder ? \"placeholder\" : undefined\n\t\treturn (\n\t\t\t<Host class={{ vertical: !!this.options.vertical }}>\n\t\t\t\t<div class=\"description\">\n\t\t\t\t\t<h2>Input Standard</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tHeight of input should be <code>3rem</code> including border. This is should result in a 48 pixel height at\n\t\t\t\t\t\t100% zoom, assuming a root font-size of 16 pixels.\n\t\t\t\t\t</p>\n\t\t\t\t\t<smoothly-form looks={\"grid\"} onSmoothlyFormInput={(e: CustomEvent<Options>) => (this.options = e.detail)}>\n\t\t\t\t\t\t<smoothly-input-select name=\"looks\">\n\t\t\t\t\t\t\t<span slot=\"label\">Looks</span>\n\t\t\t\t\t\t\t{Looks.types.map(l => (\n\t\t\t\t\t\t\t\t<smoothly-item value={l}>{l}</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"readonly\">Readonly</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-select name=\"color\">\n\t\t\t\t\t\t\t<span slot=\"label\">Color</span>\n\t\t\t\t\t\t\t{Color.types.map(c => (\n\t\t\t\t\t\t\t\t<smoothly-item value={c}>\n\t\t\t\t\t\t\t\t\t<span color={c}>{c}</span>\n\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"vertical\">Vertical Layout</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"showLabel\" checked={this.options.showLabel}>\n\t\t\t\t\t\t\tShow Label\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"placeholder\" checked={this.options.placeholder}>\n\t\t\t\t\t\t\tPlaceholder\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\t\tlabel={\"Border Radius (rem)\"}\n\t\t\t\t\t\t\tname={\"borderRadius\"}\n\t\t\t\t\t\t\tvalue={this.options.borderRadius}\n\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\tmax={2}\n\t\t\t\t\t\t\tstep={0.25}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</smoothly-form>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"input-wrapper\" style={{ \"--smoothly-input-border-radius\": `${this.options.borderRadius}rem` }}>\n\t\t\t\t\t<div class=\"width\">100%</div>\n\t\t\t\t\t<div class=\"left-padding\">0.5rem - left padding</div>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"text\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Text</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-select\n\t\t\t\t\t\tname=\"month\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Select</label>}\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-radio\n\t\t\t\t\t\tname=\"radio\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Radio</label>}\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-file\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span slot={\"label\"}>File</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\tname={\"range\"}\n\t\t\t\t\t\tlabel={this.options.showLabel ? \"Range\" : undefined}\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-color\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Color</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-color>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date Range</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<div class=\"height\"></div>\n\t\t\t\t\t<div class={{ \"guide-lines\": true, \"show-label\": !!this.options.showLabel }}>\n\t\t\t\t\t\t{this.options.showLabel ? \"Aligned labels & values\" : \"Center values\"}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-95404634.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,w1FAAw1F,CAAC;AAC12F,wCAAe,QAAQ;;MCmBV,yBAAyB;;;;wBAED,EAAE,KAAK,EAAE,CAAC,EAAE;uBACpB,EAAE,SAAS,EAAE,IAAI,EAAE;;IAE/C,iBAAiB;QAChB,IAAI,CAAC,qBAAqB,EAAE,CAAA;KAC5B;IACD,kBAAkB;QACjB,IAAI,CAAC,qBAAqB,EAAE,CAAA;KAC5B;IAED,qBAAqB;QACpB,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAA;QAClG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAkB;YACnE,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAA;YAC9B,EAAE,CAAC,SAAS,GAAG,MAAM,MAAM,GAAG,YAAY,YAAY,MAAM,SAAS,CAAA;SACrE,CAAC,CAAA;KACF;IAED,MAAM;QACL,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,CAAA;QACxE,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IACjD,4DAAK,KAAK,EAAC,aAAa,IACvB,8EAAuB,EACvB,0FAC2B,sEAAiB,wHAExC,EACJ,sEAAe,KAAK,EAAE,MAAM,EAAE,mBAAmB,EAAE,CAAC,CAAuB,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,IACxG,8EAAuB,IAAI,EAAC,OAAO,IAClC,6DAAM,IAAI,EAAC,OAAO,YAAa,EAC9B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KACjB,qBAAe,KAAK,EAAE,CAAC,IAAG,CAAC,CAAiB,CAC5C,CAAC,CACqB,EACxB,gFAAyB,IAAI,EAAC,UAAU,eAAmC,EAC3E,8EAAuB,IAAI,EAAC,OAAO,IAClC,6DAAM,IAAI,EAAC,OAAO,YAAa,EAC9B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KACjB,qBAAe,KAAK,EAAE,CAAC,IACtB,YAAM,KAAK,EAAE,CAAC,IAAG,CAAC,CAAQ,CACX,CAChB,CAAC,EACF,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACZ,EACxB,gFAAyB,IAAI,EAAC,UAAU,sBAA0C,EAClF,gFAAyB,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,iBAE/C,EAC1B,gFAAyB,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,kBAEnD,EAC1B,6EACC,KAAK,EAAE,qBAAqB,EAC5B,IAAI,EAAE,cAAc,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,EAChC,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,IAAI,GACT,CACa,CACX,EACN,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,gCAAgC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,KAAK,EAAE,IACxG,4DAAK,KAAK,EAAC,OAAO,WAAW,EAC7B,4DAAK,KAAK,EAAC,cAAc,4BAA4B,EACrD,uEACC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,IAChC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,sEAAiB,EAC5C,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACnB,EACjB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,8EACC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,IACxB,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,8DAAO,IAAI,EAAC,OAAO,aAAe,EAC7D,sEAAe,KAAK,EAAC,GAAG,cAAwB,EAChD,sEAAe,KAAK,EAAC,GAAG,eAAyB,EACjD,sEAAe,KAAK,EAAC,GAAG,YAAsB,EAC9C,sEAAe,KAAK,EAAC,GAAG,YAAsB,EAC9C,sEAAe,KAAK,EAAC,GAAG,UAAoB,EAC5C,sEAAe,KAAK,EAAC,GAAG,WAAqB,EAC7C,sEAAe,KAAK,EAAC,GAAG,WAAqB,EAC7C,sEAAe,KAAK,EAAC,GAAG,aAAuB,EAC/C,sEAAe,KAAK,EAAC,GAAG,gBAA0B,EAClD,sEAAe,KAAK,EAAC,IAAI,cAAwB,EACjD,sEAAe,KAAK,EAAC,IAAI,eAAyB,EAClD,sEAAe,KAAK,EAAC,IAAI,eAAyB,EAClD,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACZ,EACxB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,gFACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,YAEA,EAC1B,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,6EACC,IAAI,EAAC,OAAO,EACZ,SAAS,QACT,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,IAChC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,8DAAO,IAAI,EAAC,OAAO,YAAc,EAC5D,kFAA2B,KAAK,EAAE,OAAO,cAAqC,EAC9E,kFAA2B,QAAQ,QAAC,KAAK,EAAE,QAAQ,cAEvB,EAC5B,kFAA2B,KAAK,EAAE,OAAO,cAAqC,EAC9E,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACb,EACvB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,4EACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,IAChC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,6DAAM,IAAI,EAAE,OAAO,WAAa,EAC3D,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACd,EACtB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,6EACC,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,IACzB,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACb,EACvB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,6EACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,IAChC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,uEAAkB,EAC7C,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACb,EACvB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,4EACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,IAChC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,sEAAiB,EAC5C,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACd,EACtB,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAE1B,kFACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EACzB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,IAChC,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,4EAAuB,EAClD,6EAAsB,IAAI,EAAC,KAAK,GAAG,CACR,EAC5B,4DAAK,KAAK,EAAC,QAAQ,GAAO,EAC1B,4DAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IACzE,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,yBAAyB,GAAG,eAAe,CAChE,CACD,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/demo/standard/style.css?tag=smoothly-input-demo-standard&encapsulation=scoped","src/components/input/demo/standard/index.tsx"],"sourcesContent":[":host {\n\twidth: 50%;\n\tmargin: auto;\n}\n\n:host h2,\n:host p {\n\tmargin: .5rem 0;\n}\ndiv.input-wrapper {\n\tdisplay: grid;\n\tmargin-top: 1rem;\n\tgrid-template-columns: 2fr 1fr;\n\tgap: 1rem;\n\tposition: relative;\n\tjustify-content: space-around;\n}\ndiv.input-wrapper > [name] {\n\tgrid-column: 1 / 2;\n}\ndiv.input-wrapper > .width {\n\twidth: 100%;\n\ttext-align: center;\n\tborder-bottom: 1px dashed black;\n}\ndiv.input-wrapper > .height {\n\talign-content: center;\n\tgrid-column: 2 / 3;\n\tborder-left: 1px dashed black;\n\tpadding-left: 1rem;\n\tcontent: \"hello\";\n}\ndiv.input-wrapper > .left-padding {\n\twidth: 0.5rem;\n\tgrid-column: 1 / 2;\n\twhite-space: nowrap;\n\toverflow: visible;\n\tposition: relative;\n\tcursor: default;\n}\ndiv.input-wrapper > .left-padding::before {\n\tcontent: \"\";\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 1.5rem;\n\tbottom: -1rem;\n\tborder: 1px dashed black;\n\tz-index: 2;\n}\ndiv.input-wrapper > .left-padding:hover::before { \n\tbottom: -100vh;\n}\n\n\n/* --- vertical --- */\n\n:host.vertical {\n\twidth: 100%;\n\trow-gap: 0;\n\tposition: relative;\n}\n:host.vertical > div.input-wrapper {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, 14rem);\n\tgap: .5rem;\n}\n:host.vertical > div.input-wrapper > .width,\n:host.vertical > div.input-wrapper > .height,\n:host.vertical > div.input-wrapper > .left-padding {\n\tdisplay: none;\n}\n\n\n:host.vertical > div.input-wrapper > .guide-lines::before,\n:host.vertical > div.input-wrapper > .guide-lines::after {\n\tcontent: \"\";\n\tpointer-events: none;\n\tright: 0;\n\twidth: 100vw;\n\tposition: absolute;\n\tz-index: 2;\n\tborder-top: 1px dotted black;\n}\n\n:host:not(.vertical) .guide-lines {\n\tdisplay: none;\n}\n\n.guide-lines {\n\ttext-align: end;\n\tjustify-self: center;\n align-content: center;\n}\n\n.guide-lines::before {\n\ttop: 1rem;\n}\n.guide-lines::after {\n\ttop: 2rem;\n}\n.guide-lines.show-label::before {\n\ttop: 1.05rem;\n}\n.guide-lines.show-label::after {\n\ttop: 2.3rem;\n}\n","import { Component, Element, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Color } from \"../../../../model\"\nimport { Looks } from \"../../Looks\"\n\ntype Options = {\n\tlooks?: Looks\n\treadonly?: boolean\n\tcolor?: Color\n\tvertical?: boolean\n\tshowLabel?: boolean\n\tplaceholder?: boolean\n\tborderRadius?: number\n}\n\n@Component({\n\ttag: \"smoothly-input-demo-standard\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemoStandard {\n\t@Element() element: HTMLElement\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() options: Options = { showLabel: true }\n\n\tconnectedCallback() {\n\t\tthis.updateInputHeightText()\n\t}\n\tcomponentDidRender() {\n\t\tthis.updateInputHeightText()\n\t}\n\n\tupdateInputHeightText() {\n\t\tconst rootFontSize = Number(getComputedStyle(document.documentElement).fontSize.replace(\"px\", \"\"))\n\t\tthis.element.querySelectorAll(\".height\").forEach((el: HTMLDivElement) => {\n\t\t\tconst height = el.clientHeight\n\t\t\tel.innerHTML = `<b>${height / rootFontSize}rem</b> (${height}pixels)`\n\t\t})\n\t}\n\n\trender() {\n\t\tconst placeholder = this.options.placeholder ? \"placeholder\" : undefined\n\t\treturn (\n\t\t\t<Host class={{ vertical: !!this.options.vertical }}>\n\t\t\t\t<div class=\"description\">\n\t\t\t\t\t<h2>Input Standard</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tHeight of input should be <code>3rem</code> including border. This is should result in a 48 pixel height at\n\t\t\t\t\t\t100% zoom, assuming a root font-size of 16 pixels.\n\t\t\t\t\t</p>\n\t\t\t\t\t<smoothly-form looks={\"grid\"} onSmoothlyFormInput={(e: CustomEvent<Options>) => (this.options = e.detail)}>\n\t\t\t\t\t\t<smoothly-input-select name=\"looks\">\n\t\t\t\t\t\t\t<span slot=\"label\">Looks</span>\n\t\t\t\t\t\t\t{Looks.types.map(l => (\n\t\t\t\t\t\t\t\t<smoothly-item value={l}>{l}</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"readonly\">Readonly</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-select name=\"color\">\n\t\t\t\t\t\t\t<span slot=\"label\">Color</span>\n\t\t\t\t\t\t\t{Color.types.map(c => (\n\t\t\t\t\t\t\t\t<smoothly-item value={c}>\n\t\t\t\t\t\t\t\t\t<span color={c}>{c}</span>\n\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"vertical\">Vertical Layout</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"showLabel\" checked={this.options.showLabel}>\n\t\t\t\t\t\t\tShow Label\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"placeholder\" checked={this.options.placeholder}>\n\t\t\t\t\t\t\tPlaceholder\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\t\tlabel={\"Border Radius (rem)\"}\n\t\t\t\t\t\t\tname={\"borderRadius\"}\n\t\t\t\t\t\t\tvalue={this.options.borderRadius}\n\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\tmax={2}\n\t\t\t\t\t\t\tstep={0.25}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</smoothly-form>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"input-wrapper\" style={{ \"--smoothly-input-border-radius\": `${this.options.borderRadius}rem` }}>\n\t\t\t\t\t<div class=\"width\">100%</div>\n\t\t\t\t\t<div class=\"left-padding\">0.5rem - left padding</div>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"text\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Text</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-select\n\t\t\t\t\t\tname=\"month\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Select</label>}\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-radio\n\t\t\t\t\t\tname=\"radio\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Radio</label>}\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-file\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span slot={\"label\"}>File</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\tname={\"range\"}\n\t\t\t\t\t\tlabel={this.options.showLabel ? \"Range\" : undefined}\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-color\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Color</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-color>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date Range</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<div class=\"height\"></div>\n\t\t\t\t\t<div class={{ \"guide-lines\": true, \"show-label\": !!this.options.showLabel }}>\n\t\t\t\t\t\t{this.options.showLabel ? \"Aligned labels & values\" : \"Center values\"}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { D as Date } from './p-390767c7.js';
|
|
|
3
3
|
import { C as Color } from './p-8e1e509d.js';
|
|
4
4
|
import { N as Notice } from './p-ef01331e.js';
|
|
5
5
|
import './p-47ea6b68.js';
|
|
6
|
-
import { d as defineCustomElement$b } from './p-
|
|
6
|
+
import { d as defineCustomElement$b } from './p-306f9cb3.js';
|
|
7
7
|
import { d as defineCustomElement$a } from './p-4f80c811.js';
|
|
8
8
|
import { d as defineCustomElement$9 } from './p-d2d74dcd.js';
|
|
9
9
|
import { d as defineCustomElement$8 } from './p-f770567b.js';
|
|
@@ -173,4 +173,4 @@ defineCustomElement();
|
|
|
173
173
|
|
|
174
174
|
export { SmoothlyDisplayDemo as S, defineCustomElement as d };
|
|
175
175
|
|
|
176
|
-
//# sourceMappingURL=p-
|
|
176
|
+
//# sourceMappingURL=p-980ec6be.js.map
|