@zanichelli/albe-web-components 13.1.2 → 13.2.0-rc1
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/CHANGELOG.md +0 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +12 -6
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-carousel.cjs.entry.js +2 -3
- package/dist/cjs/z-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/z-combobox.cjs.entry.js +145 -38
- package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
- package/dist/cjs/z-file-upload.cjs.entry.js +14 -25
- package/dist/cjs/z-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/z-popover.cjs.entry.js +3 -3
- package/dist/cjs/z-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/z-table.cjs.entry.js +2 -3
- package/dist/cjs/z-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.js +13 -63
- package/dist/collection/components/file-upload/z-file-upload/index.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/styles.css +0 -12
- package/dist/collection/components/inputs/z-combobox/index.js +149 -41
- package/dist/collection/components/inputs/z-combobox/index.js.map +1 -1
- package/dist/collection/components/inputs/z-combobox/index.spec.js +185 -155
- package/dist/collection/components/inputs/z-combobox/index.spec.js.map +1 -1
- package/dist/collection/components/inputs/z-combobox/styles.css +10 -10
- package/dist/collection/components/inputs/z-input/index.js +41 -5
- package/dist/collection/components/inputs/z-input/index.js.map +1 -1
- package/dist/collection/components/list/z-list-element/index.js +20 -1
- package/dist/collection/components/list/z-list-element/index.js.map +1 -1
- package/dist/collection/components/table/z-table/index.js +2 -3
- package/dist/collection/components/table/z-table/index.js.map +1 -1
- package/dist/collection/components/z-carousel/index.js +1 -2
- package/dist/collection/components/z-carousel/index.js.map +1 -1
- package/dist/collection/components/z-carousel/styles.css +0 -1
- package/dist/collection/components/z-popover/index.js +4 -4
- package/dist/collection/components/z-popover/index.js.map +1 -1
- package/dist/components/index10.js +11 -5
- package/dist/components/index10.js.map +1 -1
- package/dist/components/index13.js +3 -1
- package/dist/components/index13.js.map +1 -1
- package/dist/components/index25.js +3 -3
- package/dist/components/index25.js.map +1 -1
- package/dist/components/z-carousel.js +2 -3
- package/dist/components/z-carousel.js.map +1 -1
- package/dist/components/z-combobox.js +163 -49
- package/dist/components/z-combobox.js.map +1 -1
- package/dist/components/z-file-upload.js +15 -28
- package/dist/components/z-file-upload.js.map +1 -1
- package/dist/components/z-table.js +2 -3
- package/dist/components/z-table.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header_12.entry.js +12 -6
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-carousel.entry.js +2 -3
- package/dist/esm/z-carousel.entry.js.map +1 -1
- package/dist/esm/z-combobox.entry.js +147 -40
- package/dist/esm/z-combobox.entry.js.map +1 -1
- package/dist/esm/z-file-upload.entry.js +14 -25
- package/dist/esm/z-file-upload.entry.js.map +1 -1
- package/dist/esm/z-popover.entry.js +3 -3
- package/dist/esm/z-popover.entry.js.map +1 -1
- package/dist/esm/z-table.entry.js +2 -3
- package/dist/esm/z-table.entry.js.map +1 -1
- package/dist/types/components/file-upload/z-file-upload/index.d.ts +0 -5
- package/dist/types/components/inputs/z-combobox/index.d.ts +14 -1
- package/dist/types/components/inputs/z-input/index.d.ts +5 -0
- package/dist/types/components/list/z-list-element/index.d.ts +2 -0
- package/dist/types/components/z-popover/index.d.ts +0 -1
- package/dist/types/components.d.ts +23 -14
- package/dist/web-components-library/{p-3796ca7c.entry.js → p-158b6dda.entry.js} +2 -2
- package/dist/web-components-library/p-158b6dda.entry.js.map +1 -0
- package/dist/web-components-library/{p-f7607ce7.entry.js → p-2637ab23.entry.js} +2 -2
- package/dist/web-components-library/p-2637ab23.entry.js.map +1 -0
- package/{www/build/p-91a7c5a9.entry.js → dist/web-components-library/p-2b2cb566.entry.js} +2 -2
- package/dist/web-components-library/p-2b2cb566.entry.js.map +1 -0
- package/dist/web-components-library/p-2df884ef.entry.js +2 -0
- package/dist/web-components-library/p-2df884ef.entry.js.map +1 -0
- package/dist/web-components-library/p-5023f7d5.entry.js +2 -0
- package/dist/web-components-library/p-5023f7d5.entry.js.map +1 -0
- package/dist/web-components-library/p-93cb103f.entry.js +2 -0
- package/dist/web-components-library/p-93cb103f.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js.map +1 -1
- package/package.json +1 -1
- package/www/build/{p-3796ca7c.entry.js → p-158b6dda.entry.js} +2 -2
- package/www/build/p-158b6dda.entry.js.map +1 -0
- package/www/build/{p-f7607ce7.entry.js → p-2637ab23.entry.js} +2 -2
- package/www/build/p-2637ab23.entry.js.map +1 -0
- package/{dist/web-components-library/p-91a7c5a9.entry.js → www/build/p-2b2cb566.entry.js} +2 -2
- package/www/build/p-2b2cb566.entry.js.map +1 -0
- package/www/build/p-2df884ef.entry.js +2 -0
- package/www/build/p-2df884ef.entry.js.map +1 -0
- package/www/build/p-32cd9d9b.js +2 -0
- package/www/build/p-5023f7d5.entry.js +2 -0
- package/www/build/p-5023f7d5.entry.js.map +1 -0
- package/www/build/p-93cb103f.entry.js +2 -0
- package/www/build/p-93cb103f.entry.js.map +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-3796ca7c.entry.js.map +0 -1
- package/dist/web-components-library/p-91a7c5a9.entry.js.map +0 -1
- package/dist/web-components-library/p-9a42f04c.entry.js +0 -2
- package/dist/web-components-library/p-9a42f04c.entry.js.map +0 -1
- package/dist/web-components-library/p-9b52dea5.entry.js +0 -2
- package/dist/web-components-library/p-9b52dea5.entry.js.map +0 -1
- package/dist/web-components-library/p-ba8e67ee.entry.js +0 -2
- package/dist/web-components-library/p-ba8e67ee.entry.js.map +0 -1
- package/dist/web-components-library/p-f7607ce7.entry.js.map +0 -1
- package/www/build/p-3796ca7c.entry.js.map +0 -1
- package/www/build/p-83f1ed74.js +0 -2
- package/www/build/p-91a7c5a9.entry.js.map +0 -1
- package/www/build/p-9a42f04c.entry.js +0 -2
- package/www/build/p-9a42f04c.entry.js.map +0 -1
- package/www/build/p-9b52dea5.entry.js +0 -2
- package/www/build/p-9b52dea5.entry.js.map +0 -1
- package/www/build/p-ba8e67ee.entry.js +0 -2
- package/www/build/p-ba8e67ee.entry.js.map +0 -1
- package/www/build/p-f7607ce7.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /** remove filter click event, returns filterid */\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /** set parent aria-activedescendant on focus event, returns filterid */\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /** remove filter click event, returns filterid */\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /**\n * [optional] Align expandable button left or right.\n */\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /**\n * [optional] Sets element clickable.\n */\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /**\n * [optional] Sets the divider color.\n */\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /**\n * [optional] Sets the position where to insert the divider.\n */\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /**\n * [optional] Sets the divider size.\n */\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /**\n * [optional] Sets element as expandable.\n */\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /**\n * [optional] Sets expandable style to element.\n */\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /**\n * [optional] List element id.\n */\n @Prop({reflect: true})\n listElementId?: number;\n\n /**\n * [optional] Sets size of inside elements.\n */\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /**\n * [optional] Sets text color of the element.\n */\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /**\n * [optional] Sets disabled style of the element.\n */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /**\n * [optional] position of the list element inside the list or the group\n */\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /**\n * [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /**\n * [optional] Sets element role.\n */\n @Prop({reflect: true})\n role?: string = \"listitem\";\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /**\n * Constructor.\n */\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /**\n * Handler for click on element. If element is expandable, change state.\n * @returns void\n */\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable || !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /**\n * Renders button to expand element.\n * @returns expadable button\n */\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /**\n * Renders expanded content if element is expandable.\n * @returns expanded content\n */\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /**\n * Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}. </div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>• </span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex=\"0\"\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement {\n @Element() host: HTMLZListElementElement;\n\n /** remove filter click event, returns filterid */\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /** set parent aria-activedescendant on focus event, returns filterid */\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /** remove filter click event, returns filterid */\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /**\n * [optional] Align expandable button left or right.\n */\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /**\n * [optional] Sets element clickable.\n */\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /**\n * [optional] Sets the divider color.\n */\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /**\n * [optional] Sets the position where to insert the divider.\n */\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /**\n * [optional] Sets the divider size.\n */\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /**\n * [optional] Sets element as expandable.\n */\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /**\n * [optional] Sets expandable style to element.\n */\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /**\n * [optional] List element id.\n */\n @Prop({reflect: true})\n listElementId?: number;\n\n /**\n * [optional] Sets size of inside elements.\n */\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /**\n * [optional] Sets text color of the element.\n */\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /**\n * [optional] Sets disabled style of the element.\n */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /**\n * [optional] position of the list element inside the list or the group\n */\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /**\n * [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /**\n * [optional] Sets element role.\n */\n @Prop({reflect: true})\n role?: string = \"listitem\";\n\n /** set tabindex to Host tag (optional). Defaults to 0. */\n @Prop()\n htmlTabindex?: number | null = 0;\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /**\n * Constructor.\n */\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /**\n * Handler for click on element. If element is expandable, change state.\n * @returns void\n */\n private handleClick(): void {\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable || !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /**\n * Renders button to expand element.\n * @returns expadable button\n */\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /**\n * Renders expanded content if element is expandable.\n * @returns expanded content\n */\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /**\n * Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}. </div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>• </span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={this.htmlTabindex}\n >\n <div\n class=\"container\"\n style={{color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -32,11 +32,10 @@ export class ZTable {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
disconnectedCallback() {
|
|
35
|
-
|
|
36
|
-
(_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
35
|
+
this.expandableMutationObserver.disconnect();
|
|
37
36
|
}
|
|
38
37
|
render() {
|
|
39
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: '4c33beca2ea12f899450df4a244ea271ea30c018', expandable: this.expandable }, h("div", { key: 'e5f6e45535e0251091d58b9784cfbe0b9bfc8f7e', class: "table", role: "table" }, h("slot", { key: 'd244f077dd25df7f2189f5b5f4b6f89e69db4768' }))));
|
|
40
39
|
}
|
|
41
40
|
static get is() { return "z-table"; }
|
|
42
41
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,kBAAkB,CAAC;AAE1B;;;;GAIG;AAMH,MAAM,OAAO,MAAM;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9E,CAAC;IAID;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,kBAAkB,CAAC;AAE1B;;;;GAIG;AAMH,MAAM,OAAO,MAAM;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9E,CAAC;IAID;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,0BAA0B,CAAC,UAAU,EAAE,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO;gBAEZ,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-thead/index\";\nimport \"../z-tbody/index\";\nimport \"../z-tr/index\";\nimport \"../z-tfoot/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n */\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /**\n * Whether the table cells should show a border between them.\n */\n @Prop({reflect: true})\n bordered = false;\n\n /**\n * Whether the table contains some expandable rows.\n */\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /**\n * Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -146,8 +146,7 @@ export class ZCarousel {
|
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
148
|
componentDidLoad() {
|
|
149
|
-
|
|
150
|
-
(_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
|
|
149
|
+
this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
|
|
151
150
|
this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
|
|
152
151
|
this.resizeObserver.observe(this.itemsContainer);
|
|
153
152
|
this.setupItems();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n tag: \"z-carousel\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCarousel {\n @Element() host: HTMLZCarouselElement;\n\n /** The z-carousel is on loading state */\n @Prop()\n isLoading: boolean;\n\n /** The z-carousel title */\n @Prop()\n label?: string;\n\n /** Shows only one content at a time */\n @Prop({reflect: true})\n single = false;\n\n /** Arrow buttons position */\n @Prop({reflect: true})\n arrowsPosition?: CarouselArrowsPosition;\n\n /** Progress indicator type. Only available for `single` mode */\n @Prop()\n progressMode?: CarouselProgressMode;\n\n /**\n * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n * If set to `false`, the arrows will not be visible on mobile.\n * Only meaningful with `arrowsPosition` set to `OVER`.\n */\n @Prop({reflect: true})\n fixedArrows = true;\n\n /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n @Prop()\n ghostLoadingHeight = 100;\n\n /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n @Prop()\n infinite = false;\n\n /** Current item index for single mode. */\n @State()\n current = 0;\n\n /** Items on the slider. */\n @State()\n items: HTMLLIElement[];\n\n /** Index of the indicator to highlight. */\n @State()\n highlightedIndicator: number;\n\n @State()\n canNavigatePrev: boolean;\n\n @State()\n canNavigateNext: boolean;\n\n /** Reference for the items container element. */\n protected itemsContainer: HTMLUListElement;\n\n /** Observer that handles current index change when scrolling on single mode. */\n private intersectionObserver: IntersectionObserver;\n\n /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n private resizeObserver: ResizeObserver;\n\n /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n private scrollingTo: number = null;\n\n /** Emitted on index change and only in `single` mode. */\n @Event()\n indexChange: EventEmitter<{currentItem: number}>;\n\n @Watch(\"current\")\n onIndexChange(): void {\n this.indexChange.emit({currentItem: this.current});\n }\n\n @Watch(\"single\")\n onSingleModeChange(): void {\n if (this.single && !this.intersectionObserver) {\n this.setIntersectionObserver();\n }\n }\n\n @Watch(\"infinite\")\n onInfiniteModeChange(): void {\n this.checkNavigationValidity();\n }\n\n /**\n * Set an intersection observer to:\n * - highlight the indicator of the intersecting item during scroll\n * - set the current item to the last intersecting item\n */\n private setIntersectionObserver(): void {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n const entry = entries.find(({isIntersecting}) => isIntersecting);\n if (!entry) {\n return;\n }\n\n const entryIndex = this.items.findIndex((item) => item === entry.target);\n this.highlightedIndicator = entryIndex;\n\n /* skip setting the current item if intersection has been triggered by a programmatic scroll\n (@see `goTo` function) and the final index has not been reached */\n if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n return;\n }\n\n this.scrollingTo = null;\n this.current = entryIndex;\n },\n {\n root: this.itemsContainer,\n threshold: 0.5,\n }\n );\n\n this.items.forEach((element) => this.intersectionObserver.observe(element));\n }\n\n /** Update items' list and check conditions to allow navigation */\n private onSlotChange(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.checkNavigationValidity();\n this.setIntersectionObserver();\n this.goTo(this.current);\n }\n\n private onPrev(): void {\n if (this.single) {\n this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n return;\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite && this.itemsContainer.scrollLeft == 0\n ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n : -this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n private onNext(): void {\n if (this.single) {\n const next =\n this.infinite && this.current + 1 > this.items.length - 1\n ? 0\n : Math.min(this.current + 1, this.items.length - 1);\n\n return this.goTo(next);\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite &&\n this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n ? -this.itemsContainer.scrollWidth\n : this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n /**\n * Check if navigation buttons can be enabled and set the related local states.\n */\n private checkNavigationValidity(): void {\n if (this.single) {\n this.canNavigatePrev = this.current > 0;\n this.canNavigateNext = this.current < this.items.length - 1;\n\n return;\n }\n\n this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n this.canNavigateNext =\n this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n }\n\n /**\n * Check if footer has to be rendered.\n */\n private canShowFooter(): boolean {\n if (!this.canNavigatePrev && !this.canNavigateNext) {\n return false;\n }\n\n return (\n this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n this.progressMode === CarouselProgressMode.DOTS ||\n this.progressMode === CarouselProgressMode.NUMBERS\n );\n }\n\n /**\n * Set current item to passed index.\n * @param index Index to set\n */\n private goTo(index: number): void {\n if (this.current === index) {\n return;\n }\n\n this.scrollingTo = index;\n const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n // the scroll will trigger the IntersectionObserver and set the current item\n this.itemsContainer.scroll({\n left,\n behavior: \"smooth\",\n });\n }\n\n /** Check if navigation of at least one direction is enabled */\n private get canNavigate(): boolean {\n return this.canNavigatePrev || this.canNavigateNext;\n }\n\n private setupItems(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.items.forEach((item) => {\n item.setAttribute(\"role\", \"group\");\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\n this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n this.resizeObserver.observe(this.itemsContainer);\n this.setupItems();\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLDivElement | HTMLZCarouselElement {\n if (this.isLoading) {\n return (\n <div class=\"z-carousel-container\">\n {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n <div style={{height: `${this.ghostLoadingHeight}px`}}>\n <z-ghost-loading></z-ghost-loading>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div\n class=\"z-carousel-container\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n aria-label={this.label || \"Carousel\"}\n >\n {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n <div class=\"z-carousel-wrapper\">\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"prev\"\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n <ul\n class=\"z-carousel-items-container\"\n aria-atomic=\"false\"\n aria-live=\"polite\"\n ref={(el) => (this.itemsContainer = el)}\n >\n <slot onSlotchange={this.onSlotChange.bind(this)} />\n </ul>\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"next\"\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n </div>\n </div>\n\n {this.canShowFooter() && (\n <div class=\"z-carousel-footer\">\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n )}\n {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n <div class=\"dots-progress\">\n {this.items.map((_, index) => (\n <button\n type=\"button\"\n class={{current: this.highlightedIndicator === index}}\n aria-label={\n this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n }\n onClick={() => this.goTo(index)}\n />\n ))}\n </div>\n )}\n {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n <div class=\"numbers-progress interactive-1\">\n <span class=\"current\">{this.current + 1}</span>\n <span>di</span>\n <span>{this.items.length}</span>\n </div>\n )}\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n tag: \"z-carousel\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCarousel {\n @Element() host: HTMLZCarouselElement;\n\n /** The z-carousel is on loading state */\n @Prop()\n isLoading: boolean;\n\n /** The z-carousel title */\n @Prop()\n label?: string;\n\n /** Shows only one content at a time */\n @Prop({reflect: true})\n single = false;\n\n /** Arrow buttons position */\n @Prop({reflect: true})\n arrowsPosition?: CarouselArrowsPosition;\n\n /** Progress indicator type. Only available for `single` mode */\n @Prop()\n progressMode?: CarouselProgressMode;\n\n /**\n * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n * If set to `false`, the arrows will not be visible on mobile.\n * Only meaningful with `arrowsPosition` set to `OVER`.\n */\n @Prop({reflect: true})\n fixedArrows = true;\n\n /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n @Prop()\n ghostLoadingHeight = 100;\n\n /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n @Prop()\n infinite = false;\n\n /** Current item index for single mode. */\n @State()\n current = 0;\n\n /** Items on the slider. */\n @State()\n items: HTMLLIElement[];\n\n /** Index of the indicator to highlight. */\n @State()\n highlightedIndicator: number;\n\n @State()\n canNavigatePrev: boolean;\n\n @State()\n canNavigateNext: boolean;\n\n /** Reference for the items container element. */\n protected itemsContainer: HTMLUListElement;\n\n /** Observer that handles current index change when scrolling on single mode. */\n private intersectionObserver: IntersectionObserver;\n\n /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n private resizeObserver: ResizeObserver;\n\n /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n private scrollingTo: number = null;\n\n /** Emitted on index change and only in `single` mode. */\n @Event()\n indexChange: EventEmitter<{currentItem: number}>;\n\n @Watch(\"current\")\n onIndexChange(): void {\n this.indexChange.emit({currentItem: this.current});\n }\n\n @Watch(\"single\")\n onSingleModeChange(): void {\n if (this.single && !this.intersectionObserver) {\n this.setIntersectionObserver();\n }\n }\n\n @Watch(\"infinite\")\n onInfiniteModeChange(): void {\n this.checkNavigationValidity();\n }\n\n /**\n * Set an intersection observer to:\n * - highlight the indicator of the intersecting item during scroll\n * - set the current item to the last intersecting item\n */\n private setIntersectionObserver(): void {\n this.intersectionObserver = new IntersectionObserver(\n (entries) => {\n const entry = entries.find(({isIntersecting}) => isIntersecting);\n if (!entry) {\n return;\n }\n\n const entryIndex = this.items.findIndex((item) => item === entry.target);\n this.highlightedIndicator = entryIndex;\n\n /* skip setting the current item if intersection has been triggered by a programmatic scroll\n (@see `goTo` function) and the final index has not been reached */\n if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n return;\n }\n\n this.scrollingTo = null;\n this.current = entryIndex;\n },\n {\n root: this.itemsContainer,\n threshold: 0.5,\n }\n );\n\n this.items.forEach((element) => this.intersectionObserver.observe(element));\n }\n\n /** Update items' list and check conditions to allow navigation */\n private onSlotChange(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.checkNavigationValidity();\n this.setIntersectionObserver();\n this.goTo(this.current);\n }\n\n private onPrev(): void {\n if (this.single) {\n this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n return;\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite && this.itemsContainer.scrollLeft == 0\n ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n : -this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n private onNext(): void {\n if (this.single) {\n const next =\n this.infinite && this.current + 1 > this.items.length - 1\n ? 0\n : Math.min(this.current + 1, this.items.length - 1);\n\n return this.goTo(next);\n }\n\n this.itemsContainer.scrollBy({\n left:\n this.infinite &&\n this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n ? -this.itemsContainer.scrollWidth\n : this.itemsContainer.clientWidth / 2,\n behavior: \"smooth\",\n });\n }\n\n /**\n * Check if navigation buttons can be enabled and set the related local states.\n */\n private checkNavigationValidity(): void {\n if (this.single) {\n this.canNavigatePrev = this.current > 0;\n this.canNavigateNext = this.current < this.items.length - 1;\n\n return;\n }\n\n this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n this.canNavigateNext =\n this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n }\n\n /**\n * Check if footer has to be rendered.\n */\n private canShowFooter(): boolean {\n if (!this.canNavigatePrev && !this.canNavigateNext) {\n return false;\n }\n\n return (\n this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n this.progressMode === CarouselProgressMode.DOTS ||\n this.progressMode === CarouselProgressMode.NUMBERS\n );\n }\n\n /**\n * Set current item to passed index.\n * @param index Index to set\n */\n private goTo(index: number): void {\n if (this.current === index) {\n return;\n }\n\n this.scrollingTo = index;\n const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n // the scroll will trigger the IntersectionObserver and set the current item\n this.itemsContainer.scroll({\n left,\n behavior: \"smooth\",\n });\n }\n\n /** Check if navigation of at least one direction is enabled */\n private get canNavigate(): boolean {\n return this.canNavigatePrev || this.canNavigateNext;\n }\n\n private setupItems(): void {\n this.items = Array.from(this.host.children) as HTMLLIElement[];\n this.items.forEach((item) => {\n item.setAttribute(\"role\", \"group\");\n item.setAttribute(\"aria-roledescription\", \"slide\");\n });\n }\n\n componentDidLoad(): void {\n this.itemsContainer.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n this.resizeObserver.observe(this.itemsContainer);\n this.setupItems();\n if (this.single) {\n this.setIntersectionObserver();\n }\n this.checkNavigationValidity();\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLDivElement | HTMLZCarouselElement {\n if (this.isLoading) {\n return (\n <div class=\"z-carousel-container\">\n {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n <div style={{height: `${this.ghostLoadingHeight}px`}}>\n <z-ghost-loading></z-ghost-loading>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div\n class=\"z-carousel-container\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n aria-label={this.label || \"Carousel\"}\n >\n {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n <div class=\"z-carousel-wrapper\">\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"prev\"\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n <ul\n class=\"z-carousel-items-container\"\n aria-atomic=\"false\"\n aria-live=\"polite\"\n ref={(el) => (this.itemsContainer = el)}\n >\n <slot onSlotchange={this.onSlotChange.bind(this)} />\n </ul>\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.SECONDARY}\n data-direction=\"next\"\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n </div>\n </div>\n\n {this.canShowFooter() && (\n <div class=\"z-carousel-footer\">\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-left\"\n onClick={this.onPrev.bind(this)}\n disabled={!this.infinite && !this.canNavigatePrev}\n ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n />\n )}\n {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n <div class=\"dots-progress\">\n {this.items.map((_, index) => (\n <button\n type=\"button\"\n class={{current: this.highlightedIndicator === index}}\n aria-label={\n this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n }\n onClick={() => this.goTo(index)}\n />\n ))}\n </div>\n )}\n {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n <div class=\"numbers-progress interactive-1\">\n <span class=\"current\">{this.current + 1}</span>\n <span>di</span>\n <span>{this.items.length}</span>\n </div>\n )}\n {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n <z-button\n class=\"z-carousel-navigation-arrow\"\n variant={ButtonVariant.TERTIARY}\n icon=\"arrow-right\"\n onClick={this.onNext.bind(this)}\n disabled={!this.infinite && !this.canNavigateNext}\n ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n />\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -116,7 +116,7 @@ export class ZPopover {
|
|
|
116
116
|
}
|
|
117
117
|
if (!e.composedPath().includes(this.host)) {
|
|
118
118
|
const target = e.target;
|
|
119
|
-
const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
|
|
119
|
+
const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(CSS.escape(this.bindTo));
|
|
120
120
|
if (triggerElemClicked) {
|
|
121
121
|
e.stopPropagation();
|
|
122
122
|
}
|
|
@@ -160,7 +160,7 @@ export class ZPopover {
|
|
|
160
160
|
setPosition() {
|
|
161
161
|
let element;
|
|
162
162
|
if (typeof this.bindTo === "string") {
|
|
163
|
-
element = this.host.ownerDocument.querySelector(this.bindTo);
|
|
163
|
+
element = this.host.ownerDocument.querySelector(CSS.escape(this.bindTo));
|
|
164
164
|
}
|
|
165
165
|
else if (this.bindTo) {
|
|
166
166
|
element = this.bindTo;
|
|
@@ -301,7 +301,7 @@ export class ZPopover {
|
|
|
301
301
|
this.onOpen();
|
|
302
302
|
}
|
|
303
303
|
render() {
|
|
304
|
-
return h("slot", { key: '
|
|
304
|
+
return h("slot", { key: '70c742e7871fbf8a871165a4de625dda200ae024' });
|
|
305
305
|
}
|
|
306
306
|
static get is() { return "z-popover"; }
|
|
307
307
|
static get encapsulation() { return "shadow"; }
|
|
@@ -376,7 +376,7 @@ export class ZPopover {
|
|
|
376
376
|
"optional": true,
|
|
377
377
|
"docs": {
|
|
378
378
|
"tags": [],
|
|
379
|
-
"text": "The selector or the element bound with the popover
|
|
379
|
+
"text": "The selector or the element bound with the popover."
|
|
380
380
|
},
|
|
381
381
|
"attribute": "bind-to",
|
|
382
382
|
"reflect": false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Watch, Listen, Element, State, Event, EventEmitter} from \"@stencil/core\";\nimport {PopoverPosition, KeyboardCode} from \"../../beans\";\n\nconst DOCUMENT_ELEMENT = document.documentElement;\n\nfunction getParentElement(element: Element): ShadowRoot[\"host\"] {\n if ((element.parentNode as ShadowRoot).host) {\n return (element.parentNode as ShadowRoot).host;\n }\n\n return element.parentNode as Element;\n}\n\n/**\n * Find the closest scrollable parent of a node.\n *\n * @param {Element} element The node\n */\nfunction findScrollableParent(element: Element): Element {\n let parent = getParentElement(element);\n\n while (parent && parent !== DOCUMENT_ELEMENT) {\n const {overflow, overflowX, overflowY} = window.getComputedStyle(parent);\n if (overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\") {\n return parent;\n }\n\n if (\n (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\")\n ) {\n return parent;\n }\n\n parent = getParentElement(parent);\n }\n\n return DOCUMENT_ELEMENT;\n}\n\n/**\n * Calculate computed offset.\n * It includes matrix transformations.\n * @param element The target element.\n * @param targetParentOffset The relative offset parent.\n * @return A client rect object.\n */\nfunction computeOffset(element: HTMLElement, targetParentOffset?: HTMLElement): Record<string, number> {\n const rect = element.getBoundingClientRect();\n const width = rect.width;\n const height = rect.height;\n\n let top = 0;\n let left = 0;\n let offsetParent = element;\n while (offsetParent && offsetParent != targetParentOffset) {\n left += offsetParent.offsetLeft;\n\n // document.body sometimes has offsetTop == 0 but still has an\n // offset because of children margins!\n if (offsetParent === document.body) {\n top += offsetParent.getBoundingClientRect().top + window.scrollY;\n } else {\n top += offsetParent.offsetTop;\n }\n\n if (window.DOMMatrix) {\n const style = window.getComputedStyle(offsetParent);\n const transform = style.transform || style.webkitTransform;\n const domMatrix = new DOMMatrix(transform);\n if (domMatrix) {\n left += domMatrix.m41;\n if (offsetParent !== document.body) {\n top += domMatrix.m42;\n }\n }\n }\n\n if (!offsetParent.offsetParent) {\n break;\n }\n\n offsetParent = offsetParent.offsetParent as HTMLElement;\n }\n\n let parentWidth: number;\n let parentHeight: number;\n if (offsetParent === document.body) {\n parentWidth = window.innerWidth;\n parentHeight = window.innerHeight;\n } else {\n parentWidth = offsetParent.offsetWidth;\n parentHeight = offsetParent.offsetHeight;\n }\n\n const right = parentWidth - left - rect.width;\n const bottom = parentHeight - top - rect.height;\n\n return {top, right, bottom, left, width, height};\n}\n\n/**\n * Popover component.\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /** Popover position. */\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /**\n * The open state of the popover.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the popover.\n * If string css selector is provided make sure to use a valid selector.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /**\n * Whether to show popover's arrow.\n */\n @Prop({reflect: true})\n showArrow = false;\n\n /**\n * Whether to center the popup on the main side (according to \"position\").\n */\n @Prop({reflect: true})\n center = false;\n\n /**\n * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n */\n @Prop()\n closable = true;\n\n /**\n * The current position of the popover.\n */\n @State()\n currentPosition?: PopoverPosition;\n\n /**\n * Position change event.\n */\n @Event()\n positionChange: EventEmitter;\n\n /**\n * Open change event.\n */\n @Event()\n openChange: EventEmitter;\n\n @Element() host: HTMLZPopoverElement;\n\n private animationFrameRequestId?: number;\n\n @Listen(\"keyup\", {target: \"window\"})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n this.open = false;\n }\n }\n\n /**\n * Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n * @param {MouseEvent} e\n */\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n if (!this.closable || !this.open) {\n return;\n }\n\n if (!e.composedPath().includes(this.host)) {\n const target = e.target as HTMLElement;\n const triggerElemClicked =\n this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);\n if (triggerElemClicked) {\n e.stopPropagation();\n }\n\n this.open = false;\n this.positionChange.emit({position: this.currentPosition});\n }\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (newValue && !Object.values(PopoverPosition).includes(newValue as PopoverPosition)) {\n this.position = PopoverPosition.AUTO;\n }\n\n this.currentPosition = this.position;\n this.positionChange.emit({position: this.currentPosition});\n }\n\n /**\n * Setup popover behaviors on opening.\n */\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n if (this.open) {\n const setPosition = (): void => {\n if (this.open) {\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(setPosition);\n }\n };\n\n setPosition();\n } else if (this.host.hasAttribute(\"current-position\")) {\n this.host.removeAttribute(\"current-position\");\n this.currentPosition = undefined;\n }\n\n this.openChange.emit({open: this.open});\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n /**\n * Set the position of the popover.\n */\n private setPosition(): void {\n let element: HTMLElement;\n if (typeof this.bindTo === \"string\") {\n element = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n } else if (this.bindTo) {\n element = this.bindTo;\n } else {\n element = this.host.parentElement as HTMLElement;\n }\n\n if (!element) {\n return;\n }\n\n const scrollContainer = findScrollableParent(element) as HTMLElement;\n const scrollingBoundingRect = scrollContainer.getBoundingClientRect();\n const offsetContainer = this.host.offsetParent as HTMLElement;\n\n const relativeBoundingRect = offsetContainer\n ? computeOffset(offsetContainer, scrollContainer)\n : {top: 0, right: 0, bottom: 0, left: 0};\n const boundingRect = computeOffset(element, scrollContainer);\n\n const top = boundingRect.top - scrollContainer.scrollTop;\n const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;\n const left = boundingRect.left - scrollContainer.scrollLeft;\n const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;\n\n const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);\n const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);\n\n const availableTop = Math.min(top, top + scrollingBoundingRect.top);\n const availableBottom = Math.min(bottom, bottom - overflowBottom);\n const availableLeft = Math.min(left, left + scrollingBoundingRect.left);\n const availableRight = Math.min(right, right - overflowRight);\n\n const availableHeight = availableTop + availableBottom + boundingRect.height;\n const availableWidth = availableLeft + availableRight + boundingRect.width;\n\n let position = this.currentPosition;\n const positions: PopoverPosition[] = [];\n if (this.position === PopoverPosition.AUTO) {\n /**\n * The `AUTO` position tries to place the popover in the 'safest' area,\n * where there's more space available.\n */\n if (availableLeft / availableWidth > 0.6) {\n positions.push(PopoverPosition.LEFT);\n } else if (availableLeft / availableWidth < 0.4) {\n positions.push(PopoverPosition.RIGHT);\n }\n\n if (availableTop / availableHeight > 0.9) {\n positions.unshift(PopoverPosition.TOP);\n } else if (availableTop / availableHeight > 0.6) {\n positions.push(PopoverPosition.TOP);\n } else if (availableTop / availableHeight < 0.1) {\n positions.unshift(PopoverPosition.BOTTOM);\n } else {\n positions.push(PopoverPosition.BOTTOM);\n }\n\n position = positions.join(\"_\") as PopoverPosition;\n }\n\n const style = this.host.style;\n style.position = \"absolute\";\n\n const offsetTop = boundingRect.top - relativeBoundingRect.top;\n const offsetRight = boundingRect.right - relativeBoundingRect.right;\n const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;\n const offsetLeft = boundingRect.left - relativeBoundingRect.left;\n const offsetModifier = this.center ? 0.5 : 0;\n const sizeModifier = this.center ? 0.5 : 0;\n\n if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {\n style.top = \"auto\";\n style.right = \"auto\";\n style.bottom = `${offsetBottom + boundingRect.height}px`;\n\n style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;\n style.maxHeight = `${availableTop}px`;\n if (position === PopoverPosition.TOP_RIGHT) {\n style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;\n }\n } else if (position === PopoverPosition.TOP_LEFT) {\n style.top = \"auto\";\n style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;\n style.bottom = `${offsetBottom + boundingRect.height}px`;\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableTop}px`;\n } else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {\n style.top = `${offsetTop + boundingRect.height}px`;\n style.right = \"auto\";\n style.bottom = \"auto\";\n style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;\n style.maxHeight = `${availableBottom}px`;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;\n }\n } else if (position === PopoverPosition.BOTTOM_LEFT) {\n style.top = `${offsetTop + boundingRect.height}px`;\n style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;\n style.bottom = \"auto\";\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableBottom}px`;\n } else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {\n style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;\n style.right = \"auto\";\n style.bottom = \"auto\";\n style.left = `${offsetLeft + boundingRect.width}px`;\n style.maxWidth = `${availableRight}px`;\n style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;\n } else if (position === PopoverPosition.RIGHT_TOP) {\n style.top = \"auto\";\n style.right = \"auto\";\n style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;\n style.left = `${offsetLeft + boundingRect.width}px`;\n style.maxWidth = `${availableRight}px`;\n style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;\n } else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {\n style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;\n style.right = `${offsetRight + boundingRect.width}px`;\n style.bottom = \"auto\";\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;\n } else if (position === PopoverPosition.LEFT_TOP) {\n style.top = \"auto\";\n style.right = `${offsetRight + boundingRect.width}px`;\n style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;\n }\n\n this.currentPosition = position || this.position;\n this.host.setAttribute(\"current-position\", this.currentPosition);\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n this.onOpen();\n }\n\n render(): HTMLSlotElement {\n return <slot></slot>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, Watch, Listen, Element, State, Event, EventEmitter} from \"@stencil/core\";\nimport {PopoverPosition, KeyboardCode} from \"../../beans\";\n\nconst DOCUMENT_ELEMENT = document.documentElement;\n\nfunction getParentElement(element: Element): ShadowRoot[\"host\"] {\n if ((element.parentNode as ShadowRoot).host) {\n return (element.parentNode as ShadowRoot).host;\n }\n\n return element.parentNode as Element;\n}\n\n/**\n * Find the closest scrollable parent of a node.\n *\n * @param {Element} element The node\n */\nfunction findScrollableParent(element: Element): Element {\n let parent = getParentElement(element);\n\n while (parent && parent !== DOCUMENT_ELEMENT) {\n const {overflow, overflowX, overflowY} = window.getComputedStyle(parent);\n if (overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\") {\n return parent;\n }\n\n if (\n (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\")\n ) {\n return parent;\n }\n\n parent = getParentElement(parent);\n }\n\n return DOCUMENT_ELEMENT;\n}\n\n/**\n * Calculate computed offset.\n * It includes matrix transformations.\n * @param element The target element.\n * @param targetParentOffset The relative offset parent.\n * @return A client rect object.\n */\nfunction computeOffset(element: HTMLElement, targetParentOffset?: HTMLElement): Record<string, number> {\n const rect = element.getBoundingClientRect();\n const width = rect.width;\n const height = rect.height;\n\n let top = 0;\n let left = 0;\n let offsetParent = element;\n while (offsetParent && offsetParent != targetParentOffset) {\n left += offsetParent.offsetLeft;\n\n // document.body sometimes has offsetTop == 0 but still has an\n // offset because of children margins!\n if (offsetParent === document.body) {\n top += offsetParent.getBoundingClientRect().top + window.scrollY;\n } else {\n top += offsetParent.offsetTop;\n }\n\n if (window.DOMMatrix) {\n const style = window.getComputedStyle(offsetParent);\n const transform = style.transform || style.webkitTransform;\n const domMatrix = new DOMMatrix(transform);\n if (domMatrix) {\n left += domMatrix.m41;\n if (offsetParent !== document.body) {\n top += domMatrix.m42;\n }\n }\n }\n\n if (!offsetParent.offsetParent) {\n break;\n }\n\n offsetParent = offsetParent.offsetParent as HTMLElement;\n }\n\n let parentWidth: number;\n let parentHeight: number;\n if (offsetParent === document.body) {\n parentWidth = window.innerWidth;\n parentHeight = window.innerHeight;\n } else {\n parentWidth = offsetParent.offsetWidth;\n parentHeight = offsetParent.offsetHeight;\n }\n\n const right = parentWidth - left - rect.width;\n const bottom = parentHeight - top - rect.height;\n\n return {top, right, bottom, left, width, height};\n}\n\n/**\n * Popover component.\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /** Popover position. */\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /**\n * The open state of the popover.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the popover.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /**\n * Whether to show popover's arrow.\n */\n @Prop({reflect: true})\n showArrow = false;\n\n /**\n * Whether to center the popup on the main side (according to \"position\").\n */\n @Prop({reflect: true})\n center = false;\n\n /**\n * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n */\n @Prop()\n closable = true;\n\n /**\n * The current position of the popover.\n */\n @State()\n currentPosition?: PopoverPosition;\n\n /**\n * Position change event.\n */\n @Event()\n positionChange: EventEmitter;\n\n /**\n * Open change event.\n */\n @Event()\n openChange: EventEmitter;\n\n @Element() host: HTMLZPopoverElement;\n\n private animationFrameRequestId?: number;\n\n @Listen(\"keyup\", {target: \"window\"})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n this.open = false;\n }\n }\n\n /**\n * Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n * @param {MouseEvent} e\n */\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n if (!this.closable || !this.open) {\n return;\n }\n\n if (!e.composedPath().includes(this.host)) {\n const target = e.target as HTMLElement;\n const triggerElemClicked =\n this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(CSS.escape(this.bindTo));\n if (triggerElemClicked) {\n e.stopPropagation();\n }\n\n this.open = false;\n this.positionChange.emit({position: this.currentPosition});\n }\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (newValue && !Object.values(PopoverPosition).includes(newValue as PopoverPosition)) {\n this.position = PopoverPosition.AUTO;\n }\n\n this.currentPosition = this.position;\n this.positionChange.emit({position: this.currentPosition});\n }\n\n /**\n * Setup popover behaviors on opening.\n */\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n if (this.open) {\n const setPosition = (): void => {\n if (this.open) {\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(setPosition);\n }\n };\n\n setPosition();\n } else if (this.host.hasAttribute(\"current-position\")) {\n this.host.removeAttribute(\"current-position\");\n this.currentPosition = undefined;\n }\n\n this.openChange.emit({open: this.open});\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n /**\n * Set the position of the popover.\n */\n private setPosition(): void {\n let element: HTMLElement;\n if (typeof this.bindTo === \"string\") {\n element = this.host.ownerDocument.querySelector(CSS.escape(this.bindTo)) as HTMLElement;\n } else if (this.bindTo) {\n element = this.bindTo;\n } else {\n element = this.host.parentElement as HTMLElement;\n }\n\n if (!element) {\n return;\n }\n\n const scrollContainer = findScrollableParent(element) as HTMLElement;\n const scrollingBoundingRect = scrollContainer.getBoundingClientRect();\n const offsetContainer = this.host.offsetParent as HTMLElement;\n\n const relativeBoundingRect = offsetContainer\n ? computeOffset(offsetContainer, scrollContainer)\n : {top: 0, right: 0, bottom: 0, left: 0};\n const boundingRect = computeOffset(element, scrollContainer);\n\n const top = boundingRect.top - scrollContainer.scrollTop;\n const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;\n const left = boundingRect.left - scrollContainer.scrollLeft;\n const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;\n\n const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);\n const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);\n\n const availableTop = Math.min(top, top + scrollingBoundingRect.top);\n const availableBottom = Math.min(bottom, bottom - overflowBottom);\n const availableLeft = Math.min(left, left + scrollingBoundingRect.left);\n const availableRight = Math.min(right, right - overflowRight);\n\n const availableHeight = availableTop + availableBottom + boundingRect.height;\n const availableWidth = availableLeft + availableRight + boundingRect.width;\n\n let position = this.currentPosition;\n const positions: PopoverPosition[] = [];\n if (this.position === PopoverPosition.AUTO) {\n /**\n * The `AUTO` position tries to place the popover in the 'safest' area,\n * where there's more space available.\n */\n if (availableLeft / availableWidth > 0.6) {\n positions.push(PopoverPosition.LEFT);\n } else if (availableLeft / availableWidth < 0.4) {\n positions.push(PopoverPosition.RIGHT);\n }\n\n if (availableTop / availableHeight > 0.9) {\n positions.unshift(PopoverPosition.TOP);\n } else if (availableTop / availableHeight > 0.6) {\n positions.push(PopoverPosition.TOP);\n } else if (availableTop / availableHeight < 0.1) {\n positions.unshift(PopoverPosition.BOTTOM);\n } else {\n positions.push(PopoverPosition.BOTTOM);\n }\n\n position = positions.join(\"_\") as PopoverPosition;\n }\n\n const style = this.host.style;\n style.position = \"absolute\";\n\n const offsetTop = boundingRect.top - relativeBoundingRect.top;\n const offsetRight = boundingRect.right - relativeBoundingRect.right;\n const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;\n const offsetLeft = boundingRect.left - relativeBoundingRect.left;\n const offsetModifier = this.center ? 0.5 : 0;\n const sizeModifier = this.center ? 0.5 : 0;\n\n if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {\n style.top = \"auto\";\n style.right = \"auto\";\n style.bottom = `${offsetBottom + boundingRect.height}px`;\n\n style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;\n style.maxHeight = `${availableTop}px`;\n if (position === PopoverPosition.TOP_RIGHT) {\n style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;\n }\n } else if (position === PopoverPosition.TOP_LEFT) {\n style.top = \"auto\";\n style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;\n style.bottom = `${offsetBottom + boundingRect.height}px`;\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableTop}px`;\n } else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {\n style.top = `${offsetTop + boundingRect.height}px`;\n style.right = \"auto\";\n style.bottom = \"auto\";\n style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;\n style.maxHeight = `${availableBottom}px`;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;\n }\n } else if (position === PopoverPosition.BOTTOM_LEFT) {\n style.top = `${offsetTop + boundingRect.height}px`;\n style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;\n style.bottom = \"auto\";\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableBottom}px`;\n } else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {\n style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;\n style.right = \"auto\";\n style.bottom = \"auto\";\n style.left = `${offsetLeft + boundingRect.width}px`;\n style.maxWidth = `${availableRight}px`;\n style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;\n } else if (position === PopoverPosition.RIGHT_TOP) {\n style.top = \"auto\";\n style.right = \"auto\";\n style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;\n style.left = `${offsetLeft + boundingRect.width}px`;\n style.maxWidth = `${availableRight}px`;\n style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;\n } else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {\n style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;\n style.right = `${offsetRight + boundingRect.width}px`;\n style.bottom = \"auto\";\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;\n } else if (position === PopoverPosition.LEFT_TOP) {\n style.top = \"auto\";\n style.right = `${offsetRight + boundingRect.width}px`;\n style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;\n style.left = \"auto\";\n style.maxWidth = `${availableLeft}px`;\n style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;\n }\n\n this.currentPosition = position || this.position;\n this.host.setAttribute(\"current-position\", this.currentPosition);\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n this.onOpen();\n }\n\n render(): HTMLSlotElement {\n return <slot></slot>;\n }\n}\n"]}
|
|
@@ -15,6 +15,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
15
15
|
this.startTyping = createEvent(this, "startTyping", 7);
|
|
16
16
|
this.stopTyping = createEvent(this, "stopTyping", 7);
|
|
17
17
|
this.inputCheck = createEvent(this, "inputCheck", 7);
|
|
18
|
+
this.ariaDescendantFocus = createEvent(this, "ariaDescendantFocus", 7);
|
|
18
19
|
this.typingtimeout = 300;
|
|
19
20
|
this.htmlid = `id-${randomId()}`;
|
|
20
21
|
this.type = undefined;
|
|
@@ -46,6 +47,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
46
47
|
this.step = undefined;
|
|
47
48
|
this.pattern = undefined;
|
|
48
49
|
this.size = ControlSize.BIG;
|
|
50
|
+
this.innerTabIndex = undefined;
|
|
49
51
|
this.isTyping = false;
|
|
50
52
|
this.passwordHidden = true;
|
|
51
53
|
}
|
|
@@ -157,6 +159,9 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
157
159
|
pattern: this.pattern,
|
|
158
160
|
};
|
|
159
161
|
}
|
|
162
|
+
getTabIndexAttribute() {
|
|
163
|
+
return this.innerTabIndex ? { tabindex: this.innerTabIndex } : {};
|
|
164
|
+
}
|
|
160
165
|
getRoleAttribute() {
|
|
161
166
|
return this.role ? { role: this.role } : {};
|
|
162
167
|
}
|
|
@@ -169,7 +174,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
169
174
|
}
|
|
170
175
|
renderInputText(type = InputType.TEXT) {
|
|
171
176
|
const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
|
|
172
|
-
const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes());
|
|
177
|
+
const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes()), this.getTabIndexAttribute());
|
|
173
178
|
if (this.icon || type === InputType.PASSWORD) {
|
|
174
179
|
Object.assign(attr.class, { "has-icon": true });
|
|
175
180
|
}
|
|
@@ -220,7 +225,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
220
225
|
renderTextarea() {
|
|
221
226
|
const attributes = this.getTextAttributes();
|
|
222
227
|
const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
|
|
223
|
-
return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaLabel, this.getRoleAttribute()))), this.renderMessage()));
|
|
228
|
+
return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaLabel, this.getRoleAttribute(), this.getTabIndexAttribute()))), this.renderMessage()));
|
|
224
229
|
}
|
|
225
230
|
/* END textarea */
|
|
226
231
|
handleCheck(ev) {
|
|
@@ -229,7 +234,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
229
234
|
}
|
|
230
235
|
/* START checkbox */
|
|
231
236
|
renderCheckbox() {
|
|
232
|
-
return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute())), h("label", { htmlFor: this.htmlid, class: {
|
|
237
|
+
return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value, onFocus: () => this.ariaDescendantFocus.emit(this.htmlid) }, this.getRoleAttribute(), this.getTabIndexAttribute())), h("label", { htmlFor: this.htmlid, class: {
|
|
233
238
|
"checkbox-label": true,
|
|
234
239
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
235
240
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
@@ -238,7 +243,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
238
243
|
/* END checkbox */
|
|
239
244
|
/* START radio */
|
|
240
245
|
renderRadio() {
|
|
241
|
-
return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute())), h("label", { htmlFor: this.htmlid, class: {
|
|
246
|
+
return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value, onFocus: () => this.ariaDescendantFocus.emit(this.htmlid) }, this.getRoleAttribute(), this.getTabIndexAttribute())), h("label", { htmlFor: this.htmlid, class: {
|
|
242
247
|
"radio-label": true,
|
|
243
248
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
244
249
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
@@ -260,7 +265,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
260
265
|
default:
|
|
261
266
|
input = this.renderInputText(this.type);
|
|
262
267
|
}
|
|
263
|
-
return h(Host, { key: '
|
|
268
|
+
return h(Host, { key: '091e41470049a180401735588b3d584b591a9a50' }, input);
|
|
264
269
|
}
|
|
265
270
|
get hostElement() { return this; }
|
|
266
271
|
static get style() { return ZInputStyle0; }
|
|
@@ -295,6 +300,7 @@ const ZInput = /*@__PURE__*/ proxyCustomElement(class ZInput extends HTMLElement
|
|
|
295
300
|
"step": [2],
|
|
296
301
|
"pattern": [1],
|
|
297
302
|
"size": [513],
|
|
303
|
+
"innerTabIndex": [2, "inner-tab-index"],
|
|
298
304
|
"isTyping": [32],
|
|
299
305
|
"passwordHidden": [32],
|
|
300
306
|
"isChecked": [64]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index10.js","mappings":"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","names":[],"sources":["src/components/inputs/z-input/styles.css?tag=z-input&encapsulation=scoped","src/components/inputs/z-input/index.tsx"],"sourcesContent":["@import \"styles-general.css\";\n@import \"styles-text.css\";\n@import \"styles-textarea.css\";\n@import \"styles-checkbox-radio.css\";\n","import {Component, Prop, State, h, Method, Event, EventEmitter, Element, Listen} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {InputType, LabelPosition, InputStatus, ControlSize} from \"../../../beans\";\nimport {boolean, randomId} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** input types */\n @Prop()\n type: InputType;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input aria-expaded (optional): available for text, password, number, email */\n @Prop()\n ariaExpanded?: string;\n\n /** the input aria-controls (optional): available for text, password, number, email */\n @Prop()\n ariaControls?: string;\n\n /** the input aria-autocomplete (optional): available for text, password, number, email */\n @Prop()\n ariaAutocomplete?: string;\n\n /** the input aria-activedescendant (optional): available for text, password, number, email */\n @Prop()\n ariaActivedescendant?: string;\n\n /** the input value */\n @Prop({mutable: true})\n value?: string;\n\n /** the input is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n @Prop()\n required?: boolean = false;\n\n /** checked: available for checkbox, radio */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional): available for text, password, number, email, textarea */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input label position: available for checkbox, radio */\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /** the input has autocomplete option (optional): available for text, password, number, email */\n @Prop()\n autocomplete?: string;\n\n /** the input role (optional) */\n @Prop()\n role?: string;\n\n /** render clear icon when typing (optional): available for text */\n @Prop()\n hasclearicon?: boolean = true;\n\n /** render icon (optional): available for text */\n @Prop()\n icon?: string;\n\n /** min number value (optional): available for number */\n @Prop()\n min?: number;\n\n /** Min length value (optional): available for text */\n @Prop()\n minlength?: number;\n\n /** max number value (optional): available for number */\n @Prop()\n max?: number;\n\n /** Max length value (optional): available for text */\n @Prop()\n maxlength?: number;\n\n /** step number value (optional): available for number */\n @Prop()\n step?: number;\n\n /** pattern value (optional): available for tel, text, search, url, email, password*/\n @Prop()\n pattern?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /** get checked status */\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /** Emitted on input value change, returns value, validity */\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /** Emitted when user starts typing */\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /** Emitted when user stops typing, returns value, validity */\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n /* START text/password/email/number */\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n };\n if (this.icon || type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n />\n );\n }\n\n /* END text/password/email/number */\n\n /* START textarea */\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n /* END checkbox */\n\n /* START radio */\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n {...this.getRoleAttribute()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n /* END radio */\n\n render(): HTMLInputElement | HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"index10.js","mappings":"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","names":[],"sources":["src/components/inputs/z-input/styles.css?tag=z-input&encapsulation=scoped","src/components/inputs/z-input/index.tsx"],"sourcesContent":["@import \"styles-general.css\";\n@import \"styles-text.css\";\n@import \"styles-textarea.css\";\n@import \"styles-checkbox-radio.css\";\n","import {Component, Prop, State, h, Method, Event, EventEmitter, Element, Listen} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {InputType, LabelPosition, InputStatus, ControlSize} from \"../../../beans\";\nimport {boolean, randomId} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-input\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZInput {\n @Element() hostElement: HTMLZInputElement;\n\n /** the id of the input element */\n @Prop()\n htmlid = `id-${randomId()}`;\n\n /** input types */\n @Prop()\n type: InputType;\n\n /** the input name */\n @Prop()\n name?: string;\n\n /** the input label */\n @Prop()\n label?: string;\n\n /** the input aria-label */\n @Prop()\n ariaLabel = \"\";\n\n /** the input aria-expaded (optional): available for text, password, number, email */\n @Prop()\n ariaExpanded?: string;\n\n /** the input aria-controls (optional): available for text, password, number, email */\n @Prop()\n ariaControls?: string;\n\n /** the input aria-autocomplete (optional): available for text, password, number, email */\n @Prop()\n ariaAutocomplete?: string;\n\n /** the input aria-activedescendant (optional): available for text, password, number, email */\n @Prop()\n ariaActivedescendant?: string;\n\n /** the input value */\n @Prop({mutable: true})\n value?: string;\n\n /** the input is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** the input is readonly */\n @Prop()\n readonly?: boolean = false;\n\n /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n @Prop()\n required?: boolean = false;\n\n /** checked: available for checkbox, radio */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** the input placeholder (optional) */\n @Prop()\n placeholder?: string;\n\n /** the input html title (optional) */\n @Prop()\n htmltitle?: string;\n\n /** the input status (optional): available for text, password, number, email, textarea */\n @Prop()\n status?: InputStatus;\n\n /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n @Prop()\n message?: string | boolean = true;\n\n /** the input label position: available for checkbox, radio */\n @Prop()\n labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n /** the input has autocomplete option (optional): available for text, password, number, email */\n @Prop()\n autocomplete?: string;\n\n /** the input role (optional) */\n @Prop()\n role?: string;\n\n /** render clear icon when typing (optional): available for text */\n @Prop()\n hasclearicon?: boolean = true;\n\n /** render icon (optional): available for text */\n @Prop()\n icon?: string;\n\n /** min number value (optional): available for number */\n @Prop()\n min?: number;\n\n /** Min length value (optional): available for text */\n @Prop()\n minlength?: number;\n\n /** max number value (optional): available for number */\n @Prop()\n max?: number;\n\n /** Max length value (optional): available for text */\n @Prop()\n maxlength?: number;\n\n /** step number value (optional): available for number */\n @Prop()\n step?: number;\n\n /** pattern value (optional): available for tel, text, search, url, email, password*/\n @Prop()\n pattern?: string;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop({reflect: true})\n size?: ControlSize = ControlSize.BIG;\n\n /** set tabindex to input tag (optional). Defaults to native behaviour. */\n @Prop()\n innerTabIndex?: number;\n\n @State()\n isTyping = false;\n\n @State()\n passwordHidden = true;\n\n private timer;\n\n private typingtimeout = 300;\n\n private inputRef: HTMLInputElement;\n\n @Listen(\"inputCheck\", {target: \"document\"})\n inputCheckListener(e: CustomEvent): void {\n const data = e.detail;\n switch (this.type) {\n case InputType.RADIO:\n if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n this.checked = false;\n }\n break;\n }\n }\n\n /** get checked status */\n @Method()\n async isChecked(): Promise<boolean> {\n switch (this.type) {\n case InputType.CHECKBOX:\n case InputType.RADIO:\n return this.checked;\n default:\n console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n return false;\n }\n }\n\n /** Emitted on input value change, returns value, validity */\n @Event()\n inputChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n if (!this.isTyping) {\n this.emitStartTyping();\n }\n\n let validity: ValidityState;\n if (this.type === InputType.TEXTAREA) {\n validity = this.getValidity(\"textarea\");\n } else {\n validity = this.getValidity(\"input\");\n }\n this.value = value;\n this.inputChange.emit({value, validity});\n\n clearTimeout(this.timer);\n this.timer = setTimeout(() => {\n this.emitStopTyping(this.value, validity);\n }, this.typingtimeout);\n }\n\n /** Emitted when user starts typing */\n @Event()\n startTyping: EventEmitter;\n\n private emitStartTyping(): void {\n this.isTyping = true;\n this.startTyping.emit();\n }\n\n /** Emitted when user stops typing, returns value, validity */\n @Event()\n stopTyping: EventEmitter;\n\n private emitStopTyping(value: string, validity: ValidityState): void {\n this.isTyping = false;\n this.stopTyping.emit({\n value: value,\n validity: validity,\n });\n }\n\n /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n @Event()\n inputCheck: EventEmitter;\n\n private emitInputCheck(checked: boolean): void {\n this.inputCheck.emit({\n id: this.htmlid,\n checked: checked,\n type: this.type,\n name: this.name,\n value: this.value,\n validity: this.getValidity(\"input\"),\n });\n }\n\n /** set parent aria-activedescendant on focus event, returns filterid */\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<string>;\n\n private getValidity(type: string): ValidityState {\n const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n return input.validity;\n }\n\n /* START text/password/email/number */\n\n private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return {\n id: this.htmlid,\n name: this.name,\n placeholder: this.placeholder,\n value: this.value,\n disabled: this.disabled,\n readonly: this.readonly,\n required: this.required,\n title: this.htmltitle,\n minlength: this.minlength,\n maxlength: this.maxlength,\n class: {\n [`input-${this.status}`]: !!this.status,\n filled: !!this.value,\n },\n autocomplete: this.autocomplete,\n onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n };\n }\n\n private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (type != InputType.NUMBER) {\n return;\n }\n\n return {\n min: this.min,\n max: this.max,\n step: this.step,\n };\n }\n\n private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n if (\n type != InputType.PASSWORD &&\n type != InputType.TEXT &&\n type != InputType.TEL &&\n type != InputType.SEARCH &&\n type != InputType.URL &&\n type != InputType.EMAIL\n ) {\n return;\n }\n\n return {\n pattern: this.pattern,\n };\n }\n\n private getTabIndexAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.innerTabIndex ? {tabindex: this.innerTabIndex} : {};\n }\n\n private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n return this.role ? {role: this.role} : {};\n }\n\n private getAriaAttrubutes(): Record<string, unknown> {\n const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n return {\n ...expanded,\n ...controls,\n ...autocomplete,\n ...activedescendant,\n };\n }\n\n private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n const attr = {\n ...this.getTextAttributes(),\n ...this.getNumberAttributes(type),\n ...this.getPatternAttribute(type),\n ...ariaLabel,\n ...this.getRoleAttribute(),\n ...this.getAriaAttrubutes(),\n ...this.getTabIndexAttribute(),\n };\n if (this.icon || type === InputType.PASSWORD) {\n Object.assign(attr.class, {\"has-icon\": true});\n }\n if (this.hasclearicon && type != InputType.NUMBER) {\n Object.assign(attr.class, {\"has-clear-icon\": true});\n }\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div>\n <input\n type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n {...attr}\n ref={(el) => (this.inputRef = el)}\n />\n {this.renderIcons()}\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n private renderLabel(): HTMLLabelElement {\n if (!this.label) {\n return;\n }\n\n return (\n <label\n class=\"input-label body-5-sb\"\n id={`${this.htmlid}_label`}\n htmlFor={this.htmlid}\n >\n {this.label}\n </label>\n );\n }\n\n private renderIcons(): HTMLSpanElement {\n return (\n <span class=\"icons-wrapper\">\n {this.renderResetIcon()}\n {this.renderIcon()}\n </span>\n );\n }\n\n private renderIcon(): HTMLButtonElement {\n if (this.type === InputType.PASSWORD) {\n return this.renderShowHidePassword();\n }\n\n if (!this.icon) {\n return;\n }\n\n return (\n <button\n type=\"button\"\n class=\"icon-button input-icon\"\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <z-icon\n name={this.icon}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderResetIcon(): HTMLButtonElement {\n let hidden = false;\n if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n hidden = true;\n }\n\n return (\n <button\n type=\"button\"\n class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n aria-label=\"cancella il contenuto dell'input\"\n onClick={() => {\n this.inputRef.value = \"\";\n this.emitInputChange(\"\");\n }}\n >\n <z-icon\n name=\"multiply\"\n class={this.size}\n />\n </button>\n );\n }\n\n private renderShowHidePassword(): HTMLButtonElement {\n return (\n <button\n type=\"button\"\n class=\"icon-button toggle-password-icon\"\n disabled={this.disabled}\n aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n onClick={() => (this.passwordHidden = !this.passwordHidden)}\n >\n <z-icon\n name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n class={this.size}\n />\n </button>\n );\n }\n\n private renderMessage(): HTMLZInputMessageElement {\n if (boolean(this.message) === false) {\n return;\n }\n\n return (\n <z-input-message\n message={boolean(this.message) === true ? undefined : (this.message as string)}\n status={this.status}\n class={this.size}\n />\n );\n }\n\n /* END text/password/email/number */\n\n /* START textarea */\n\n private renderTextarea(): HTMLDivElement {\n const attributes = this.getTextAttributes();\n const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n return (\n <div class=\"text-wrapper\">\n {this.renderLabel()}\n <div\n class={{\n ...(attributes.class as Record<string, boolean>),\n \"textarea-wrapper\": true,\n \"readonly\": attributes.readonly as boolean,\n }}\n >\n <textarea\n {...attributes}\n {...ariaLabel}\n {...this.getRoleAttribute()}\n {...this.getTabIndexAttribute()}\n ></textarea>\n </div>\n {this.renderMessage()}\n </div>\n );\n }\n\n /* END textarea */\n\n private handleCheck(ev: Event): void {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.emitInputCheck(this.checked);\n }\n\n /* START checkbox */\n private renderCheckbox(): HTMLDivElement {\n return (\n <div class=\"checkbox-wrapper\">\n <input\n id={this.htmlid}\n type=\"checkbox\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n onFocus={() => this.ariaDescendantFocus.emit(this.htmlid)}\n {...this.getRoleAttribute()}\n {...this.getTabIndexAttribute()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"checkbox-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label}></span>}\n </label>\n </div>\n );\n }\n\n /* END checkbox */\n\n /* START radio */\n private renderRadio(): HTMLDivElement {\n return (\n <div class=\"radio-wrapper\">\n <input\n id={this.htmlid}\n type=\"radio\"\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n readonly={this.readonly}\n onChange={this.handleCheck.bind(this)}\n value={this.value}\n onFocus={() => this.ariaDescendantFocus.emit(this.htmlid)}\n {...this.getRoleAttribute()}\n {...this.getTabIndexAttribute()}\n />\n\n <label\n htmlFor={this.htmlid}\n class={{\n \"radio-label\": true,\n \"after\": this.labelPosition === LabelPosition.RIGHT,\n \"before\": this.labelPosition === LabelPosition.LEFT,\n }}\n >\n <z-icon\n name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n aria-hidden=\"true\"\n class={this.size}\n />\n {this.label && <span innerHTML={this.label} />}\n </label>\n </div>\n );\n }\n /* END radio */\n\n render(): HTMLInputElement | HTMLDivElement {\n let input;\n switch (this.type) {\n case InputType.TEXTAREA:\n input = this.renderTextarea();\n break;\n case InputType.CHECKBOX:\n input = this.renderCheckbox();\n break;\n case InputType.RADIO:\n input = this.renderRadio();\n break;\n default:\n input = this.renderInputText(this.type);\n }\n\n return <Host>{input}</Host>;\n }\n}\n"],"version":3}
|