npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.92 → 0.0.94 - Mend

@genexus/genexus-ide-ui 0.0.92 → 0.0.94

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.

Files changed (1159) hide show

package/dist/components/gx-ide-create-kb-from-server.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-create-kb-from-server.js","mappings":"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","names":["GxIdeCreateKbFromServer"],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--color-background);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n grid-template-columns: auto 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 3;\n }\n > :nth-child(6) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.grid-data-kbs {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-grid-row-gap);\n .search-kbs {\n width: 100%;\n display: flex;\n }\n .box-kbs {\n height: 150px;\n }\n}\n.grid-data-kbs-footer {\n display: flex;\n}\n.flex {\n display: flex;\n > :nth-child(2) {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n State,\n getAssetPath\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/ CUSTOM IMPORTS /\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n FormSubmitResult,\n GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n tag: \"gx-ide-create-kb-from-server\",\n styleUrl: \"create-kb-from-server.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n [key: string]: any;\n\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n );\n\n / References needed to collect data with \"Connect\" and \"Create\" buttons submit/\n private authenticationTypeEl!: HTMLGxgComboBoxElement;\n private serverUrlsEl!: HTMLGxgComboBoxElement;\n private kbNameEl!: HTMLGxgFormTextElement;\n private passwordEl!: HTMLGxgFormTextElement;\n private userNameEl!: HTMLGxgFormTextElement;\n private searchKBEl!: HTMLGxgFormTextElement;\n private listBoxEl!: HTMLElement;\n private kbIdSelected: string = null;\n private authenticationTypes: GxOption[] = [];\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n Disabled or not the part for select and create the KB\n /\n @State() selectionKbDisabled = true;\n\n /\n KBs that return from connect to the server\n /\n @State() kbs: KBData[] = [];\n\n /\n KBs search text\n /\n @State() kbSearchText = \"\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n /\n @Prop() readonly connectCallback: (\n data: GXServerConnectionData\n ) => Promise<ConnectionResultData>;\n\n /\n Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n /\n @Prop() readonly createKBCallback: (\n data: CreateKBData\n ) => Promise<FormSubmitResult>;\n\n /\n If is true then the user can specify a server url that don't be in the combo box of server urls.\n /\n @Prop() readonly enableCustomServer: boolean = false;\n\n /\n The knowledge base default suggested name\n /\n @Prop() readonly kbName: string;\n\n /\n Password for the database connection.\n /\n @Prop() readonly password: string;\n\n /\n Array of URLs of cataloged servers to be displayed in the combo\n /\n @Prop() readonly serverUrls!: string[];\n\n /\n Username for the database connection.\n /\n @Prop() readonly userName: string;\n\n // 5.EVENTS (EMIT) //\n\n /\n This event is emitted once just after the component is fully loaded and the first render() occurs\n /\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n // this.setInitialValues();\n this.setAuthenticationTypes();\n }\n\n componentDidLoad() {\n (this.serverUrlsEl as HTMLElement).focus();\n this.addEventListeners();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private setAuthenticationTypes = () => {\n this.authenticationTypes = [\n {\n id: \"genexus\",\n value: \"genexus\",\n label: this._componentLocale.authenticationTypes.genexusAccount\n },\n {\n id: \"local\",\n value: \"local\",\n label: this._componentLocale.authenticationTypes.local\n }\n ];\n };\n\n private addEventListeners = () => {\n this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n this.reset();\n });\n\n this.searchKBEl.addEventListener(\n \"valueChanged\",\n (e: CustomEvent<string>) => {\n this.kbNameEl.value = \"\";\n this.kbIdSelected = null;\n this.kbSearchText = e.detail;\n }\n );\n\n this.listBoxEl.addEventListener(\n \"selectionChanged\",\n (ev: CustomEvent<SelectionChangedEvent>): void => {\n const selectedItems = ev.detail.items;\n let selectedItem;\n if (selectedItems.length > 0) {\n selectedItem = ev.detail.items[0];\n }\n if (selectedItem) {\n this.kbIdSelected = selectedItem.value;\n const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n if (kbSelected) {\n this.kbNameEl.value = kbSelected.name;\n }\n }\n }\n );\n };\n\n private reset() {\n this.kbs = [];\n this.kbIdSelected = null;\n this.selectionKbDisabled = true;\n this.searchKBEl.value = \"\";\n this.kbSearchText = \"\";\n }\n\n private createKbHandler = (): void => {\n if (this.createKBCallback) {\n const createKBCallbackPromise = this.createKBCallback({\n id: this.kbIdSelected,\n name: this.kbNameEl.value\n });\n createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private connectCallbackHandler = (): void => {\n if (this.connectCallback) {\n const connectCallbackPromise = this.connectCallback({\n serverUrl: this.serverUrlsEl.value,\n authenticationType: this.authenticationTypeEl.value,\n user: this.userNameEl?.value,\n password: this.passwordEl?.value\n });\n connectCallbackPromise.then(\n (connectionResultData: ConnectionResultData) => {\n formSubmitValidation(connectionResultData.formResult, this);\n if (\n connectionResultData.formResult.success &&\n connectionResultData.kbs\n ) {\n this.kbs = connectionResultData.kbs;\n this.selectionKbDisabled = false;\n }\n }\n );\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n // 11.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n >\n <div class=\"flex\">\n {/ #kb name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {this._componentLocale.label.serverUrl}\n </gxg-label>\n <gxg-combo-box\n disableFilter={!this.enableCustomServer}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n }\n class=\"server-urls-combo-box\"\n part=\"server-urls\"\n >\n {this.serverUrls\n ? renderFormItems(\n \"gxg-combo-box-item\",\n this.serverUrls.map(sUrl => ({\n id: sUrl,\n label: sUrl,\n value: sUrl\n })),\n \"server-urls\"\n )\n : null}\n </gxg-combo-box>\n </div>\n <div class=\"grid grid-data\">\n <div>\n <div class=\"grid grid-data-account\">\n {/ #authentication type /}\n <gxg-combo-box\n disableFilter\n value={this.authenticationTypes[0].id}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n }\n class=\"authentication-type\"\n part=\"authentication-type\"\n onValueChanged={this.evaluateAuthenticationType}\n >\n {renderFormItems(\n \"gxg-combo-box-item\",\n this.authenticationTypes,\n \"authentication-type\"\n )}\n </gxg-combo-box>\n\n {/ #user name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.userName}:`}\n </gxg-label>\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.userNameEl = el as HTMLGxgFormTextElement)\n }\n value={this.userName}\n class=\"user-name\"\n part=\"user-name\"\n ></gxg-form-text>\n\n {/ #password /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.password}:`}\n </gxg-label>\n <gxg-form-text\n password\n ref={(el: HTMLGxgFormTextElement) =>\n (this.passwordEl = el as HTMLGxgFormTextElement)\n }\n value={this.password}\n class=\"password\"\n part=\"password\"\n ></gxg-form-text>\n\n {/ #connect /}\n <div>\n <gxg-button\n id=\"button-connect\"\n type=\"primary-text-only\"\n onClick={this.connectCallbackHandler}\n part=\"button-connect\"\n >\n {this._componentLocale.buttons.connect}\n </gxg-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid\">\n <div class=\"grid-data-kbs\">\n <div class=\"search-kbs\">\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.searchKBEl = el as HTMLGxgFormTextElement)\n }\n class=\"search-kb-input\"\n part=\"search-kb\"\n disabled={this.selectionKbDisabled}\n placeholder={this._componentLocale.label.searchKbs}\n ></gxg-form-text>\n </div>\n <div class=\"box-kbs\">\n <gxg-list-box\n single-selection\n disabled={this.selectionKbDisabled}\n ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part=\"kbs\"\n onSelectionChanged={this.kbsOnSelectionChangedHandler}\n >\n {this.kbs\n .filter(kb =>\n kb.name\n .toLowerCase()\n .includes(this.kbSearchText.toLowerCase())\n )\n .map(kb => (\n <gxg-list-box-item value={kb.id} key={kb.id}>\n {kb.name}\n </gxg-list-box-item>\n ))}\n </gxg-list-box>\n </div>\n </div>\n <div class=\"grid grid-data-kbs-footer\">\n {/ #kbName /}\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.kbNameEl = el as HTMLGxgFormTextElement)\n }\n label={this._componentLocale.localKb}\n value={this.kbName}\n class=\"kb-name\"\n part=\"kb-name\"\n disabled={this.selectionKbDisabled}\n ></gxg-form-text>\n\n {/ #create button */}\n <div>\n <gxg-button\n id=\"button-create\"\n type=\"primary-text-only\"\n onClick={this.createKbHandler}\n part=\"button-create\"\n disabled={this.selectionKbDisabled}\n >\n {this._componentLocale.buttons.create}\n </gxg-button>\n </div>\n </div>\n </div>\n </div>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface GXServerConnectionData {\n serverUrl: string;\n authenticationType: GxServerAuthenticationType;\n user: string;\n password: string;\n}\nexport type ConnectionResultData = {\n formResult: FormSubmitResult;\n kbs: KBData[];\n};\nexport interface KBData {\n id: string;\n name: string;\n}\nexport interface CreateKBData {\n id: string;\n name: string;\n}\n"],"version":3}
1	+ {"file":"gx-ide-create-kb-from-server.js","mappings":"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","names":["GxIdeCreateKbFromServer"],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--color-background);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n grid-template-columns: auto 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 3;\n }\n > :nth-child(6) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.grid-data-kbs {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-grid-row-gap);\n .search-kbs {\n width: 100%;\n display: flex;\n }\n .box-kbs {\n height: 150px;\n }\n}\n.grid-data-kbs-footer {\n display: flex;\n}\n.flex {\n display: flex;\n > :nth-child(2) {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n State,\n getAssetPath,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/ CUSTOM IMPORTS /\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n FormSubmitResult,\n GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n tag: \"gx-ide-create-kb-from-server\",\n styleUrl: \"create-kb-from-server.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n [key: string]: any;\n\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n );\n\n / References needed to collect data with \"Connect\" and \"Create\" buttons submit/\n private authenticationTypeEl!: HTMLGxgComboBoxElement;\n private serverUrlsEl!: HTMLGxgComboBoxElement;\n private kbNameEl!: HTMLGxgFormTextElement;\n private passwordEl!: HTMLGxgFormTextElement;\n private userNameEl!: HTMLGxgFormTextElement;\n private searchKBEl!: HTMLGxgFormTextElement;\n private listBoxEl!: HTMLElement;\n private kbIdSelected: string = null;\n private authenticationTypes: GxOption[] = [];\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n Disabled or not the part for select and create the KB\n /\n @State() selectionKbDisabled = true;\n\n /\n KBs that return from connect to the server\n /\n\n @State() kbs: KBData[] = [];\n @Watch(\"kbs\")\n watchPropHandler(newKbs: KBData[]) {\n / When the list of servers are updated, the first server is selected by default /\n this.kbIdSelected = newKbs[0].id;\n this.kbName = newKbs[0].name;\n }\n\n /\n KBs search text\n /\n @State() kbSearchText = \"\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n /\n @Prop() readonly connectCallback: (\n data: GXServerConnectionData\n ) => Promise<ConnectionResultData>;\n\n /\n Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n /\n @Prop() readonly createKBCallback: (\n data: CreateKBData\n ) => Promise<FormSubmitResult>;\n\n /\n If is true then the user can specify a server url that don't be in the combo box of server urls.\n /\n @Prop() readonly enableCustomServer: boolean = false;\n\n /\n The knowledge base default suggested name\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) kbName: string;\n\n /\n Password for the database connection.\n /\n @Prop() readonly password: string;\n\n /\n Array of URLs of cataloged servers to be displayed in the combo\n /\n @Prop() readonly serverUrls!: string[];\n\n /\n Username for the database connection.\n /\n @Prop() readonly userName: string;\n\n // 5.EVENTS (EMIT) //\n\n /\n This event is emitted once just after the component is fully loaded and the first render() occurs\n /\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.setAuthenticationTypes();\n }\n\n componentDidLoad() {\n (this.serverUrlsEl as HTMLElement).focus();\n this.addEventListeners();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private setAuthenticationTypes = () => {\n this.authenticationTypes = [\n {\n id: \"genexus\",\n value: \"genexus\",\n label: this._componentLocale.authenticationTypes.genexusAccount\n },\n {\n id: \"local\",\n value: \"local\",\n label: this._componentLocale.authenticationTypes.local\n }\n ];\n };\n\n private addEventListeners = () => {\n this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n this.reset();\n });\n\n this.searchKBEl.addEventListener(\n \"valueChanged\",\n (e: CustomEvent<string>) => {\n this.kbNameEl.value = \"\";\n this.kbIdSelected = null;\n this.kbSearchText = e.detail;\n }\n );\n\n this.listBoxEl.addEventListener(\n \"selectionChanged\",\n (ev: CustomEvent<SelectionChangedEvent>): void => {\n const selectedItems = ev.detail.items;\n let selectedItem;\n if (selectedItems.length > 0) {\n selectedItem = ev.detail.items[0];\n }\n if (selectedItem) {\n this.kbIdSelected = selectedItem.value;\n const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n if (kbSelected) {\n this.kbNameEl.value = kbSelected.name;\n }\n }\n }\n );\n };\n\n private reset() {\n this.kbs = [];\n this.kbIdSelected = null;\n this.selectionKbDisabled = true;\n this.searchKBEl.value = \"\";\n this.kbSearchText = \"\";\n }\n\n private createKbHandler = (): void => {\n if (this.createKBCallback) {\n const createKBCallbackPromise = this.createKBCallback({\n id: this.kbIdSelected,\n name: this.kbNameEl.value\n });\n createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private connectCallbackHandler = (): void => {\n if (this.connectCallback) {\n const connectCallbackPromise = this.connectCallback({\n serverUrl: this.serverUrlsEl.value,\n authenticationType: this.authenticationTypeEl.value,\n user: this.userNameEl?.value,\n password: this.passwordEl?.value\n });\n connectCallbackPromise.then(\n (connectionResultData: ConnectionResultData) => {\n formSubmitValidation(connectionResultData.formResult, this);\n if (\n connectionResultData.formResult.success &&\n connectionResultData.kbs\n ) {\n this.kbs = connectionResultData.kbs;\n this.selectionKbDisabled = false;\n }\n }\n );\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n // 11.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n >\n <div class=\"flex\">\n {/ #kb name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {this._componentLocale.label.serverUrl}\n </gxg-label>\n <gxg-combo-box\n disableFilter={!this.enableCustomServer}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n }\n class=\"server-urls-combo-box\"\n part=\"server-urls\"\n >\n {this.serverUrls\n ? renderFormItems(\n \"gxg-combo-box-item\",\n this.serverUrls.map(sUrl => ({\n id: sUrl,\n label: sUrl,\n value: sUrl\n })),\n \"server-urls\"\n )\n : null}\n </gxg-combo-box>\n </div>\n <div class=\"grid grid-data\">\n <div>\n <div class=\"grid grid-data-account\">\n {/ #authentication type /}\n <gxg-combo-box\n disableFilter\n value={this.authenticationTypes[0].id}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n }\n class=\"authentication-type\"\n part=\"authentication-type\"\n onValueChanged={this.evaluateAuthenticationType}\n >\n {renderFormItems(\n \"gxg-combo-box-item\",\n this.authenticationTypes,\n \"authentication-type\"\n )}\n </gxg-combo-box>\n\n {/ #user name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.userName}:`}\n </gxg-label>\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.userNameEl = el as HTMLGxgFormTextElement)\n }\n value={this.userName}\n class=\"user-name\"\n part=\"user-name\"\n ></gxg-form-text>\n\n {/ #password /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.password}:`}\n </gxg-label>\n <gxg-form-text\n password\n ref={(el: HTMLGxgFormTextElement) =>\n (this.passwordEl = el as HTMLGxgFormTextElement)\n }\n value={this.password}\n class=\"password\"\n part=\"password\"\n ></gxg-form-text>\n\n {/ #connect /}\n <div>\n <gxg-button\n id=\"button-connect\"\n type=\"primary-text-only\"\n onClick={this.connectCallbackHandler}\n part=\"button-connect\"\n >\n {this._componentLocale.buttons.connect}\n </gxg-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid\">\n <div class=\"grid-data-kbs\">\n <div class=\"search-kbs\">\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.searchKBEl = el as HTMLGxgFormTextElement)\n }\n class=\"search-kb-input\"\n part=\"search-kb\"\n disabled={this.selectionKbDisabled}\n placeholder={this._componentLocale.label.searchKbs}\n ></gxg-form-text>\n </div>\n <div class=\"box-kbs\">\n <gxg-list-box\n singleSelection\n disabled={this.selectionKbDisabled}\n ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part=\"kbs\"\n >\n {this.kbs\n .filter(kb =>\n kb.name\n .toLowerCase()\n .includes(this.kbSearchText.toLowerCase())\n )\n .map(kb => (\n <gxg-list-box-item value={kb.id} key={kb.id}>\n {kb.name}\n </gxg-list-box-item>\n ))}\n </gxg-list-box>\n </div>\n </div>\n <div class=\"grid grid-data-kbs-footer\">\n {/ #kbName /}\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.kbNameEl = el as HTMLGxgFormTextElement)\n }\n label={this._componentLocale.localKb}\n value={this.kbName}\n class=\"kb-name\"\n part=\"kb-name\"\n disabled={this.selectionKbDisabled}\n ></gxg-form-text>\n\n {/ #create button */}\n <div>\n <gxg-button\n id=\"button-create\"\n type=\"primary-text-only\"\n onClick={this.createKbHandler}\n part=\"button-create\"\n disabled={this.selectionKbDisabled}\n >\n {this._componentLocale.buttons.create}\n </gxg-button>\n </div>\n </div>\n </div>\n </div>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface GXServerConnectionData {\n serverUrl: string;\n authenticationType: GxServerAuthenticationType;\n user: string;\n password: string;\n}\nexport type ConnectionResultData = {\n formResult: FormSubmitResult;\n kbs: KBData[];\n};\nexport interface KBData {\n id: string;\n name: string;\n}\nexport interface CreateKBData {\n id: string;\n name: string;\n}\n"],"version":3}

package/dist/components/gx-ide-status-buttons2.js CHANGED Viewed

@@ -70,7 +70,7 @@ const GxIdeStatusButtons = /*@__PURE__*/ proxyCustomElement(class GxIdeStatusBut
                 "active-indicator": true
             } }))) : null, !this.hideSuccess ? (h("gx-ide-list-selector-item", { itemId: "successes", itemValue: this.evaluateLabel("successes"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
                 "active-indicator": true
-            } }))) : null, !this.hideMessage ? (h("gx-ide-list-selector-item", { itemId: "messages", itemValue: this.evaluateLabel("messages"), icon: "gx-test/screenshot-viewer", iconColor: this.successes === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
+            } }))) : null, !this.hideMessage ? (h("gx-ide-list-selector-item", { itemId: "messages", itemValue: this.evaluateLabel("messages"), icon: "gx-test/screenshot-viewer", iconColor: this.messages === 0 ? "disabled" : "auto", class: { "message": true, "not-zero": this.messages !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
                 "active-indicator": true
             } }))) : null)));
     }

package/dist/components/gx-ide-status-buttons2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-status-buttons2.js","mappings":"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","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx"],"sourcesContent":[":host {\n display: block;\n border: 1px solid var(--gx-ide-container-border-color);\n --status-buttons-label-color: var(--gray-06);\n}\n/list-selector/\ngx-ide-list-selector::part(list) {\n display: flex;\n flex-direction: row;\n}\n/list-selector-items/\ngx-ide-list-selector-item {\n border-block-start: none !important; //reset\n\n &.not-zero {\n font-weight: var(--font-weight-semibold);\n }\n\n &:not(:last-child) {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n flex: 1;\n text-align: center;\n\n .label {\n &__wrapper {\n display: inline-flex;\n width: auto;\n min-height: 0;\n }\n &__description {\n color: var(--status-buttons-label-color);\n }\n }\n\n /active indicator/\n .active-indicator {\n display: inline-block;\n width: var(--spacing-comp-02);\n height: var(--spacing-comp-02);\n border: 1px solid var(--gray-07);\n border-radius: calc(var(--spacing-comp-02) / 2);\n }\n input:checked {\n + .label {\n --status-buttons-label-color: var(--color-on-background);\n background-color: inherit;\n\n .active-indicator {\n background-color: var(--color-primary-enabled);\n border-color: var(--color-primary-active);\n }\n }\n }\n\n /hover/\n &:hover {\n input:checked + .label {\n background-color: var(--gxg-background-color--hover) !important;\n }\n }\n}\n\n/--------------------\nCompact size\n--------------------/\n:host([compact]) {\n gx-ide-list-selector-item {\n font-size: var(--font-size-md);\n }\n .label__wrapper {\n gap: var(--spacing-comp-01);\n padding: var(--spacing-comp-00) var(--spacing-comp-02)\n var(--spacing-comp-00) var(--spacing-comp-01);\n }\n .label__universal-slot {\n margin-inline-end: var(--spacing-comp-00);\n }\n}\n\n/--------------------\nAll about borders\n--------------------/\n:host([no-border]) {\n border: none;\n}\n:host([no-border-top]) {\n border-top: none;\n}\n:host([no-border-end]) {\n border-inline-end: none;\n}\n:host([no-border-bottom]) {\n border-bottom: none;\n}\n:host([no-border-start]) {\n border-inline-start: none;\n}\n:host([no-inner-borders]) {\n gx-ide-list-selector-item {\n border-inline-end: none;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/ CUSTOM IMPORTS /\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n tag: \"gx-ide-status-buttons\",\n styleUrl: \"gx-ide-status-buttons.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n /\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES \| WATCH'S //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n\n /\n Whether or not the buttons are active\n /\n @Prop() readonly active: boolean = false;\n\n /\n The errors amount\n /\n @Prop() readonly errors: number = 0;\n\n /\n Hide the errors button\n /\n @Prop() readonly hideError: boolean = false;\n\n /\n The warnings amount\n /\n @Prop() readonly warnings: number = 0;\n\n /\n Hide the warnings button\n /\n @Prop() readonly hideWarning: boolean = false;\n\n /\n The successes amount\n /\n @Prop() readonly successes: number = 0;\n\n /\n Hide the successes button\n /\n @Prop() readonly hideSuccess: boolean = false;\n\n /\n The messages amount\n /\n @Prop() readonly messages: number = 0;\n\n /\n Hide the messages button\n /\n @Prop() readonly hideMessage: boolean = false;\n\n /\n Display only the number\n /\n @Prop() readonly minimal: boolean = false;\n\n /\n If present will make the component look smaller.\n /\n @Prop({ reflect: true }) readonly compact: boolean = false;\n\n /\n No border all around\n /\n @Prop({ reflect: true }) readonly noBorder: boolean = false;\n\n /\n No inner borders\n /\n @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n /\n No border on the top\n /\n @Prop({ reflect: true }) readonly noBorderTop: boolean = false;\n\n /\n No border on the end\n /\n @Prop({ reflect: true }) readonly noBorderEnd: boolean = false;\n\n /\n No border on the bottom\n /\n @Prop({ reflect: true }) readonly noBorderBottom: boolean = false;\n\n /\n No border on the start\n /\n @Prop({ reflect: true }) readonly noBorderStart: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeStatusButtonsElement;\n\n // 3.STATE() VARIABLES //\n\n @State() iconsSize: Size = \"regular\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n // 5.EVENTS (EMIT) //\n\n /\n Emits the actual selection\n */\n @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateIconsSize();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateIconsSize = () => {\n if (this.compact) {\n this.iconsSize = \"small\";\n }\n };\n\n private evaluateLabel = (\n type: \"errors\" \| \"warnings\" \| \"successes\" \| \"messages\"\n ): string => {\n const amount = this[type];\n if (this.minimal) {\n return `${amount}`;\n } else {\n const singular: boolean = amount === 1;\n return singular\n ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n }\n };\n\n private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n e.stopPropagation();\n this.selectionChanged.emit(e.detail);\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <gx-ide-list-selector\n type=\"multi-selection\"\n listName=\"status-buttons\"\n noListBorder\n ellipsis\n iconsSize={this.iconsSize}\n onSelectionChanged={this.selectionChangedHandler}\n >\n {!this.hideError ? (\n <gx-ide-list-selector-item\n itemId=\"errors\"\n itemValue={this.evaluateLabel(\"errors\")}\n icon=\"gx-test/result-exception\"\n iconColor={this.errors === 0 ? \"disabled\" : \"auto\"}\n class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideWarning ? (\n <gx-ide-list-selector-item\n itemId=\"warnings\"\n itemValue={this.evaluateLabel(\"warnings\")}\n icon=\"gx-test/result-warning\"\n iconColor={this.warnings === 0 ? \"disabled\" : \"auto\"}\n class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideSuccess ? (\n <gx-ide-list-selector-item\n itemId=\"successes\"\n itemValue={this.evaluateLabel(\"successes\")}\n icon=\"gx-test/result-ok\"\n iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideMessage ? (\n <gx-ide-list-selector-item\n itemId=\"messages\"\n itemValue={this.evaluateLabel(\"messages\")}\n icon=\"gx-test/screenshot-viewer\"\n iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n </gx-ide-list-selector>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"gx-ide-status-buttons2.js","mappings":"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","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx"],"sourcesContent":[":host {\n display: block;\n border: 1px solid var(--gx-ide-container-border-color);\n --status-buttons-label-color: var(--gray-06);\n}\n/list-selector/\ngx-ide-list-selector::part(list) {\n display: flex;\n flex-direction: row;\n}\n/list-selector-items/\ngx-ide-list-selector-item {\n border-block-start: none !important; //reset\n\n &.not-zero {\n font-weight: var(--font-weight-semibold);\n }\n\n &:not(:last-child) {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n flex: 1;\n text-align: center;\n\n .label {\n &__wrapper {\n display: inline-flex;\n width: auto;\n min-height: 0;\n }\n &__description {\n color: var(--status-buttons-label-color);\n }\n }\n\n /active indicator/\n .active-indicator {\n display: inline-block;\n width: var(--spacing-comp-02);\n height: var(--spacing-comp-02);\n border: 1px solid var(--gray-07);\n border-radius: calc(var(--spacing-comp-02) / 2);\n }\n input:checked {\n + .label {\n --status-buttons-label-color: var(--color-on-background);\n background-color: inherit;\n\n .active-indicator {\n background-color: var(--color-primary-enabled);\n border-color: var(--color-primary-active);\n }\n }\n }\n\n /hover/\n &:hover {\n input:checked + .label {\n background-color: var(--gxg-background-color--hover) !important;\n }\n }\n}\n\n/--------------------\nCompact size\n--------------------/\n:host([compact]) {\n gx-ide-list-selector-item {\n font-size: var(--font-size-md);\n }\n .label__wrapper {\n gap: var(--spacing-comp-01);\n padding: var(--spacing-comp-00) var(--spacing-comp-02)\n var(--spacing-comp-00) var(--spacing-comp-01);\n }\n .label__universal-slot {\n margin-inline-end: var(--spacing-comp-00);\n }\n}\n\n/--------------------\nAll about borders\n--------------------/\n:host([no-border]) {\n border: none;\n}\n:host([no-border-top]) {\n border-top: none;\n}\n:host([no-border-end]) {\n border-inline-end: none;\n}\n:host([no-border-bottom]) {\n border-bottom: none;\n}\n:host([no-border-start]) {\n border-inline-start: none;\n}\n:host([no-inner-borders]) {\n gx-ide-list-selector-item {\n border-inline-end: none;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n State,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/ CUSTOM IMPORTS /\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n tag: \"gx-ide-status-buttons\",\n styleUrl: \"gx-ide-status-buttons.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n /\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES \| WATCH'S //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n\n /\n Whether or not the buttons are active\n /\n @Prop() readonly active: boolean = false;\n\n /\n The errors amount\n /\n @Prop() readonly errors: number = 0;\n\n /\n Hide the errors button\n /\n @Prop() readonly hideError: boolean = false;\n\n /\n The warnings amount\n /\n @Prop() readonly warnings: number = 0;\n\n /\n Hide the warnings button\n /\n @Prop() readonly hideWarning: boolean = false;\n\n /\n The successes amount\n /\n @Prop() readonly successes: number = 0;\n\n /\n Hide the successes button\n /\n @Prop() readonly hideSuccess: boolean = false;\n\n /\n The messages amount\n /\n @Prop() readonly messages: number = 0;\n\n /\n Hide the messages button\n /\n @Prop() readonly hideMessage: boolean = false;\n\n /\n Display only the number\n /\n @Prop() readonly minimal: boolean = false;\n\n /\n If present will make the component look smaller.\n /\n @Prop({ reflect: true }) readonly compact: boolean = false;\n\n /\n No border all around\n /\n @Prop({ reflect: true }) readonly noBorder: boolean = false;\n\n /\n No inner borders\n /\n @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n /\n No border on the top\n /\n @Prop({ reflect: true }) readonly noBorderTop: boolean = false;\n\n /\n No border on the end\n /\n @Prop({ reflect: true }) readonly noBorderEnd: boolean = false;\n\n /\n No border on the bottom\n /\n @Prop({ reflect: true }) readonly noBorderBottom: boolean = false;\n\n /\n No border on the start\n /\n @Prop({ reflect: true }) readonly noBorderStart: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeStatusButtonsElement;\n\n // 3.STATE() VARIABLES //\n\n @State() iconsSize: Size = \"regular\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n // 5.EVENTS (EMIT) //\n\n /\n Emits the actual selection\n */\n @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateIconsSize();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateIconsSize = () => {\n if (this.compact) {\n this.iconsSize = \"small\";\n }\n };\n\n private evaluateLabel = (\n type: \"errors\" \| \"warnings\" \| \"successes\" \| \"messages\"\n ): string => {\n const amount = this[type];\n if (this.minimal) {\n return `${amount}`;\n } else {\n const singular: boolean = amount === 1;\n return singular\n ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n }\n };\n\n private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n e.stopPropagation();\n this.selectionChanged.emit(e.detail);\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <gx-ide-list-selector\n type=\"multi-selection\"\n listName=\"status-buttons\"\n noListBorder\n ellipsis\n iconsSize={this.iconsSize}\n onSelectionChanged={this.selectionChangedHandler}\n >\n {!this.hideError ? (\n <gx-ide-list-selector-item\n itemId=\"errors\"\n itemValue={this.evaluateLabel(\"errors\")}\n icon=\"gx-test/result-exception\"\n iconColor={this.errors === 0 ? \"disabled\" : \"auto\"}\n class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideWarning ? (\n <gx-ide-list-selector-item\n itemId=\"warnings\"\n itemValue={this.evaluateLabel(\"warnings\")}\n icon=\"gx-test/result-warning\"\n iconColor={this.warnings === 0 ? \"disabled\" : \"auto\"}\n class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideSuccess ? (\n <gx-ide-list-selector-item\n itemId=\"successes\"\n itemValue={this.evaluateLabel(\"successes\")}\n icon=\"gx-test/result-ok\"\n iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n {!this.hideMessage ? (\n <gx-ide-list-selector-item\n itemId=\"messages\"\n itemValue={this.evaluateLabel(\"messages\")}\n icon=\"gx-test/screenshot-viewer\"\n iconColor={this.messages === 0 ? \"disabled\" : \"auto\"}\n class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n itemChecked\n >\n <span\n slot=\"universal\"\n class={{\n \"active-indicator\": true\n }}\n ></span>\n </gx-ide-list-selector-item>\n ) : null}\n </gx-ide-list-selector>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/gxg-test.js CHANGED Viewed

@@ -1,56 +1,241 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './ch-shortcuts2.js';
-import { d as defineCustomElement$4 } from './ch-window2.js';
-import { d as defineCustomElement$3 } from './ch-window-close2.js';
-import { d as defineCustomElement$2 } from './shortcuts.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './form-checkbox.js';
+import { d as defineCustomElement$6 } from './icon2.js';
+import { d as defineCustomElement$5 } from './gxg-label2.js';
+import { d as defineCustomElement$4 } from './list-box.js';
+import { d as defineCustomElement$3 } from './list-box-item.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
-const testCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.card{overflow:auto;cursor:initial;height:100px}.card::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.card::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.card::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.card::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}";
+const testCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}";
 const GxgTest$1 = /*@__PURE__*/ proxyCustomElement(class GxgTest extends HTMLElement {
     constructor() {
-        this.sendClickHandler = () => {
-            console.log("clicked");
+        this.selectionHasChanged = e => {
+            console.log(e.detail);
+        };
+        this.checkboxChanged = e => {
+            console.log(e.detail);
+        };
+        this.updateKbs1 = () => {
+            this.kbs = [
+                {
+                    id: "uva",
+                    name: "uva",
+                    selected: false,
+                    disabled: false
+                },
+                {
+                    id: "manzana",
+                    name: "manzana",
+                    selected: true,
+                    disabled: false
+                },
+                {
+                    id: "pera",
+                    name: "pera",
+                    selected: false,
+                    disabled: false
+                },
+                {
+                    id: "sandia",
+                    name: "sandía",
+                    selected: false,
+                    disabled: true
+                }
+            ];
+        };
+        this.updateKbs2 = () => {
+            this.kbs = [
+                {
+                    id: "uva",
+                    name: "uva",
+                    selected: false,
+                    disabled: false
+                },
+                {
+                    id: "manzana",
+                    name: "manzana",
+                    selected: true,
+                    disabled: false
+                },
+                {
+                    id: "pera",
+                    name: "pera",
+                    selected: false,
+                    disabled: false
+                },
+                {
+                    id: "sandia",
+                    name: "sandía",
+                    selected: false,
+                    disabled: true
+                }
+            ];
+        };
+        this.updateKbs3 = () => {
+            this.kbs = [
+                {
+                    id: "uva",
+                    name: "uva",
+                    selected: false,
+                    disabled: false
+                },
+                {
+                    id: "manzana",
+                    name: "manzana",
+                    selected: false,
+                    disabled: true
+                },
+                {
+                    id: "pera",
+                    name: "pera",
+                    selected: true,
+                    disabled: false
+                },
+                {
+                    id: "sandia",
+                    name: "sandía",
+                    selected: true,
+                    disabled: true
+                }
+            ];
+        };
+        this.unselectLast = () => {
+            this.kbs = [
+                {
+                    id: "uva",
+                    name: "uva",
+                    selected: false,
+                    disabled: false
+                },
+                {
+                    id: "manzana",
+                    name: "manzana",
+                    selected: false,
+                    disabled: true
+                },
+                {
+                    id: "pera",
+                    name: "pera",
+                    selected: true,
+                    disabled: false
+                },
+                {
+                    id: "sandia",
+                    name: "sandía",
+                    selected: false,
+                    disabled: true
+                }
+            ];
+        };
+        this.singleSelectionChanged = e => {
+            console.log(e.detail);
         };
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.kbs = [];
     }
     get el() { return this; }
+    watchKbsHandler() { }
+    componentDidLoad() { }
     render() {
         return [
-            h("div", { class: "container" }, h("section", { class: "section-dev", "data-title": "shortcut" }, h("h2", null, "Formulario de Contacto"), h("div", null, h("label", { htmlFor: "nombre" }, "Nombre:"), h("input", { type: "text", id: "nombre", name: "nombre", "data-shortcut": "Alt+N" })), h("div", null, h("label", { htmlFor: "email" }, "Correo Electr\u00F3nico:"), h("input", { type: "email", id: "email", name: "email", "data-shortcut": "Alt+E", "data-shortcut-prevent": "Enter", "aria-keyshortcuts": "Alt+E" })), h("div", null, h("label", { htmlFor: "mensaje" }, "Mensaje:"), h("textarea", { id: "mensaje", name: "mensaje", "data-shortcut": "Alt+M" })), h("div", null, h("button", { id: "enviar", "data-shortcut": "Enter", "data-shortcut-action": "click", onClick: this.sendClickHandler }, "Enviar")))),
-            h("gxg-shortcuts", { src: "../assets/json/shortcuts.json" }),
+            h("div", null, h("p", null, "single selection"), h("gxg-list-box", { singleSelection: true,
+                // disabled={this.selectionKbDisabled}
+                // ref={(el: HTMLElement) => (this.listBoxEl = el)}
+                part: "kbs", onSelectionChanged: this.singleSelectionChanged }, this.kbs.map(kb => (h("gxg-list-box-item", { value: kb["id"], key: kb["id"], selected: kb["selected"], disabled: kb["disabled"] }, kb["name"]))))),
+            h("br", null),
+            h("div", null, h("p", null, "single selection allows empty"), h("gxg-list-box", { singleSelection: true,
+                // disabled={this.selectionKbDisabled}
+                // ref={(el: HTMLElement) => (this.listBoxEl = el)}
+                allowsEmpty: true, onSelectionChanged: this.selectionHasChanged, part: "kbs" }, this.kbs.map(kb => (h("gxg-list-box-item", { value: kb["id"], key: kb["id"], selected: kb["selected"], disabled: kb["disabled"] }, kb["name"]))))),
+            h("br", null),
+            h("div", null, h("p", null, "multi selection"), h("gxg-list-box", {
+                // disabled={this.selectionKbDisabled}
+                // ref={(el: HTMLElement) => (this.listBoxEl = el)}
+                onSelectionChanged: this.singleSelectionChanged, part: "kbs"
+            }, this.kbs.map(kb => (h("gxg-list-box-item", { value: kb["id"], key: kb["id"], selected: kb["selected"], disabled: kb["disabled"] }, kb["name"]))))),
+            h("br", null),
+            h("div", null, h("p", null, "multi selection allows empty"), h("gxg-list-box", {
+                // disabled={this.selectionKbDisabled}
+                // ref={(el: HTMLElement) => (this.listBoxEl = el)}
+                allowsEmpty: true, onSelectionChanged: this.selectionHasChanged, part: "kbs"
+            }, this.kbs.map(kb => (h("gxg-list-box-item", { value: kb["id"], key: kb["id"], selected: kb["selected"], disabled: kb["disabled"] }, kb["name"]))))),
+            h("br", null),
+            h("div", null, h("p", null, "disabled"), h("gxg-list-box", {
+                // disabled={this.selectionKbDisabled}
+                // ref={(el: HTMLElement) => (this.listBoxEl = el)}
+                disabled: true, onSelectionChanged: this.selectionHasChanged, part: "kbs"
+            }, this.kbs.map(kb => (h("gxg-list-box-item", { value: kb["id"], key: kb["id"], selected: kb["selected"] }, kb["name"]))))),
+            h("br", null),
+            h("div", null, h("p", null, "with checkboxes"), h("gxg-list-box", {
+                // disabled={this.selectionKbDisabled}
+                // ref={(el: HTMLElement) => (this.listBoxEl = el)}
+                checkboxes: true, onSelectionChanged: this.selectionHasChanged, onCheckedChanged: this.checkboxChanged, part: "kbs"
+            }, this.kbs.map(kb => (h("gxg-list-box-item", { value: kb["id"], key: kb["id"], selected: kb["selected"] }, kb["name"]))))),
+            h("br", null),
+            h("div", null, h("button", { onClick: this.updateKbs1 }, "No selected"), h("button", { onClick: this.updateKbs2 }, "Second selected"), h("button", { onClick: this.updateKbs3 }, "Second & third selected"), h("button", { onClick: this.unselectLast }, "Unselect last"))
         ];
     }
+    static get watchers() { return {
+        "kbs": ["watchKbsHandler"]
+    }; }
     static get style() { return testCss; }
-}, [1, "gxg-test"]);
+}, [1, "gxg-test", {
+        "kbs": [32]
+    }, undefined, {
+        "kbs": ["watchKbsHandler"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gxg-test", "ch-shortcuts", "ch-window", "ch-window-close", "gxg-shortcuts"];
+    const components = ["gxg-test", "ch-icon", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-list-box", "gxg-list-box-item", "gxg-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "gxg-test":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxgTest$1);
             }
             break;
-        case "ch-shortcuts":
+        case "ch-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "gxg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "gxg-form-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "gxg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "gxg-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ch-window":
+        case "gxg-list-box":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "ch-window-close":
+        case "gxg-list-box-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "gxg-shortcuts":
+        case "gxg-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/gxg-test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gxg-test.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,+1PAA+1P;;MCCl2PA,SAAO;;QAEhB,qBAAgB,GAAG;YACf,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;SAC1B,CAAC;;;;;;IACF,MAAM;QACF,OAAO;YACH,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,wBAAwB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,0BAA0B,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,sBAAsB,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;YACnyB,CAAC,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,+BAA+B,EAAE,CAAC;SAC/D,CAAC;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxgTest"],"sources":["node_modules/@genexus/gemini/dist/collection/components/test/test.css?tag=gxg-test&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/test/test.js"],"sourcesContent":[":root {\n --ui-animaton-speed: 0.2s;\n}\n\n/ALIGNMENT/\n/Ellipsis/\n/***************************************************\nTYPOGRAPHY\n**************************************************/\n/Title 01 (Positive)/\n.gxg-title-01 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n}\n\n/Title 01 (Negative)/\n.gxg-title-01--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-on-primary);\n}\n\n/Title 02 (Positive)/\n.gxg-title-02 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n}\n\n.gxg-title-02--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n color: var(--color-on-primary);\n}\n\n/Title 03/\n.gxg-title-03 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n}\n\n.gxg-title-03--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n color: var(--color-on-primary);\n}\n\n/Title 04/\n.gxg-title-04 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n}\n\n.gxg-title-04--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-on-primary);\n}\n\n/Title 05/\n.gxg-title-05 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.556em;\n}\n\n.gxg-title-05--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.556em;\n color: var(--color-on-primary);\n}\n\n/Text/\n.gxg-text {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n}\n\n.gxg-text--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-on-primary);\n}\n\n.gxg-text--gray {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--gray-05);\n}\n\n/Quote/\n.gxg-quote {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--color-on-primary);\n}\n\n/Link/\n.gxg-link {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-primary);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--color-primary-hover);\n}\n.gxg-link:active {\n color: var(--color-primary-active);\n}\n\n.gxg-link-gray {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-primary);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--gray-04);\n}\n.gxg-link-gray:hover {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-primary);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--gray-04);\n color: var(--gray-06);\n}\n\n/Alerts/\n.gxg-alert-error {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-error-dark);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-warning-dark);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-success-dark);\n display: inline-block;\n}\n\n/Tab/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/Label/\n.gxg-label {\n font-family: var(--font-family-primary) !important;\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm) !important;\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-primary-enabled);\n text-align: center;\n line-height: 1.455em;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/**************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*************************************************/\n.gxg-button-styles {\n font-family: var(--font-family-primary) !important;\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm) !important;\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-primary-enabled);\n text-align: center;\n line-height: 1.455em;\n}\n\n/*************************************************\nFORM ELEMENTS\n**************************************************/\n.gxg-scrollbar {\n / Track /\n / Handle /\n / Handle on hover /\n cursor: initial;\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width, 6px);\n height: var(--gxg-scrollbar-width, 6px);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background, --gray-02);\n border-radius: var(--gxg-scrollbar-track-border-radius, 10px);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background, --gray-05);\n border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);\n border: var(--gxg-scrollbar-track-thumb-border);\n background-clip: padding-box;\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);\n}\n\n.card {\n overflow: auto;\n / Track /\n / Handle /\n / Handle on hover */\n cursor: initial;\n height: 100px;\n}\n.card::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width, 6px);\n height: var(--gxg-scrollbar-width, 6px);\n}\n.card::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background, --gray-02);\n border-radius: var(--gxg-scrollbar-track-border-radius, 10px);\n}\n.card::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background, --gray-05);\n border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);\n border: var(--gxg-scrollbar-track-thumb-border);\n background-clip: padding-box;\n}\n.card::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);\n}","import { h } from \"@stencil/core\";\nexport class GxgTest {\n el;\n sendClickHandler = () => {\n console.log(\"clicked\");\n };\n render() {\n return [\n h(\"div\", { class: \"container\" }, h(\"section\", { class: \"section-dev\", \"data-title\": \"shortcut\" }, h(\"h2\", null, \"Formulario de Contacto\"), h(\"div\", null, h(\"label\", { htmlFor: \"nombre\" }, \"Nombre:\"), h(\"input\", { type: \"text\", id: \"nombre\", name: \"nombre\", \"data-shortcut\": \"Alt+N\" })), h(\"div\", null, h(\"label\", { htmlFor: \"email\" }, \"Correo Electr\\u00F3nico:\"), h(\"input\", { type: \"email\", id: \"email\", name: \"email\", \"data-shortcut\": \"Alt+E\", \"data-shortcut-prevent\": \"Enter\", \"aria-keyshortcuts\": \"Alt+E\" })), h(\"div\", null, h(\"label\", { htmlFor: \"mensaje\" }, \"Mensaje:\"), h(\"textarea\", { id: \"mensaje\", name: \"mensaje\", \"data-shortcut\": \"Alt+M\" })), h(\"div\", null, h(\"button\", { id: \"enviar\", \"data-shortcut\": \"Enter\", \"data-shortcut-action\": \"click\", onClick: this.sendClickHandler }, \"Enviar\")))),\n h(\"gxg-shortcuts\", { src: \"../assets/json/shortcuts.json\" }),\n ];\n }\n static get is() { return \"gxg-test\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"test.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"test.css\"]\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=test.js.map\n"],"version":3}
1	+ {"file":"gxg-test.js","mappings":"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","names":["GxgTest"],"sources":["node_modules/@genexus/gemini/dist/collection/components/test/test.css?tag=gxg-test&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/test/test.js"],"sourcesContent":[":root {\n --ui-animaton-speed: 0.2s;\n}\n\n/ALIGNMENT/\n/Ellipsis/\n/***************************************************\nTYPOGRAPHY\n**************************************************/\n/Title 01 (Positive)/\n.gxg-title-01 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n}\n\n/Title 01 (Negative)/\n.gxg-title-01--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-on-primary);\n}\n\n/Title 02 (Positive)/\n.gxg-title-02 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n}\n\n.gxg-title-02--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n color: var(--color-on-primary);\n}\n\n/Title 03/\n.gxg-title-03 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n}\n\n.gxg-title-03--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-xs);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n text-transform: uppercase;\n line-height: 1.556em;\n color: var(--color-on-primary);\n}\n\n/Title 04/\n.gxg-title-04 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n}\n\n.gxg-title-04--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-md);\n letter-spacing: var(--letter-spacing-md);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-on-primary);\n}\n\n/Title 05/\n.gxg-title-05 {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.556em;\n}\n\n.gxg-title-05--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-sm);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.556em;\n color: var(--color-on-primary);\n}\n\n/Text/\n.gxg-text {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n}\n\n.gxg-text--negative {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-on-primary);\n}\n\n.gxg-text--gray {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--gray-05);\n}\n\n/Quote/\n.gxg-quote {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--color-on-primary);\n}\n\n/Link/\n.gxg-link {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-primary);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--color-primary-hover);\n}\n.gxg-link:active {\n color: var(--color-primary-active);\n}\n\n.gxg-link-gray {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-primary);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--gray-04);\n}\n.gxg-link-gray:hover {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-primary);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--gray-04);\n color: var(--gray-06);\n}\n\n/Alerts/\n.gxg-alert-error {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-error-dark);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-warning-dark);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--font-family-primary);\n font-weight: var(--font-weight-regular);\n font-size: var(--font-size-sm);\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-on-background);\n text-align: start;\n line-height: 1.455em;\n color: var(--color-success-dark);\n display: inline-block;\n}\n\n/Tab/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/Label/\n.gxg-label {\n font-family: var(--font-family-primary) !important;\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm) !important;\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-primary-enabled);\n text-align: center;\n line-height: 1.455em;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/**************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*************************************************/\n.gxg-button-styles {\n font-family: var(--font-family-primary) !important;\n font-weight: var(--font-weight-semibold);\n font-size: var(--font-size-sm) !important;\n letter-spacing: var(--letter-spacing-xs);\n color: var(--color-primary-enabled);\n text-align: center;\n line-height: 1.455em;\n}\n\n/*************************************************\nFORM ELEMENTS\n**************************************************/\n.gxg-scrollbar {\n / Track /\n / Handle /\n / Handle on hover */\n cursor: initial;\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width, 6px);\n height: var(--gxg-scrollbar-width, 6px);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background, --gray-02);\n border-radius: var(--gxg-scrollbar-track-border-radius, 10px);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background, --gray-05);\n border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);\n border: var(--gxg-scrollbar-track-thumb-border);\n background-clip: padding-box;\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);\n}","import { h } from \"@stencil/core\";\nexport class GxgTest {\n constructor() {\n this.kbs = [];\n }\n el;\n watchKbsHandler() { }\n selectionHasChanged = e => {\n console.log(e.detail);\n };\n checkboxChanged = e => {\n console.log(e.detail);\n };\n updateKbs1 = () => {\n this.kbs = [\n {\n id: \"uva\",\n name: \"uva\",\n selected: false,\n disabled: false\n },\n {\n id: \"manzana\",\n name: \"manzana\",\n selected: true,\n disabled: false\n },\n {\n id: \"pera\",\n name: \"pera\",\n selected: false,\n disabled: false\n },\n {\n id: \"sandia\",\n name: \"sandía\",\n selected: false,\n disabled: true\n }\n ];\n };\n updateKbs2 = () => {\n this.kbs = [\n {\n id: \"uva\",\n name: \"uva\",\n selected: false,\n disabled: false\n },\n {\n id: \"manzana\",\n name: \"manzana\",\n selected: true,\n disabled: false\n },\n {\n id: \"pera\",\n name: \"pera\",\n selected: false,\n disabled: false\n },\n {\n id: \"sandia\",\n name: \"sandía\",\n selected: false,\n disabled: true\n }\n ];\n };\n updateKbs3 = () => {\n this.kbs = [\n {\n id: \"uva\",\n name: \"uva\",\n selected: false,\n disabled: false\n },\n {\n id: \"manzana\",\n name: \"manzana\",\n selected: false,\n disabled: true\n },\n {\n id: \"pera\",\n name: \"pera\",\n selected: true,\n disabled: false\n },\n {\n id: \"sandia\",\n name: \"sandía\",\n selected: true,\n disabled: true\n }\n ];\n };\n unselectLast = () => {\n this.kbs = [\n {\n id: \"uva\",\n name: \"uva\",\n selected: false,\n disabled: false\n },\n {\n id: \"manzana\",\n name: \"manzana\",\n selected: false,\n disabled: true\n },\n {\n id: \"pera\",\n name: \"pera\",\n selected: true,\n disabled: false\n },\n {\n id: \"sandia\",\n name: \"sandía\",\n selected: false,\n disabled: true\n }\n ];\n };\n singleSelectionChanged = e => {\n console.log(e.detail);\n };\n componentDidLoad() { }\n render() {\n return [\n h(\"div\", null, h(\"p\", null, \"single selection\"), h(\"gxg-list-box\", { singleSelection: true,\n // disabled={this.selectionKbDisabled}\n // ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part: \"kbs\", onSelectionChanged: this.singleSelectionChanged }, this.kbs.map(kb => (h(\"gxg-list-box-item\", { value: kb[\"id\"], key: kb[\"id\"], selected: kb[\"selected\"], disabled: kb[\"disabled\"] }, kb[\"name\"]))))),\n h(\"br\", null),\n h(\"div\", null, h(\"p\", null, \"single selection allows empty\"), h(\"gxg-list-box\", { singleSelection: true,\n // disabled={this.selectionKbDisabled}\n // ref={(el: HTMLElement) => (this.listBoxEl = el)}\n allowsEmpty: true, onSelectionChanged: this.selectionHasChanged, part: \"kbs\" }, this.kbs.map(kb => (h(\"gxg-list-box-item\", { value: kb[\"id\"], key: kb[\"id\"], selected: kb[\"selected\"], disabled: kb[\"disabled\"] }, kb[\"name\"]))))),\n h(\"br\", null),\n h(\"div\", null, h(\"p\", null, \"multi selection\"), h(\"gxg-list-box\", {\n // disabled={this.selectionKbDisabled}\n // ref={(el: HTMLElement) => (this.listBoxEl = el)}\n onSelectionChanged: this.singleSelectionChanged, part: \"kbs\"\n }, this.kbs.map(kb => (h(\"gxg-list-box-item\", { value: kb[\"id\"], key: kb[\"id\"], selected: kb[\"selected\"], disabled: kb[\"disabled\"] }, kb[\"name\"]))))),\n h(\"br\", null),\n h(\"div\", null, h(\"p\", null, \"multi selection allows empty\"), h(\"gxg-list-box\", {\n // disabled={this.selectionKbDisabled}\n // ref={(el: HTMLElement) => (this.listBoxEl = el)}\n allowsEmpty: true, onSelectionChanged: this.selectionHasChanged, part: \"kbs\"\n }, this.kbs.map(kb => (h(\"gxg-list-box-item\", { value: kb[\"id\"], key: kb[\"id\"], selected: kb[\"selected\"], disabled: kb[\"disabled\"] }, kb[\"name\"]))))),\n h(\"br\", null),\n h(\"div\", null, h(\"p\", null, \"disabled\"), h(\"gxg-list-box\", {\n // disabled={this.selectionKbDisabled}\n // ref={(el: HTMLElement) => (this.listBoxEl = el)}\n disabled: true, onSelectionChanged: this.selectionHasChanged, part: \"kbs\"\n }, this.kbs.map(kb => (h(\"gxg-list-box-item\", { value: kb[\"id\"], key: kb[\"id\"], selected: kb[\"selected\"] }, kb[\"name\"]))))),\n h(\"br\", null),\n h(\"div\", null, h(\"p\", null, \"with checkboxes\"), h(\"gxg-list-box\", {\n // disabled={this.selectionKbDisabled}\n // ref={(el: HTMLElement) => (this.listBoxEl = el)}\n checkboxes: true, onSelectionChanged: this.selectionHasChanged, onCheckedChanged: this.checkboxChanged, part: \"kbs\"\n }, this.kbs.map(kb => (h(\"gxg-list-box-item\", { value: kb[\"id\"], key: kb[\"id\"], selected: kb[\"selected\"] }, kb[\"name\"]))))),\n h(\"br\", null),\n h(\"div\", null, h(\"button\", { onClick: this.updateKbs1 }, \"No selected\"), h(\"button\", { onClick: this.updateKbs2 }, \"Second selected\"), h(\"button\", { onClick: this.updateKbs3 }, \"Second & third selected\"), h(\"button\", { onClick: this.unselectLast }, \"Unselect last\"))\n ];\n }\n static get is() { return \"gxg-test\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"test.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"test.css\"]\n };\n }\n static get states() {\n return {\n \"kbs\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"kbs\",\n \"methodName\": \"watchKbsHandler\"\n }];\n }\n}\n//# sourceMappingURL=test.js.map\n"],"version":3}