smoothly 1.2.1-alpha.34 → 1.2.1-alpha.36

package/dist/components/{p-0c9d0809.js.map → p-9b4a2430.js.map}

@@ -1 +1 @@
-{"file":"p-0c9d0809.js","mappings":"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","names":["isoly.Date","tidily.format"],"sources":["src/components/input/date/range/style.scss?tag=smoothly-input-date-range&encapsulation=scoped","src/components/input/date/range/index.tsx"],"sourcesContent":["@import \"../../shared.css\";\n\n:host {\n\tposition: relative;\n\tdisplay: flex;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\n\t&:focus-within smoothly-input {\n\t\toutline: none;\n\t}\n}\n\n:host>section>smoothly-input>div>input {\n\tcursor: pointer;\n}\n\n:host[readonly],\n:host[readonly]>section>smoothly-input>div>input {\n\tcursor: not-allowed;\n}\n\n:host>nav {\n\tposition: absolute;\n\tz-index: 10;\n\ttop: 4em;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tmax-width: 22em;\n\tmin-width: 18em;\n}\n\n:host>nav>smoothly-calendar::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 1px;\n\tleft: -7em;\n\tz-index: 9;\n\ttransform: translate(10em, -0.55em) rotate(45deg);\n\twidth: 1em;\n\theight: 1em;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tborder-top: 1px solid rgb(var(--smoothly-input-border));\n\tborder-left: 1px solid rgb(var(--smoothly-input-border));\n}\n\n:host>section {\n\tdisplay: flex;\n\twidth: 100%;\n\tbackground-color: var(--smoothly-input-background);\n\tborder-radius: 0.25rem;\n\tcursor: pointer;\n}\n\n:host>section>smoothly-input {\n\tmin-width: 15rem;\n\tbackground-color: transparent;\n\t--input-min-height: calc(var(--input-min-height) - 2px);\n}\n\n:host>section>span {\n\tpadding: 0.5em 0.2em 0.5em 0.2em;\n\talign-self: center;\n}\n\n:host>span.icons {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { tidily } from \"tidily\"\nimport { Clearable } from \"../../Clearable\"\nimport { Editable } from \"../../Editable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyInputDateRange implements Clearable, Input, Editable {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true }) name: string = \"dateRange\"\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) start: isoly.Date | undefined\n\t@Prop({ mutable: true }) end: isoly.Date | undefined\n\t@Prop() placeholder = \"from — to\"\n\t@Prop() invalid?: boolean = false\n\t@Prop() max?: isoly.Date\n\t@Prop() min?: isoly.Date\n\t@Prop({ mutable: true }) changed = false\n\tparent: Editable | undefined\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\tprivate initialStart?: isoly.Date\n\tprivate initialEnd?: isoly.Date\n\t@State() value?: isoly.DateRange\n\t@State() open: boolean\n\t@Event() smoothlyInput: EventEmitter<{ [name: string]: isoly.DateRange | undefined }>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.setInitialValue()\n\t\tthis.updateValue()\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.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\tthis.start && this.end && this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.listener.changed?.(this)\n\t}\n\t// TODO: disable search fields in month selectors so that the input becomes typeable and then fix input handler\n\tinputHandler(data: Data) {\n\t\tconst split = \"dateRangeInput\" in data && typeof data.dateRangeInput == \"string\" && data.dateRangeInput.split(\" - \")\n\t\tif (split && split.length == 2 && isoly.Date.is(split[0]) && isoly.Date.is(split[1])) {\n\t\t\tthis.start = split[0]\n\t\t\tthis.end = split[1]\n\t\t}\n\t}\n\t@Watch(\"start\")\n\t@Watch(\"end\")\n\tupdateValue() {\n\t\tthis.value = this.start && this.end ? { start: this.start, end: this.end } : undefined\n\t}\n\t@Watch(\"value\")\n\tvalueChanged() {\n\t\tthis.changed = this.initialStart != this.start || this.initialEnd != this.end\n\t\tthis.listener.changed?.(this)\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputDateRange) => void>): void {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tonWindowClick(event: Event): void {\n\t\t!event.composedPath().includes(this.element) && this.open && (this.open = !this.open)\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<isoly.DateRange | undefined> {\n\t\treturn this.start && this.end ? { start: this.start, end: this.end } : undefined\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>) {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync edit(editable: boolean) {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset() {\n\t\tthis.start = this.initialStart\n\t\tthis.end = this.initialEnd\n\t}\n\t@Method()\n\tasync setInitialValue() {\n\t\tthis.initialStart = this.start\n\t\tthis.initialEnd = this.end\n\t\tthis.changed = false\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t\tthis.smoothlyInput.emit({ [this.name]: undefined })\n\t}\n\trender() {\n\t\tconst locale = navigator.language as isoly.Locale\n\t\treturn (\n\t\t\t<Host tabindex={0}>\n\t\t\t\t<section onClick={() => !this.readonly && (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\" // TODO: date-range tidily thing\n\t\t\t\t\t\tname=\"dateRangeInput\"\n\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tthis.start && this.end\n\t\t\t\t\t\t\t\t? `${tidily.format(this.start, \"date\", locale)} — ${tidily.format(this.end, \"date\", locale)}`\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.inputHandler(e.detail)\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</section>\n\t\t\t\t<span class={\"icons\"}>\n\t\t\t\t\t<slot name={\"end\"}></slot>\n\t\t\t\t</span>\n\t\t\t\t{this.open && (\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\t\tonSmoothlyValueChange={e => e.stopPropagation()}\n\t\t\t\t\t\t\tonSmoothlyStartChange={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.start = e.detail\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSmoothlyEndChange={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.end = e.detail\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSmoothlyDateSet={e => e.stopPropagation()}\n\t\t\t\t\t\t\tonSmoothlyDateRangeSet={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.open = false\n\t\t\t\t\t\t\t\tthis.smoothlyInput.emit({ [this.name]: e.detail })\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.start}\n\t\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</nav>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-9b4a2430.js","mappings":";;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,gqKAAgqK,CAAC;AAClrK,qCAAe,QAAQ;;MCaV,sBAAsB;;;;;;;;QAe1B,aAAQ,GAAsD,EAAE,CAAA;oBAbhC,WAAW;;;wBAGA,KAAK;yBACnB,IAAI;;;2BAGnB,WAAW;uBACL,KAAK;;;uBAGE,KAAK;;;;IAYxC,iBAAiB;;QAChB,IAAI,CAAC,eAAe,EAAE,CAAA;QACtB,IAAI,CAAC,WAAW,EAAE,CAAA;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC3B,CAAC,KAAK,EAAE,KAAK,eAAK,QAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAC,EAAA,CAC3F,CAAA;QACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAA;QAC7D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;QACxG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAA;QACvF,MAAA,MAAA,IAAI,CAAC,QAAQ,EAAC,OAAO,mDAAG,IAAI,CAAC,CAAA;KAC7B;IAED,YAAY,CAAC,IAAU;QACtB,MAAM,KAAK,GAAG,gBAAgB,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,cAAc,IAAI,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACpH,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAIA,IAAU,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAIA,IAAU,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;YACrF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACrB,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;SACnB;KACD;IAGD,WAAW;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,CAAA;KACtF;IAED,YAAY;;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAA;QAC7E,MAAA,MAAA,IAAI,CAAC,QAAQ,EAAC,OAAO,mDAAG,IAAI,CAAC,CAAA;KAC7B;IAED,wBAAwB,CAAC,KAA4D;QACpF,KAAK,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;KACpC;IAED,yBAAyB,CAAC,KAA0C;QACnE,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;YAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;KACxB;IAED,aAAa,CAAC,KAAY;QACzB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACrF;IACD,MAAM,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;YAC5B,MAAM,IAAI,CAAC,UAAU,EAAE,CAAA;KACxB;IAED,MAAM,QAAQ;QACb,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;KACnB;IAED,MAAM,UAAU;QACf,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;KACtB;IAED,MAAM,QAAQ;QACb,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,CAAA;KAChF;IAED,MAAM,MAAM,CAAC,QAAmB,EAAE,QAA6C;QAC9E,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAA;QAClC,QAAQ,CAAC,IAAI,CAAC,CAAA;KACd;IAED,MAAM,IAAI,CAAC,QAAiB;QAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAA;KACzB;IAED,MAAM,KAAK;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAA;QAC9B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAA;KAC1B;IAED,MAAM,eAAe;QACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;QAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;KACpB;IAED,MAAM,KAAK;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,GAAG,GAAG,SAAS,CAAA;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS,EAAE,CAAC,CAAA;KACnD;IACD,MAAM;QACL,MAAM,MAAM,GAAG,SAAS,CAAC,QAAwB,CAAA;QACjD,QACC,EAAC,IAAI,qDAAC,QAAQ,EAAE,CAAC,IAChB,gEAAS,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACjE,uEACC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,gBAAgB,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EACJ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG;kBACnB,GAAGC,MAAa,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAMA,MAAa,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;kBAC3F,SAAS,EAEb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,eAAe,EAAE,CAAC;gBACjB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;aAC3B,IACD,8DAAa,CACG,CACR,EACV,6DAAM,KAAK,EAAE,OAAO,IACnB,6DAAM,IAAI,EAAE,KAAK,GAAS,CACpB,EACN,IAAI,CAAC,IAAI,KACT,8DACC,0EACC,WAAW,EAAE,IAAI,EACjB,qBAAqB,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAC/C,qBAAqB,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;aACrB,EACD,mBAAmB,EAAE,CAAC;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAA;aACnB,EACD,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAC3C,sBAAsB,EAAE,CAAC;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;gBACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAA;aAClD,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,GACZ,CACG,CACN,CACK,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isoly.Date","tidily.format"],"sources":["src/components/input/date/range/style.scss?tag=smoothly-input-date-range&encapsulation=scoped","src/components/input/date/range/index.tsx"],"sourcesContent":["@import \"../../shared.css\";\n\n:host {\n\tposition: relative;\n\tdisplay: flex;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\n\t&:focus-within smoothly-input {\n\t\toutline: none;\n\t}\n}\n\n:host>section>smoothly-input>div>input {\n\tcursor: pointer;\n}\n\n:host[readonly],\n:host[readonly]>section>smoothly-input>div>input {\n\tcursor: not-allowed;\n}\n\n:host>nav {\n\tposition: absolute;\n\tz-index: 10;\n\ttop: 4em;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tmax-width: 22em;\n\tmin-width: 18em;\n}\n\n:host>nav>smoothly-calendar::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 1px;\n\tleft: -7em;\n\tz-index: 9;\n\ttransform: translate(10em, -0.55em) rotate(45deg);\n\twidth: 1em;\n\theight: 1em;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tborder-top: 1px solid rgb(var(--smoothly-input-border));\n\tborder-left: 1px solid rgb(var(--smoothly-input-border));\n}\n\n:host>section {\n\tdisplay: flex;\n\twidth: 100%;\n\tbackground-color: var(--smoothly-input-background);\n\tborder-radius: 0.25rem;\n\tcursor: pointer;\n}\n\n:host>section>smoothly-input {\n\tmin-width: 15rem;\n\tbackground-color: transparent;\n\t--input-min-height: calc(var(--input-min-height) - 2px);\n}\n\n:host>section>span {\n\tpadding: 0.5em 0.2em 0.5em 0.2em;\n\talign-self: center;\n}\n\n:host>span.icons {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { tidily } from \"tidily\"\nimport { Clearable } from \"../../Clearable\"\nimport { Editable } from \"../../Editable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyInputDateRange implements Clearable, Input, Editable {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true }) name: string = \"dateRange\"\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) start: isoly.Date | undefined\n\t@Prop({ mutable: true }) end: isoly.Date | undefined\n\t@Prop() placeholder = \"from — to\"\n\t@Prop() invalid?: boolean = false\n\t@Prop() max?: isoly.Date\n\t@Prop() min?: isoly.Date\n\t@Prop({ mutable: true }) changed = false\n\tparent: Editable | undefined\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\tprivate initialStart?: isoly.Date\n\tprivate initialEnd?: isoly.Date\n\t@State() value?: isoly.DateRange\n\t@State() open: boolean\n\t@Event() smoothlyInput: EventEmitter<{ [name: string]: isoly.DateRange | undefined }>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.setInitialValue()\n\t\tthis.updateValue()\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.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\tthis.start && this.end && this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.listener.changed?.(this)\n\t}\n\t// TODO: disable search fields in month selectors so that the input becomes typeable and then fix input handler\n\tinputHandler(data: Data) {\n\t\tconst split = \"dateRangeInput\" in data && typeof data.dateRangeInput == \"string\" && data.dateRangeInput.split(\" - \")\n\t\tif (split && split.length == 2 && isoly.Date.is(split[0]) && isoly.Date.is(split[1])) {\n\t\t\tthis.start = split[0]\n\t\t\tthis.end = split[1]\n\t\t}\n\t}\n\t@Watch(\"start\")\n\t@Watch(\"end\")\n\tupdateValue() {\n\t\tthis.value = this.start && this.end ? { start: this.start, end: this.end } : undefined\n\t}\n\t@Watch(\"value\")\n\tvalueChanged() {\n\t\tthis.changed = this.initialStart != this.start || this.initialEnd != this.end\n\t\tthis.listener.changed?.(this)\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputDateRange) => void>): void {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tonWindowClick(event: Event): void {\n\t\t!event.composedPath().includes(this.element) && this.open && (this.open = !this.open)\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<isoly.DateRange | undefined> {\n\t\treturn this.start && this.end ? { start: this.start, end: this.end } : undefined\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>) {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync edit(editable: boolean) {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset() {\n\t\tthis.start = this.initialStart\n\t\tthis.end = this.initialEnd\n\t}\n\t@Method()\n\tasync setInitialValue() {\n\t\tthis.initialStart = this.start\n\t\tthis.initialEnd = this.end\n\t\tthis.changed = false\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t\tthis.smoothlyInput.emit({ [this.name]: undefined })\n\t}\n\trender() {\n\t\tconst locale = navigator.language as isoly.Locale\n\t\treturn (\n\t\t\t<Host tabindex={0}>\n\t\t\t\t<section onClick={() => !this.readonly && (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\" // TODO: date-range tidily thing\n\t\t\t\t\t\tname=\"dateRangeInput\"\n\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tthis.start && this.end\n\t\t\t\t\t\t\t\t? `${tidily.format(this.start, \"date\", locale)} — ${tidily.format(this.end, \"date\", locale)}`\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.inputHandler(e.detail)\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</section>\n\t\t\t\t<span class={\"icons\"}>\n\t\t\t\t\t<slot name={\"end\"}></slot>\n\t\t\t\t</span>\n\t\t\t\t{this.open && (\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\t\tonSmoothlyValueChange={e => e.stopPropagation()}\n\t\t\t\t\t\t\tonSmoothlyStartChange={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.start = e.detail\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSmoothlyEndChange={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.end = e.detail\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSmoothlyDateSet={e => e.stopPropagation()}\n\t\t\t\t\t\t\tonSmoothlyDateRangeSet={e => {\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.open = false\n\t\t\t\t\t\t\t\tthis.smoothlyInput.emit({ [this.name]: e.detail })\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.start}\n\t\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</nav>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-362e1809.js → p-9e0dd271.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$1 } from './p-b5bca419.js';
+import { d as defineCustomElement$1 } from './p-c63db1c1.js';
 
 const styleCss = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
 const SmoothlyBurgerStyle0 = styleCss;
@@ -85,4 +85,4 @@ defineCustomElement();
 
 export { SmoothlyBurger as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-362e1809.js.map
+//# sourceMappingURL=p-9e0dd271.js.map

package/dist/components/{p-362e1809.js.map → p-9e0dd271.js.map}

@@ -1 +1 @@
-{"file":"p-362e1809.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+hBAA+hB,CAAC;AACjjB,6BAAe,QAAQ;;MCMV,cAAc;;;;;;;oBAGqB,KAAK;0BACd,oBAAoB;;;IAK1D,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;QACzD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;YAC9C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;;YAEpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC1C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC7C;IAGD,WAAW;QACV,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACtC;IAGD,YAAY,CAAC,KAAiB;QAC7B,IAAI,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;KACvB;IAGD,aAAa;QACZ,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;QACzD,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3B,IAAI,MAAM,EAAE;gBACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;gBACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;aACjB;iBAAM;gBACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;gBACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;aACjB;YACD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC7C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;SAC1C;QACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;KACrB;IAED,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,6DAAM,KAAK,EAAC,QAAQ,IACnB,sEAAe,IAAI,EAAC,MAAM,GAAG,CACvB,CACD,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/burger/style.css?tag=smoothly-burger&encapsulation=scoped","src/components/burger/index.tsx"],"sourcesContent":[":host([visible]){\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nheight: 100%;\n}\n:host([visible]) .burger smoothly-icon{\n\tfont-size: 1.7em;\n\tcursor: pointer;\n\tmargin-right: 1em;\n}\n:host:not([visible]){\n\tdisplay: none;\n}\n:host:not([open]) smoothly-icon{\n\ttransform: rotate(0deg);\n\ttransition: transform 100ms ease-in-out;\n}\n:host([open]) smoothly-icon{\n\ttransform: rotate(-90deg);\n\ttransition: transform 100ms ease-in-out;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-burger\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyBurger {\n\t@Element() element: HTMLSmoothlyBurgerElement\n\t@Prop({ mutable: true, reflect: true }) visible: boolean\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) mediaQuery = \"(max-width: 900px)\"\n\t@State() history: boolean\n\t@Event() smoothlyNavStatus: EventEmitter<boolean>\n\t@Event() smoothlyVisibleStatus: EventEmitter<boolean>\n\n\tcomponentWillLoad() {\n\t\tthis.history = window.matchMedia(this.mediaQuery).matches\n\t\tif (!window.matchMedia(this.mediaQuery).matches)\n\t\t\tthis.visible = false\n\t\telse\n\t\t\tthis.visible = true\n\t\tthis.smoothlyNavStatus.emit(!this.visible)\n\t\tthis.smoothlyVisibleStatus.emit(this.visible)\n\t}\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.smoothlyNavStatus.emit(this.open)\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.visible)\n\t\t\tthis.open = !this.open\n\t}\n\n\t@Listen(\"resize\", { target: \"window\" })\n\tresizeHandler() {\n\t\tconst result = window.matchMedia(this.mediaQuery).matches\n\t\tif (result != this.history) {\n\t\t\tif (result) {\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.open = false\n\t\t\t} else {\n\t\t\t\tthis.visible = false\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t\tthis.smoothlyVisibleStatus.emit(this.visible)\n\t\t\tthis.smoothlyNavStatus.emit(!this.visible)\n\t\t}\n\t\tthis.history = result\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span class=\"burger\">\n\t\t\t\t\t<smoothly-icon name=\"menu\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-9e0dd271.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,+hBAA+hB,CAAC;AACjjB,6BAAe,QAAQ;;MCMV,cAAc;;;;;;;oBAGqB,KAAK;0BACd,oBAAoB;;;IAK1D,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;QACzD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;YAC9C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;;YAEpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC1C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC7C;IAGD,WAAW;QACV,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACtC;IAGD,YAAY,CAAC,KAAiB;QAC7B,IAAI,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;KACvB;IAGD,aAAa;QACZ,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;QACzD,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3B,IAAI,MAAM,EAAE;gBACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;gBACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;aACjB;iBAAM;gBACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;gBACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;aACjB;YACD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YAC7C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;SAC1C;QACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;KACrB;IAED,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,6DAAM,KAAK,EAAC,QAAQ,IACnB,sEAAe,IAAI,EAAC,MAAM,GAAG,CACvB,CACD,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/burger/style.css?tag=smoothly-burger&encapsulation=scoped","src/components/burger/index.tsx"],"sourcesContent":[":host([visible]){\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nheight: 100%;\n}\n:host([visible]) .burger smoothly-icon{\n\tfont-size: 1.7em;\n\tcursor: pointer;\n\tmargin-right: 1em;\n}\n:host:not([visible]){\n\tdisplay: none;\n}\n:host:not([open]) smoothly-icon{\n\ttransform: rotate(0deg);\n\ttransition: transform 100ms ease-in-out;\n}\n:host([open]) smoothly-icon{\n\ttransform: rotate(-90deg);\n\ttransition: transform 100ms ease-in-out;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-burger\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyBurger {\n\t@Element() element: HTMLSmoothlyBurgerElement\n\t@Prop({ mutable: true, reflect: true }) visible: boolean\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) mediaQuery = \"(max-width: 900px)\"\n\t@State() history: boolean\n\t@Event() smoothlyNavStatus: EventEmitter<boolean>\n\t@Event() smoothlyVisibleStatus: EventEmitter<boolean>\n\n\tcomponentWillLoad() {\n\t\tthis.history = window.matchMedia(this.mediaQuery).matches\n\t\tif (!window.matchMedia(this.mediaQuery).matches)\n\t\t\tthis.visible = false\n\t\telse\n\t\t\tthis.visible = true\n\t\tthis.smoothlyNavStatus.emit(!this.visible)\n\t\tthis.smoothlyVisibleStatus.emit(this.visible)\n\t}\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.smoothlyNavStatus.emit(this.open)\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.visible)\n\t\t\tthis.open = !this.open\n\t}\n\n\t@Listen(\"resize\", { target: \"window\" })\n\tresizeHandler() {\n\t\tconst result = window.matchMedia(this.mediaQuery).matches\n\t\tif (result != this.history) {\n\t\t\tif (result) {\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.open = false\n\t\t\t} else {\n\t\t\t\tthis.visible = false\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t\tthis.smoothlyVisibleStatus.emit(this.visible)\n\t\t\tthis.smoothlyNavStatus.emit(!this.visible)\n\t\t}\n\t\tthis.history = result\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span class=\"burger\">\n\t\t\t\t\t<smoothly-icon name=\"menu\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-f14627ff.js → p-a071eaed.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$1 } from './p-b5bca419.js';
+import { d as defineCustomElement$1 } from './p-c63db1c1.js';
 
 const styleCss = ".sc-smoothly-input-radio-item-h{display:flex;align-items:center;position:relative}.sc-smoothly-input-radio-item-h:hover>*.sc-smoothly-input-radio-item{cursor:pointer}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item:focus-visible+smoothly-icon.sc-smoothly-input-radio-item{outline:2px solid rgb(var(--smoothly-primary-color));border-radius:1px}.sc-smoothly-input-radio-item-h>input.sc-smoothly-input-radio-item{opacity:0;z-index:1;width:1.5em;height:1.5em;position:absolute;transform:translateX(50%)}.sc-smoothly-input-radio-item-h>label.sc-smoothly-input-radio-item{padding:0 .3em;white-space:nowrap}";
 const SmoothlyInputRadioItemStyle0 = styleCss;
@@ -23,7 +23,7 @@ const SmoothlyInputRadioItem = proxyCustomElement(class SmoothlyInputRadioItem e
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (h(Host, { key: 'abf7bcf3e4097671cdb53ec9a7909f10a4a98b73', onClick: () => this.inputHandler() }, h("input", { key: '9a5e3d668f1fdad37f114119a980726025f3fd83', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: '05aa10f3e7f5a8ed0e4e7f8d903df23dcd3d2c14', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: '22f8d1b96b318e90cae673e6405659ccc1bf8b5a' }, h("slot", { key: 'd0a730e5a0cacb96eef896a4a12dfb000fab6bdd' }))));
+        return (h(Host, { key: 'd881877d7a8cd254071fe0202554e25e359a78e5', onClick: () => this.inputHandler() }, h("input", { key: 'ebd98073073f29821aae7ab753f19c3ffea0aec6', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: 'ced600a185b7853039c093d855a699950c8e221c', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: 'fc9b714d55603e377ffe0c9341ec8ce242dc5881' }, h("slot", { key: '6bb1ab286ea926069e31e48fb23415257299ab00' }))));
     }
     get element() { return this; }
     static get style() { return SmoothlyInputRadioItemStyle0; }
@@ -55,4 +55,4 @@ defineCustomElement();
 
 export { SmoothlyInputRadioItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-f14627ff.js.map
+//# sourceMappingURL=p-a071eaed.js.map

package/dist/components/{p-f14627ff.js.map → p-a071eaed.js.map}

@@ -1 +1 @@
-{"file":"p-f14627ff.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,4mBAA4mB,CAAC;AAC9nB,qCAAe,QAAQ;;MCQV,sBAAsB;;;;;;;wBAGiB,KAAK;;;;IAKxD,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAA;QAC/D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,CAAA;KACpC;IACD,YAAY;QACX,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;KAC1G;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACvC,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC/D,sEACC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,EAC5D,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,QAAQ,EAC3C,OAAO,EAAC,QAAQ,GACf,EACF,gEACC,8DAAQ,CACD,CACF,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/radio/item/style.css?tag=smoothly-input-radio-item&encapsulation=scoped","src/components/input/radio/item/index.tsx"],"sourcesContent":[":host {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n}\n\n:host:hover>* {\n\tcursor: pointer;\n}\n\n:host>input:focus-visible+smoothly-icon {\n\toutline: 2px solid rgb(var(--smoothly-primary-color));\n\tborder-radius: 1px;\n}\n\n:host>input {\n\topacity: 0;\n\tz-index: 1;\n\twidth: 1.5em;\n\theight: 1.5em;\n\tposition: absolute;\n\ttransform: translateX(50%);\n}\n\n:host>label {\n\tpadding: 0 .3em;\n\twhite-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\nimport { Looks } from \"../../Looks\"\nimport { Selectable } from \"../Selected\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks?: Looks\n\t@Prop({ mutable: true }) name: string\n\t@Event() smoothlySelect: EventEmitter<Selectable>\n\t@Event() smoothlyRadioItemRegister: EventEmitter<(name: string) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioItemRegister.emit(name => (this.name = name))\n\t\tthis.selected && this.inputHandler()\n\t}\n\tinputHandler(): void {\n\t\tthis.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) })\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler()}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} />\n\t\t\t\t<smoothly-icon\n\t\t\t\t\tname={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\tcolor={this.selected ? \"success\" : \"medium\"}\n\t\t\t\t\ttoolTip=\"Select\"\n\t\t\t\t/>\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-a071eaed.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,4mBAA4mB,CAAC;AAC9nB,qCAAe,QAAQ;;MCQV,sBAAsB;;;;;;;wBAGiB,KAAK;;;;IAKxD,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAA;QAC/D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,CAAA;KACpC;IACD,YAAY;QACX,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;KAC1G;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IACvC,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC/D,sEACC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,EAC5D,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,QAAQ,EAC3C,OAAO,EAAC,QAAQ,GACf,EACF,gEACC,8DAAQ,CACD,CACF,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/radio/item/style.css?tag=smoothly-input-radio-item&encapsulation=scoped","src/components/input/radio/item/index.tsx"],"sourcesContent":[":host {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n}\n\n:host:hover>* {\n\tcursor: pointer;\n}\n\n:host>input:focus-visible+smoothly-icon {\n\toutline: 2px solid rgb(var(--smoothly-primary-color));\n\tborder-radius: 1px;\n}\n\n:host>input {\n\topacity: 0;\n\tz-index: 1;\n\twidth: 1.5em;\n\theight: 1.5em;\n\tposition: absolute;\n\ttransform: translateX(50%);\n}\n\n:host>label {\n\tpadding: 0 .3em;\n\twhite-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\nimport { Looks } from \"../../Looks\"\nimport { Selectable } from \"../Selected\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks?: Looks\n\t@Prop({ mutable: true }) name: string\n\t@Event() smoothlySelect: EventEmitter<Selectable>\n\t@Event() smoothlyRadioItemRegister: EventEmitter<(name: string) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioItemRegister.emit(name => (this.name = name))\n\t\tthis.selected && this.inputHandler()\n\t}\n\tinputHandler(): void {\n\t\tthis.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) })\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler()}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} />\n\t\t\t\t<smoothly-icon\n\t\t\t\t\tname={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\tcolor={this.selected ? \"success\" : \"medium\"}\n\t\t\t\t\ttoolTip=\"Select\"\n\t\t\t\t/>\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-4bd5519b.js → p-a38dbdc4.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h } from './p-f765921a.js';
-import { d as defineCustomElement$5 } from './p-f9770ff7.js';
-import { d as defineCustomElement$4 } from './p-7c5243b2.js';
-import { d as defineCustomElement$3 } from './p-6ead1a42.js';
-import { d as defineCustomElement$2 } from './p-2020cb82.js';
-import { d as defineCustomElement$1 } from './p-b4bb3e74.js';
+import { d as defineCustomElement$5 } from './p-4f80c811.js';
+import { d as defineCustomElement$4 } from './p-f770567b.js';
+import { d as defineCustomElement$3 } from './p-96acfe2c.js';
+import { d as defineCustomElement$2 } from './p-f46dd8e4.js';
+import { d as defineCustomElement$1 } from './p-4c6fe645.js';
 
 const styleCss = "";
 const SmoothlyThemeGuideStyle0 = styleCss;
@@ -15,14 +15,14 @@ const SmoothlyThemeColors = proxyCustomElement(class SmoothlyThemeColors extends
     }
     render() {
         return [
-            h("smoothly-display", { key: '115daaa00fb7a4e0bacb23cbda1ed58cdab2505a' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
-            h("br", { key: '0eacb21aa50f7faebf262e64b5e4c30878f50dc1' }),
-            h("smoothly-display", { key: '5eddcb2c707956bc39e7b675bc61bf222ebfc0cd' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
-            h("br", { key: 'f157bd5d1fd2aa1db645aae1650d5e3711c73a1b' }),
-            h("smoothly-display", { key: '58804f743836a8fc1822dac667724e24b4dca2db' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
-            h("br", { key: 'bad13ec12d0eab96921b00edaab1cc4acba9d94c' }),
-            h("smoothly-display", { key: '4375ae14448373728f92946e9984c55672432beb' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
-            h("br", { key: '357075bdb38d7f2d963dde17c2fd78d88702402d' }),
+            h("smoothly-display", { key: 'd78f620cf75a4531322bf69c0b9edc1ad0760fb0' }, "Tint is used as background to highlight, for example hovering an item in the select menu."),
+            h("br", { key: '82afe82bdbf31fe782fe2a25a13b1786172ce8d9' }),
+            h("smoothly-display", { key: '036aec35c1a3707770e0cc858050d7ad3cf80c2b' }, "Color is used as a normal background or as a background to show that something is selected, for example a selected item in the select menu."),
+            h("br", { key: '6f78be3cf45e8a8a255ee14f8ebfe344f4a2e461' }),
+            h("smoothly-display", { key: '7169ee0c18d1f5e96e4c8f5c813cb88699f3cf49' }, "Shade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint."),
+            h("br", { key: 'c653eb38519794d49abbbc1c50375d624b07fb37' }),
+            h("smoothly-display", { key: '437ed227e0ad31891c165849373cfbea265d333b' }, "One can use the ", "<smoothly-color>", " component to switch between what color set is used.", " "),
+            h("br", { key: 'bd99df5526d7a1178779ba7810acdc2fef644924' }),
         ];
     }
     static get style() { return SmoothlyThemeGuideStyle0; }
@@ -69,4 +69,4 @@ defineCustomElement();
 
 export { SmoothlyThemeColors as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-4bd5519b.js.map
+//# sourceMappingURL=p-a38dbdc4.js.map

package/dist/components/{p-4bd5519b.js.map → p-a38dbdc4.js.map}

@@ -1 +1 @@
-{"file":"p-4bd5519b.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,EAAE,CAAC;AACpB,iCAAe,QAAQ;;MCMV,mBAAmB;;;;;IAC/B,MAAM;QACL,OAAO;YACN,uKAEmB;YACnB,4DAAM;YACN,yNAGmB;YACnB,4DAAM;YACN,yLAEmB;YACnB,4DAAM;YACN,+FACkB,kBAAkB,0DAAsD,GAAG,CAC1E;YACnB,4DAAM;SACN,CAAA;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/theme/guide/style.css?tag=smoothly-theme-guide&encapsulation=scoped","src/components/theme/guide/index.tsx"],"sourcesContent":["","import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-theme-guide\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColors {\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-display>\n\t\t\t\tTint is used as background to highlight, for example hovering an item in the select menu.\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t\t<smoothly-display>\n\t\t\t\tColor is used as a normal background or as a background to show that something is selected, for example a\n\t\t\t\tselected item in the select menu.\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t\t<smoothly-display>\n\t\t\t\tShade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint.\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t\t<smoothly-display>\n\t\t\t\tOne can use the {\"<smoothly-color>\"} component to switch between what color set is used.{\" \"}\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t]\n\t}\n}\n"],"version":3}
+{"file":"p-a38dbdc4.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,EAAE,CAAC;AACpB,iCAAe,QAAQ;;MCMV,mBAAmB;;;;;IAC/B,MAAM;QACL,OAAO;YACN,uKAEmB;YACnB,4DAAM;YACN,yNAGmB;YACnB,4DAAM;YACN,yLAEmB;YACnB,4DAAM;YACN,+FACkB,kBAAkB,0DAAsD,GAAG,CAC1E;YACnB,4DAAM;SACN,CAAA;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/theme/guide/style.css?tag=smoothly-theme-guide&encapsulation=scoped","src/components/theme/guide/index.tsx"],"sourcesContent":["","import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-theme-guide\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColors {\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-display>\n\t\t\t\tTint is used as background to highlight, for example hovering an item in the select menu.\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t\t<smoothly-display>\n\t\t\t\tColor is used as a normal background or as a background to show that something is selected, for example a\n\t\t\t\tselected item in the select menu.\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t\t<smoothly-display>\n\t\t\t\tShade is used as border and for symbols in buttons. It works as a semi-low contrast against color and tint.\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t\t<smoothly-display>\n\t\t\t\tOne can use the {\"<smoothly-color>\"} component to switch between what color set is used.{\" \"}\n\t\t\t</smoothly-display>,\n\t\t\t<br />,\n\t\t]\n\t}\n}\n"],"version":3}

package/dist/components/{p-61a23ca0.js → p-a509a3b5.js}

@@ -4,18 +4,18 @@ import { o as object } from './p-d471066b.js';
 import { f as fromIs } from './p-8e1e509d.js';
 import { N as Notice } from './p-ef01331e.js';
 import './p-47ea6b68.js';
-import { d as defineCustomElement$c } from './p-be6d380e.js';
-import { d as defineCustomElement$b } from './p-e5bd19b5.js';
-import { d as defineCustomElement$a } from './p-76514c29.js';
-import { d as defineCustomElement$9 } from './p-061353e6.js';
-import { d as defineCustomElement$8 } from './p-b5bca419.js';
-import { d as defineCustomElement$7 } from './p-51d51732.js';
-import { d as defineCustomElement$6 } from './p-0c9d0809.js';
-import { d as defineCustomElement$5 } from './p-4380feb9.js';
-import { d as defineCustomElement$4 } from './p-f47eb337.js';
-import { d as defineCustomElement$3 } from './p-9702b067.js';
-import { d as defineCustomElement$2 } from './p-5bbf4b7e.js';
-import { d as defineCustomElement$1 } from './p-0cfd31a4.js';
+import { d as defineCustomElement$c } from './p-306f9cb3.js';
+import { d as defineCustomElement$b } from './p-686ec006.js';
+import { d as defineCustomElement$a } from './p-5b16ff97.js';
+import { d as defineCustomElement$9 } from './p-ca69a0ef.js';
+import { d as defineCustomElement$8 } from './p-c63db1c1.js';
+import { d as defineCustomElement$7 } from './p-0b16cab5.js';
+import { d as defineCustomElement$6 } from './p-9b4a2430.js';
+import { d as defineCustomElement$5 } from './p-b20e3206.js';
+import { d as defineCustomElement$4 } from './p-083143a9.js';
+import { d as defineCustomElement$3 } from './p-631148b4.js';
+import { d as defineCustomElement$2 } from './p-edcdcc51.js';
+import { d as defineCustomElement$1 } from './p-c77944e7.js';
 
 const styleCss = ".sc-smoothly-form-demo-date-range-h{display:block}";
 const SmoothlyFormDemoDateRangeStyle0 = styleCss;
@@ -42,7 +42,7 @@ const SmoothlyFormDemoDateRange = proxyCustomElement(class SmoothlyFormDemoDateR
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: 'f5c929abd5dd00cbe86c0b319183b7f4e727d0dd' }, h("h2", { key: '0dcdeb8de570b990982a5565bda70a8a985798d6' }, "Date-range input"), h("smoothly-form", { key: '02bb8112b2be39fc8c1ca60dd3955ce4d775a5f6', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: 'e97c601501e4a9c7f24c45b447eb569a6bc03d3b', name: "range" }, "Range"), h("smoothly-input-submit", { key: '8c3eb4f6f16a8c86cb5be1f655ec03e192165c5a', slot: "submit" }, h("smoothly-icon", { key: '476f32c1c6d0c0d114db263c07be66ce03a15f25', name: "checkmark-outline" })))));
+        return (h(Host, { key: '022dd0567e2b7bf321d9879b83b49c66cd1f04bb' }, h("h2", { key: 'ce79ae7c7408ce41e1dd8528717d52efb644b8cc' }, "Date-range input"), h("smoothly-form", { key: '9cb3a9b8a32949ea5dd0d472eecfef7793a7409b', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: '6f0f1eea169f5516fe5c994cd80a2369d33e5502', name: "range" }, "Range"), h("smoothly-input-submit", { key: '93e8e2e6f5f3bf7656c6a6753265366b13dfbaef', slot: "submit" }, h("smoothly-icon", { key: '28236dfe106123ad3ebefb3f5e64594d31fa388f', name: "checkmark-outline" })))));
     }
     static get style() { return SmoothlyFormDemoDateRangeStyle0; }
 }, [2, "smoothly-form-demo-date-range"]);
@@ -123,4 +123,4 @@ defineCustomElement();
 
 export { SmoothlyFormDemoDateRange as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-61a23ca0.js.map
+//# sourceMappingURL=p-a509a3b5.js.map

package/dist/components/{p-61a23ca0.js.map → p-a509a3b5.js.map}

@@ -1 +1 @@
-{"file":"p-61a23ca0.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,oDAAoD,CAAC;AACtE,wCAAe,QAAQ;;MCSV,yBAAyB;IALtC;;;;QAOS,cAAS,GAAGA,MAAW,CAA6B;YAC3D,KAAK,EAAEC,MAAW,CAAC,iBAAiB,EAAEC,SAAe,CAAC,EAAE,CAAC;SACzD,CAAC,CAAA;KA6BF;IA5BA,MAAM,aAAa,CAAC,KAA0B;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC3C,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;YACpC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAA;SACtD;aAAM;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;YACvD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;SACzB;QACD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;KAC1B;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,gFAAyB,EACzB,sEACC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAChD,kFAA2B,IAAI,EAAE,OAAO,IAAG,OAAO,CAA6B,EAC/E,8EAAuB,IAAI,EAAE,QAAQ,IACpC,sEAAe,IAAI,EAAE,mBAAmB,GAAI,CACrB,CACT,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","isly.fromIs","isoly.DateRange"],"sources":["src/components/form/demo/date-range/style.css?tag=smoothly-form-demo-date-range&encapsulation=scoped","src/components/form/demo/date-range/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n","import { Component, Event, EventEmitter, h, Host, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { isly } from \"isly\"\nimport { Notice, Submit } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-form-demo-date-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoDateRange {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate validator = isly.object<{ range: isoly.DateRange }>({\n\t\trange: isly.fromIs(\"isoly.DateRange\", isoly.DateRange.is),\n\t})\n\tasync submitHandler(event: CustomEvent<Submit>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tif (!this.validator.is(event.detail.value)) {\n\t\t\tconsole.error(`Type is incomplete.`)\n\t\t\tthis.notice.emit(Notice.failed(`Type is incomplete.`))\n\t\t} else {\n\t\t\tthis.notice.emit(Notice.succeeded(`Type is complete!`))\n\t\t\tevent.detail.result(true)\n\t\t}\n\t\tevent.detail.result(false)\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Date-range input</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks={\"border\"}\n\t\t\t\t\ttype={\"create\"}\n\t\t\t\t\tvalidator={this.validator}\n\t\t\t\t\tonSmoothlyFormSubmit={e => this.submitHandler(e)}>\n\t\t\t\t\t<smoothly-input-date-range name={\"range\"}>{\"Range\"}</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"}>\n\t\t\t\t\t\t<smoothly-icon name={\"checkmark-outline\"} />\n\t\t\t\t\t</smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-a509a3b5.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,oDAAoD,CAAC;AACtE,wCAAe,QAAQ;;MCSV,yBAAyB;IALtC;;;;QAOS,cAAS,GAAGA,MAAW,CAA6B;YAC3D,KAAK,EAAEC,MAAW,CAAC,iBAAiB,EAAEC,SAAe,CAAC,EAAE,CAAC;SACzD,CAAC,CAAA;KA6BF;IA5BA,MAAM,aAAa,CAAC,KAA0B;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC3C,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;YACpC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAA;SACtD;aAAM;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;YACvD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;SACzB;QACD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;KAC1B;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,gFAAyB,EACzB,sEACC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAChD,kFAA2B,IAAI,EAAE,OAAO,IAAG,OAAO,CAA6B,EAC/E,8EAAuB,IAAI,EAAE,QAAQ,IACpC,sEAAe,IAAI,EAAE,mBAAmB,GAAI,CACrB,CACT,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","isly.fromIs","isoly.DateRange"],"sources":["src/components/form/demo/date-range/style.css?tag=smoothly-form-demo-date-range&encapsulation=scoped","src/components/form/demo/date-range/index.tsx"],"sourcesContent":[":host {\n\tdisplay: block;\n}\n","import { Component, Event, EventEmitter, h, Host, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { isly } from \"isly\"\nimport { Notice, Submit } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-form-demo-date-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoDateRange {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate validator = isly.object<{ range: isoly.DateRange }>({\n\t\trange: isly.fromIs(\"isoly.DateRange\", isoly.DateRange.is),\n\t})\n\tasync submitHandler(event: CustomEvent<Submit>): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tif (!this.validator.is(event.detail.value)) {\n\t\t\tconsole.error(`Type is incomplete.`)\n\t\t\tthis.notice.emit(Notice.failed(`Type is incomplete.`))\n\t\t} else {\n\t\t\tthis.notice.emit(Notice.succeeded(`Type is complete!`))\n\t\t\tevent.detail.result(true)\n\t\t}\n\t\tevent.detail.result(false)\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Date-range input</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks={\"border\"}\n\t\t\t\t\ttype={\"create\"}\n\t\t\t\t\tvalidator={this.validator}\n\t\t\t\t\tonSmoothlyFormSubmit={e => this.submitHandler(e)}>\n\t\t\t\t\t<smoothly-input-date-range name={\"range\"}>{\"Range\"}</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"}>\n\t\t\t\t\t\t<smoothly-icon name={\"checkmark-outline\"} />\n\t\t\t\t\t</smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-d35746af.js → p-a560de93.js}

@@ -26,7 +26,7 @@ const SmoothlyNextTableExpandableCell = proxyCustomElement(class SmoothlyNextTab
     }
     render() {
         var _a;
-        return (h(Host, { key: '5443d2dc59b2b1acb8c17e51a3f44ce452902d0b', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("div", { key: '3cc268ce7b32eb3c119cc0a6793360c6c8345e48', onClick: () => this.clickHandler(), class: "content" }, h("slot", { key: '3d595d6411e52f1f9ef57d845e80cca9dcd76244' })), h("div", { key: 'e8388be6dd244f76854005ff04342f828a81f27c', class: "detail" }, h("slot", { key: 'a7e8cae9582890d2afccf61bdcfe48ff505887a7', name: "detail" }))));
+        return (h(Host, { key: '3d39e6ee0042e2aeb858d759cf32e24b582401bb', style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("div", { key: '76f58ea04fff2d99d957bf277800188d9c03224e', onClick: () => this.clickHandler(), class: "content" }, h("slot", { key: 'b4950a570cd39ddfc184314edfa4fe72db9f1fa1' })), h("div", { key: '86bf0fa6dff3855667a125ec3771c8cf0b9a28e5', class: "detail" }, h("slot", { key: '774928608a4a85370fd1d854466036d7a2f6f2f9', name: "detail" }))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -56,4 +56,4 @@ defineCustomElement();
 
 export { SmoothlyNextTableExpandableCell as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-d35746af.js.map
+//# sourceMappingURL=p-a560de93.js.map

package/dist/components/{p-d35746af.js.map → p-a560de93.js.map}

@@ -1 +1 @@
-{"file":"p-d35746af.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uqGAAuqG,CAAC;AACzrG,8CAAe,QAAQ;;MCMV,+BAA+B;;;;;;oBACF,CAAC;oBACK,KAAK;;IAGpD,iBAAiB;QAChB,IAAI,CAAC,uCAAuC,CAAC,IAAI,EAAE,CAAA;KACnD;IAED,MAAM,KAAK;QACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;KACjB;IACD,YAAY;QACX,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;KACtB;IAED,UAAU;QACT,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC1D;IAED,MAAM;;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,4BAA4B,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IACrE,4DAAK,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,IACxD,8DAAQ,CACH,EACN,4DAAK,KAAK,EAAE,QAAQ,IACnB,6DAAM,IAAI,EAAE,QAAQ,GAAI,CACnB,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/next/table/expandable/cell/style.scss?tag=smoothly-next-table-expandable-cell&encapsulation=scoped","src/components/next/table/expandable/cell/index.tsx"],"sourcesContent":["@import \"../arrow.scss\";\n\n:host {\n\tdisplay: contents;\n}\n\n:host>div {\n\tpadding: 0.3rem 1.1rem;\n}\n\n:host>div.content {\n\tgrid-column: span var(--smoothly-table-cell-span, 1);\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\talign-items: center;\n\twhite-space: nowrap;\n\t@include arrow;\n\n\t&:hover {\n\t\t@include arrow-hover;\n\t}\n}\n\n:host[open]>div.content {\n\t@include arrow-open;\n}\n\n:host>div.content:hover {\n\tbackground-color: rgb(var(--smoothly-table-hover-background));\n\tcolor: rgb(var(--smoothly-table-hover-foreground));\n\tstroke: rgb(var(--smoothly-table-hover-foreground));\n\tfill: rgb(var(--smoothly-table-hover-foreground));\n}\n\n:host>div:first-child {\n\tcursor: pointer;\n}\n\n:host>div.detail {\n\tgrid-column: 1 / -1;\n\tgrid-row: 2;\n\tposition: relative;\n}\n\n:host[open]>div.content {\n\tbox-shadow: 1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset,\n\t\t-3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset;\n}\n\n:host[open]>div {\n\tbackground-color: rgb(var(--smoothly-table-expanded-background));\n\tcolor: rgb(var(--smoothly-table-expanded-foreground));\n\tstroke: rgb(var(--smoothly-table-expanded-foreground));\n\tfill: rgb(var(--smoothly-table-expanded-foreground));\n}\n\n:host:not([open])>div.detail {\n\tdisplay: none;\n}\n\n:host>div.detail::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\ttop: 0;\n\tbottom: 0;\n\tleft: -1em;\n\twidth: 1em;\n\tbackground-color: rgb(var(--smoothly-table-expanded-background));\n\tborder-left: 0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));\n\tbox-shadow: 2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)),\n\t\t0px 0px 1px 0px rgb(var(--smoothly-table-border));\n}\n\n:host>div.detail::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\ttop: 0;\n\tbottom: 0;\n\tright: -1em;\n\twidth: 1em;\n\tbackground-color: rgb(var(--smoothly-table-expanded-background));\n\tbox-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)),\n\t\t0px 0px 1px 0px rgb(var(--smoothly-table-border));\n}\n","import { Component, Event, EventEmitter, h, Host, Method, Prop, VNode, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-next-table-expandable-cell\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyNextTableExpandableCell {\n\t@Prop({ reflect: true }) span?: number = 1\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Event() smoothlyNextTableExpandableCellChange: EventEmitter<boolean>\n\t@Event() smoothlyNextTableExpandableCellRegister: EventEmitter<void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyNextTableExpandableCellRegister.emit()\n\t}\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.open = false\n\t}\n\tclickHandler(): void {\n\t\tthis.open = !this.open\n\t}\n\t@Watch(\"open\")\n\topenChange() {\n\t\tthis.smoothlyNextTableExpandableCellChange.emit(this.open)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host style={{ \"--smoothly-table-cell-span\": this.span?.toString(10) }}>\n\t\t\t\t<div onClick={() => this.clickHandler()} class={\"content\"}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t<div class={\"detail\"}>\n\t\t\t\t\t<slot name={\"detail\"} />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-a560de93.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uqGAAuqG,CAAC;AACzrG,8CAAe,QAAQ;;MCMV,+BAA+B;;;;;;oBACF,CAAC;oBACK,KAAK;;IAGpD,iBAAiB;QAChB,IAAI,CAAC,uCAAuC,CAAC,IAAI,EAAE,CAAA;KACnD;IAED,MAAM,KAAK;QACV,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;KACjB;IACD,YAAY;QACX,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;KACtB;IAED,UAAU;QACT,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC1D;IAED,MAAM;;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,4BAA4B,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,IACrE,4DAAK,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,IACxD,8DAAQ,CACH,EACN,4DAAK,KAAK,EAAE,QAAQ,IACnB,6DAAM,IAAI,EAAE,QAAQ,GAAI,CACnB,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/next/table/expandable/cell/style.scss?tag=smoothly-next-table-expandable-cell&encapsulation=scoped","src/components/next/table/expandable/cell/index.tsx"],"sourcesContent":["@import \"../arrow.scss\";\n\n:host {\n\tdisplay: contents;\n}\n\n:host>div {\n\tpadding: 0.3rem 1.1rem;\n}\n\n:host>div.content {\n\tgrid-column: span var(--smoothly-table-cell-span, 1);\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\talign-items: center;\n\twhite-space: nowrap;\n\t@include arrow;\n\n\t&:hover {\n\t\t@include arrow-hover;\n\t}\n}\n\n:host[open]>div.content {\n\t@include arrow-open;\n}\n\n:host>div.content:hover {\n\tbackground-color: rgb(var(--smoothly-table-hover-background));\n\tcolor: rgb(var(--smoothly-table-hover-foreground));\n\tstroke: rgb(var(--smoothly-table-hover-foreground));\n\tfill: rgb(var(--smoothly-table-hover-foreground));\n}\n\n:host>div:first-child {\n\tcursor: pointer;\n}\n\n:host>div.detail {\n\tgrid-column: 1 / -1;\n\tgrid-row: 2;\n\tposition: relative;\n}\n\n:host[open]>div.content {\n\tbox-shadow: 1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset,\n\t\t-3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset;\n}\n\n:host[open]>div {\n\tbackground-color: rgb(var(--smoothly-table-expanded-background));\n\tcolor: rgb(var(--smoothly-table-expanded-foreground));\n\tstroke: rgb(var(--smoothly-table-expanded-foreground));\n\tfill: rgb(var(--smoothly-table-expanded-foreground));\n}\n\n:host:not([open])>div.detail {\n\tdisplay: none;\n}\n\n:host>div.detail::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\ttop: 0;\n\tbottom: 0;\n\tleft: -1em;\n\twidth: 1em;\n\tbackground-color: rgb(var(--smoothly-table-expanded-background));\n\tborder-left: 0.3em solid rgb(var(--smoothly-table-detail-border, var(--smoothly-table-border)));\n\tbox-shadow: 2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)),\n\t\t0px 0px 1px 0px rgb(var(--smoothly-table-border));\n}\n\n:host>div.detail::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tdisplay: flex;\n\ttop: 0;\n\tbottom: 0;\n\tright: -1em;\n\twidth: 1em;\n\tbackground-color: rgb(var(--smoothly-table-expanded-background));\n\tbox-shadow: -2px 0px 0px 0px rgb(var(--smoothly-table-expanded-background)),\n\t\t0px 0px 1px 0px rgb(var(--smoothly-table-border));\n}\n","import { Component, Event, EventEmitter, h, Host, Method, Prop, VNode, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-next-table-expandable-cell\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyNextTableExpandableCell {\n\t@Prop({ reflect: true }) span?: number = 1\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Event() smoothlyNextTableExpandableCellChange: EventEmitter<boolean>\n\t@Event() smoothlyNextTableExpandableCellRegister: EventEmitter<void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyNextTableExpandableCellRegister.emit()\n\t}\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.open = false\n\t}\n\tclickHandler(): void {\n\t\tthis.open = !this.open\n\t}\n\t@Watch(\"open\")\n\topenChange() {\n\t\tthis.smoothlyNextTableExpandableCellChange.emit(this.open)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host style={{ \"--smoothly-table-cell-span\": this.span?.toString(10) }}>\n\t\t\t\t<div onClick={() => this.clickHandler()} class={\"content\"}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t<div class={\"detail\"}>\n\t\t\t\t\t<slot name={\"detail\"} />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/p-a5ada613.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
+import { d as defineCustomElement$1 } from './p-c63db1c1.js';
+
+const styleCss = ".sc-smoothly-modal-h{position:fixed;display:flex;justify-content:center;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--smoothly-modal-backdrop));color:rgb(var(--smoothly-modal-foreground));z-index:5}.sc-smoothly-modal-h:not([open]),[hidden].sc-smoothly-modal-h{display:none}[align=center].sc-smoothly-modal-h{align-items:center}[align=top].sc-smoothly-modal-h>div.modal.sc-smoothly-modal{margin-top:calc((100dvh - var(--smoothly-modal-max-height)) / 2)}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal{display:flex;flex-direction:column;padding:2rem;gap:1.5rem;width:var(--smoothly-modal-width, 40rem);max-width:calc(100dvw - 1rem);height:fit-content;max-height:min(var(--smoothly-modal-max-height), 100dvh);background:rgb(var(--smoothly-modal-background, var(--smoothly-color)));border:1px solid rgb(var(--smoothly-modal-border));border-radius:var(--smoothly-modal-border-radius);box-shadow:var(--smoothly-modal-shadow);box-sizing:border-box}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:empty,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal:empty{display:none}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal{display:flex;justify-content:space-between;align-items:center}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal,.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>*.sc-smoothly-modal{margin-block:0}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>*.sc-smoothly-modal:not(.header):not(.actions){overflow-y:auto}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal:not(:has([slot=\"header\"])){justify-content:end}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]){cursor:pointer;opacity:0.7;color:rgb(var(--smoothly-default-contrast))}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.header.sc-smoothly-modal>smoothly-icon.sc-smoothly-modal:not([slot=\"header\"]):hover{opacity:1}.sc-smoothly-modal-h>div.modal.sc-smoothly-modal>div.actions.sc-smoothly-modal{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}";
+const SmoothlyModalStyle0 = styleCss;
+
+const SmoothlyModal = proxyCustomElement(class SmoothlyModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.smoothlyModalChange = createEvent(this, "smoothlyModalChange", 7);
+        this.open = false;
+        this.closable = false;
+        this.align = "center";
+    }
+    openChanged() {
+        this.smoothlyModalChange.emit(this.open);
+    }
+    render() {
+        return (h(Host, { key: 'ca8c015be405179688f7eacb9becfd437733d136', role: "alertdialog" }, h("div", { key: '05afa423533ecfe7eb42578bb32e93d3b0189916', class: "modal" }, h("div", { key: 'a1ad92a2aa33376be6a210cc3d2b356c61a6b612', class: "header" }, h("slot", { key: 'e446def80df406f67a7db346e665cc72ab6c3994', name: "header" }), this.closable && h("smoothly-icon", { key: '73df336557af04d2cdc601c3e8d2f5c8a8a19222', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), h("slot", { key: 'aca2bb1c7221fbce49a00a2fd33539463414dbc5' }), h("div", { key: '802d7b631ae8fd42853120dc1c857fadb8c289ce', class: "actions" }, h("slot", { key: '31e0f0cc09d4567cc4ddb8a0a4e1b46c5229f11b', name: "actions" })))));
+    }
+    static get watchers() { return {
+        "open": ["openChanged"]
+    }; }
+    static get style() { return SmoothlyModalStyle0; }
+}, [6, "smoothly-modal", {
+        "open": [1540],
+        "closable": [516],
+        "align": [513]
+    }, undefined, {
+        "open": ["openChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["smoothly-modal", "smoothly-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "smoothly-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SmoothlyModal);
+            }
+            break;
+        case "smoothly-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SmoothlyModal as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-a5ada613.js.map

package/dist/components/p-a5ada613.js.map

@@ -0,0 +1 @@
+{"file":"p-a5ada613.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,wqEAAwqE,CAAC;AAC1rE,4BAAe,QAAQ;;MCMV,aAAa;;;;;oBACsB,KAAK;wBAChB,KAAK;qBACU,QAAQ;;IAI3D,WAAW;QACV,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACxC;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,IAAI,EAAC,aAAa,IACvB,4DAAK,KAAK,EAAC,OAAO,IACjB,4DAAK,KAAK,EAAC,QAAQ,IAClB,6DAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,IAAI,CAAC,QAAQ,IAAI,sEAAe,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAAI,CACpG,EACN,8DAAQ,EACR,4DAAK,KAAK,EAAC,SAAS,IACnB,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/style.css?tag=smoothly-modal&encapsulation=scoped","src/components/modal/index.tsx"],"sourcesContent":[":host {\n\tposition: fixed;\n\tdisplay: flex;\n\tjustify-content: center;\n\ttop: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\tbackground-color: rgba(var(--smoothly-modal-backdrop));\n\tcolor: rgb(var(--smoothly-modal-foreground));\n\tz-index: 5;\n}\n:host:not([open]),\n:host[hidden] {\n\tdisplay: none;\n}\n:host[align=center] {\n\talign-items: center;\n}\n:host[align=top]>div.modal{\n\tmargin-top: calc((100dvh - var(--smoothly-modal-max-height)) / 2);\n}\n\n:host>div.modal {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 2rem;\n\tgap: 1.5rem;\n\twidth: var(--smoothly-modal-width, 40rem);\n\tmax-width: calc(100dvw - 1rem);\n\theight: fit-content;\n\tmax-height: min(var(--smoothly-modal-max-height), 100dvh);\n\tbackground: rgb(var(--smoothly-modal-background, var(--smoothly-color)));\n\tborder: 1px solid rgb(var(--smoothly-modal-border));\n\tborder-radius: var(--smoothly-modal-border-radius);\n\tbox-shadow: var(--smoothly-modal-shadow);\n\tbox-sizing: border-box;\n}\n:host > div.modal > div.header:empty,\n:host > div.modal > div.actions:empty {\n\tdisplay: none;\n}\n:host > div.modal > div.header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n:host > div.modal > *,\n:host > div.modal > div.header > * {\n\tmargin-block: 0;\n}\n:host > div.modal > *:not(.header):not(.actions) {\n\toverflow-y: auto;\n}\n:host > div.modal > div.header:not(:has([slot=\"header\"])) {\n\tjustify-content: end;\n}\n:host > div.modal > div.header > smoothly-icon:not([slot=\"header\"]) {\n\tcursor: pointer;\n\topacity: 0.7;\n\tcolor: rgb(var(--smoothly-default-contrast));\n}\n:host > div.modal > div.header > smoothly-icon:not([slot=\"header\"]):hover {\n\topacity: 1;\n}\n:host > div.modal > div.actions {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n}\n\n","import { Component, Event, EventEmitter, h, Host, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-modal\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyModal {\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) closable = false\n\t@Prop({ reflect: true }) align: \"top\" | \"center\" = \"center\"\n\t@Event() smoothlyModalChange: EventEmitter<boolean>\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.smoothlyModalChange.emit(this.open)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host role=\"alertdialog\">\n\t\t\t\t<div class=\"modal\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t\t{this.closable && <smoothly-icon name=\"close-outline\" fill=\"solid\" onClick={() => (this.open = false)} />}\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t\t<slot name=\"actions\" />\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}

package/dist/components/{p-29c0438b.js → p-ab304bad.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
-import { I as Input } from './p-061353e6.js';
+import { I as Input } from './p-ca69a0ef.js';
 
 const styleCss = ".sc-smoothly-tab-h{display:contents;--line-width:3px}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child{grid-column:span 1;background-color:transparent;border-bottom-color:rgb(var(--smoothly-default-shade));border-bottom-width:var(--line-width);border-bottom-style:solid}.sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{display:block;padding:.5rem;width:fit-content;margin:auto;cursor:pointer}[open].sc-smoothly-tab-h>div.sc-smoothly-tab:first-child>label.sc-smoothly-tab{border-bottom:var(--line-width) solid rgb(var(--smoothly-primary-color));margin-bottom:calc(-1 * var(--line-width));position:relative}.sc-smoothly-tab-h>div.sc-smoothly-tab:nth-child(2){grid-row:2 / 3;grid-column:1 / -1}";
 const SmoothlyTabStyle0 = styleCss;
@@ -39,7 +39,7 @@ const SmoothlyTab = proxyCustomElement(class SmoothlyTab extends H {
         }
     }
     render() {
-        return (h(Host, { key: '417ad462857abdf14e1ec37429e75b689799efb0' }, h("div", { key: '6993c98633a3794b71b4b83a3a69423dac7c74e2' }, h("label", { key: '0ee24bb008ec1fb28e7c41ae1c282b25bef04a1c' }, this.label)), h("div", { key: '3a1c8c42d5ef94e61c632c4eecbc4d2d02ac732b', hidden: !this.open }, h("slot", { key: '3d87938f9cb4240dd659a77096fb4d185dbca404' }))));
+        return (h(Host, { key: 'cdbbca6716b3a1d87e442e10755e56e228a5ddf6' }, h("div", { key: '90fc76872efeec9892a1ad9a89aab0e13e86eea6' }, h("label", { key: '0c48385c46cb4c5aed14415505cd248a94d5e1eb' }, this.label)), h("div", { key: 'eceb62687b2e1eb4f022976e60daee5b42bb3f8c', hidden: !this.open }, h("slot", { key: '0d1d67d5c332d89e15e9eb1e7b7249307946027e' }))));
     }
     static get watchers() { return {
         "open": ["openHandler"]
@@ -68,4 +68,4 @@ defineCustomElement();
 
 export { SmoothlyTab as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-29c0438b.js.map
+//# sourceMappingURL=p-ab304bad.js.map

package/dist/components/{p-29c0438b.js.map → p-ab304bad.js.map}

@@ -1 +1 @@
-{"file":"p-29c0438b.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8sBAA8sB,CAAC;AAChuB,0BAAe,QAAQ;;MCOV,WAAW;;;;;;QACf,WAAM,GAAkC,EAAE,CAAA;;;;IAOlD,MAAM,WAAW;QAChB,IAAI,IAAI,CAAC,IAAI;YACZ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACtC,IAAI,CAAC,IAAI;cACN,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;cAC5E,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;KACjF;IAED,OAAO,CAAC,CAAU;QACjB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;KAChB;IACD,iBAAiB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;KAC3B;IACD,MAAM,gBAAgB;QACrB,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;KACxB;IAGD,WAAW,CAAC,KAAkB;QAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACnC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,CAAA;YAC7C,IAAI,CAAC,IAAI,CAAC,IAAI;gBACb,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;KACD;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,8DACC,gEAAQ,IAAI,CAAC,KAAK,CAAS,CACtB,EACN,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACtB,8DAAQ,CACH,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/tab/style.css?tag=smoothly-tab&encapsulation=scoped","src/components/tabs/tab/index.tsx"],"sourcesContent":[":host {\n\tdisplay: contents;\n\t--line-width: 3px;\n}\n:host > div:first-child {\n\tgrid-column: span 1;\n\tbackground-color: transparent;\n\tborder-bottom-color: rgb(var(--smoothly-default-shade));\n\tborder-bottom-width: var(--line-width);\n\tborder-bottom-style: solid;\n}\n:host > div:first-child > label {\n\tdisplay: block;\n\tpadding: .5rem;\n\twidth: fit-content;\n  margin: auto;\n\tcursor: pointer;\n}\n:host([open]) > div:first-child > label {\n\tborder-bottom: var(--line-width) solid rgb(var(--smoothly-primary-color));\n\tmargin-bottom: calc(-1 * var(--line-width));\n\tposition: relative;\n}\n\n:host > div:nth-child(2) {\n\tgrid-row: 2 / 3;\n\tgrid-column: 1 / -1;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\"\nimport { Input } from \"../../input/Input\"\n\n@Component({\n\ttag: \"smoothly-tab\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTab {\n\tprivate inputs: Record<string, Input.Element> = {}\n\t@Prop() label: string\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyTabOpen: EventEmitter<string>\n\t@Event() smoothlyTabLoad: EventEmitter<void>\n\n\t@Watch(\"open\")\n\tasync openHandler() {\n\t\tif (this.open)\n\t\t\tthis.smoothlyTabOpen.emit(this.label)\n\t\tthis.open\n\t\t\t? await Promise.all(Object.values(this.inputs).map(input => input.register()))\n\t\t\t: await Promise.all(Object.values(this.inputs).map(input => input.unregister()))\n\t}\n\t@Listen(\"click\")\n\tonClick(e: UIEvent) {\n\t\te.stopPropagation()\n\t\tthis.open = true\n\t}\n\tconnectedCallback() {\n\t\tthis.smoothlyTabLoad.emit()\n\t}\n\tasync componentDidLoad() {\n\t\tawait this.openHandler()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\t@Listen(\"smoothlyInput\")\n\tonInputLoad(event: CustomEvent) {\n\t\tif (Input.Element.is(event.target)) {\n\t\t\tthis.inputs[event.target.name] = event.target\n\t\t\tif (!this.open)\n\t\t\t\tevent.stopPropagation()\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<label>{this.label}</label>\n\t\t\t\t</div>\n\t\t\t\t<div hidden={!this.open}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-ab304bad.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8sBAA8sB,CAAC;AAChuB,0BAAe,QAAQ;;MCOV,WAAW;;;;;;QACf,WAAM,GAAkC,EAAE,CAAA;;;;IAOlD,MAAM,WAAW;QAChB,IAAI,IAAI,CAAC,IAAI;YACZ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACtC,IAAI,CAAC,IAAI;cACN,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;cAC5E,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;KACjF;IAED,OAAO,CAAC,CAAU;QACjB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;KAChB;IACD,iBAAiB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;KAC3B;IACD,MAAM,gBAAgB;QACrB,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;KACxB;IAGD,WAAW,CAAC,KAAkB;QAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACnC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,CAAA;YAC7C,IAAI,CAAC,IAAI,CAAC,IAAI;gBACb,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;KACD;IACD,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,8DACC,gEAAQ,IAAI,CAAC,KAAK,CAAS,CACtB,EACN,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACtB,8DAAQ,CACH,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/tab/style.css?tag=smoothly-tab&encapsulation=scoped","src/components/tabs/tab/index.tsx"],"sourcesContent":[":host {\n\tdisplay: contents;\n\t--line-width: 3px;\n}\n:host > div:first-child {\n\tgrid-column: span 1;\n\tbackground-color: transparent;\n\tborder-bottom-color: rgb(var(--smoothly-default-shade));\n\tborder-bottom-width: var(--line-width);\n\tborder-bottom-style: solid;\n}\n:host > div:first-child > label {\n\tdisplay: block;\n\tpadding: .5rem;\n\twidth: fit-content;\n  margin: auto;\n\tcursor: pointer;\n}\n:host([open]) > div:first-child > label {\n\tborder-bottom: var(--line-width) solid rgb(var(--smoothly-primary-color));\n\tmargin-bottom: calc(-1 * var(--line-width));\n\tposition: relative;\n}\n\n:host > div:nth-child(2) {\n\tgrid-row: 2 / 3;\n\tgrid-column: 1 / -1;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\"\nimport { Input } from \"../../input/Input\"\n\n@Component({\n\ttag: \"smoothly-tab\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTab {\n\tprivate inputs: Record<string, Input.Element> = {}\n\t@Prop() label: string\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyTabOpen: EventEmitter<string>\n\t@Event() smoothlyTabLoad: EventEmitter<void>\n\n\t@Watch(\"open\")\n\tasync openHandler() {\n\t\tif (this.open)\n\t\t\tthis.smoothlyTabOpen.emit(this.label)\n\t\tthis.open\n\t\t\t? await Promise.all(Object.values(this.inputs).map(input => input.register()))\n\t\t\t: await Promise.all(Object.values(this.inputs).map(input => input.unregister()))\n\t}\n\t@Listen(\"click\")\n\tonClick(e: UIEvent) {\n\t\te.stopPropagation()\n\t\tthis.open = true\n\t}\n\tconnectedCallback() {\n\t\tthis.smoothlyTabLoad.emit()\n\t}\n\tasync componentDidLoad() {\n\t\tawait this.openHandler()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\t@Listen(\"smoothlyInput\")\n\tonInputLoad(event: CustomEvent) {\n\t\tif (Input.Element.is(event.target)) {\n\t\t\tthis.inputs[event.target.name] = event.target\n\t\t\tif (!this.open)\n\t\t\t\tevent.stopPropagation()\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<label>{this.label}</label>\n\t\t\t\t</div>\n\t\t\t\t<div hidden={!this.open}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-cc15c25a.js → p-ab4f6f94.js}

@@ -41,7 +41,7 @@ const LoadMore = proxyCustomElement(class LoadMore extends H {
         }
     }
     render() {
-        return h(Host, { key: '28ddc5d3fca6524101b268794c4d83186352f77b' });
+        return h(Host, { key: '828ce432656973cd3dc94015a4f7a350cffc2814' });
     }
     get element() { return this; }
 }, [2, "smoothly-load-more", {
@@ -67,4 +67,4 @@ defineCustomElement();
 
 export { LoadMore as L, defineCustomElement as d };
 
-//# sourceMappingURL=p-cc15c25a.js.map
+//# sourceMappingURL=p-ab4f6f94.js.map

package/dist/components/{p-cc15c25a.js.map → p-ab4f6f94.js.map}

@@ -1 +1 @@
-{"file":"p-cc15c25a.js","mappings":";;;MAOa,QAAQ;;;;;2BAI6B,cAAc;oBAChD,EAAE;wBACE,KAAK;;;IAIxB,WAAW;QACV,IAAI,IAAI,CAAC,MAAM;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACtC;IAED,iBAAiB;;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;QAC3G,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACnC,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACpD,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;gBACtD,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;gBAC3D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;aACxG;SACD;KACD;IAED,oBAAoB;;QACnB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACjF,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;KAC1B;IAED,kBAAkB,CAAC,QAA8B,EAAE,OAAoC;;QACtF,IAAI,CAAC,MAAM,GAAG,CAAC,MAAA,MAAA,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,0CAAE,iBAAiB,mCAAI,CAAC,IAAI,CAAC,CAAA;QAC/F,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAA;SAC3E;KACD;IAED,MAAM;QACL,OAAO,EAAC,IAAI,sDAAG,CAAA;KACf;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/load-more/index.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Scrollable } from \"../../model/Scrollable\"\n\n@Component({\n\ttag: \"smoothly-load-more\",\n\tscoped: true,\n})\nexport class LoadMore {\n\tprivate observer: IntersectionObserver\n\tprivate scrollableParent?: HTMLElement\n\t@Element() element: HTMLSmoothlyLoadMoreElement\n\t@Prop() triggerMode: \"scroll\" | \"intersection\" = \"intersection\"\n\t@Prop() name = \"\"\n\t@Prop() multiple = false\n\t@State() inView: boolean\n\t@Event() smoothlyLoadMore: EventEmitter<string>\n\n\tcheckInView() {\n\t\tif (this.inView)\n\t\t\tthis.smoothlyLoadMore.emit(this.name)\n\t}\n\n\tconnectedCallback() {\n\t\tthis.observer = new IntersectionObserver((entries, observer) => this.observationHandler(observer, entries))\n\t\tthis.observer.observe(this.element)\n\t\tif (this.triggerMode == \"scroll\") {\n\t\t\tthis.inView && this.smoothlyLoadMore.emit(this.name)\n\t\t\tif (this.multiple || (!this.multiple && !this.inView)) {\n\t\t\t\tthis.scrollableParent = Scrollable.findParent(this.element)\n\t\t\t\tthis.scrollableParent?.addEventListener(\"scroll\", this.checkInView.bind(this), { once: !this.multiple })\n\t\t\t}\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.scrollableParent?.removeEventListener(\"scroll\", this.checkInView.bind(this))\n\t\tthis.observer.disconnect()\n\t}\n\n\tobservationHandler(observer: IntersectionObserver, entries: IntersectionObserverEntry[]): void {\n\t\tthis.inView = (entries.find(entry => entry.target == this.element)?.intersectionRatio ?? 0) > 0\n\t\tif (this.inView) {\n\t\t\tthis.smoothlyLoadMore.emit(this.name)\n\t\t\t!this.multiple && (observer.unobserve(this.element), observer.disconnect())\n\t\t}\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn <Host />\n\t}\n}\n"],"version":3}
+{"file":"p-ab4f6f94.js","mappings":";;;MAOa,QAAQ;;;;;2BAI6B,cAAc;oBAChD,EAAE;wBACE,KAAK;;;IAIxB,WAAW;QACV,IAAI,IAAI,CAAC,MAAM;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACtC;IAED,iBAAiB;;QAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;QAC3G,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACnC,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACpD,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;gBACtD,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;gBAC3D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;aACxG;SACD;KACD;IAED,oBAAoB;;QACnB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACjF,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;KAC1B;IAED,kBAAkB,CAAC,QAA8B,EAAE,OAAoC;;QACtF,IAAI,CAAC,MAAM,GAAG,CAAC,MAAA,MAAA,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,0CAAE,iBAAiB,mCAAI,CAAC,IAAI,CAAC,CAAA;QAC/F,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAA;SAC3E;KACD;IAED,MAAM;QACL,OAAO,EAAC,IAAI,sDAAG,CAAA;KACf;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/load-more/index.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Scrollable } from \"../../model/Scrollable\"\n\n@Component({\n\ttag: \"smoothly-load-more\",\n\tscoped: true,\n})\nexport class LoadMore {\n\tprivate observer: IntersectionObserver\n\tprivate scrollableParent?: HTMLElement\n\t@Element() element: HTMLSmoothlyLoadMoreElement\n\t@Prop() triggerMode: \"scroll\" | \"intersection\" = \"intersection\"\n\t@Prop() name = \"\"\n\t@Prop() multiple = false\n\t@State() inView: boolean\n\t@Event() smoothlyLoadMore: EventEmitter<string>\n\n\tcheckInView() {\n\t\tif (this.inView)\n\t\t\tthis.smoothlyLoadMore.emit(this.name)\n\t}\n\n\tconnectedCallback() {\n\t\tthis.observer = new IntersectionObserver((entries, observer) => this.observationHandler(observer, entries))\n\t\tthis.observer.observe(this.element)\n\t\tif (this.triggerMode == \"scroll\") {\n\t\t\tthis.inView && this.smoothlyLoadMore.emit(this.name)\n\t\t\tif (this.multiple || (!this.multiple && !this.inView)) {\n\t\t\t\tthis.scrollableParent = Scrollable.findParent(this.element)\n\t\t\t\tthis.scrollableParent?.addEventListener(\"scroll\", this.checkInView.bind(this), { once: !this.multiple })\n\t\t\t}\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.scrollableParent?.removeEventListener(\"scroll\", this.checkInView.bind(this))\n\t\tthis.observer.disconnect()\n\t}\n\n\tobservationHandler(observer: IntersectionObserver, entries: IntersectionObserverEntry[]): void {\n\t\tthis.inView = (entries.find(entry => entry.target == this.element)?.intersectionRatio ?? 0) > 0\n\t\tif (this.inView) {\n\t\t\tthis.smoothlyLoadMore.emit(this.name)\n\t\t\t!this.multiple && (observer.unobserve(this.element), observer.disconnect())\n\t\t}\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn <Host />\n\t}\n}\n"],"version":3}