npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.109 → 0.0.110 - Mend

@genexus/genexus-ide-ui 0.0.109 → 0.0.110

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 (172) hide show

package/dist/cjs/gx-ide-status-buttons.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5ab4492a.js');
 const locale = require('./locale-bf43b87c.js');
-const gxIdeStatusButtonsCss = ":host{display:block;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item.not-zero{font-weight:var(--mer-font__weight--semi-bold)}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs)}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .active-indicator{background-color:var(--mer-icon__primary);border-color:var(--mer-icon__primary)}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-border]){border:none}:host([no-border-top]){border-top:none}:host([no-border-end]){border-inline-end:none}:host([no-border-bottom]){border-bottom:none}:host([no-border-start]){border-inline-start:none}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
+const gxIdeStatusButtonsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:block;border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row;background-color:var(--mer-color__elevation--01)}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs);text-transform:capitalize}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xxs);height:var(--mer-spacing--xxs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item.error.not-zero .active-indicator{background-color:var(--mer-border-color__error);border-color:var(--mer-border-color__error)}gx-ide-list-selector-item.warning.not-zero .active-indicator{background-color:var(--mer-border-color__warning);border-color:var(--mer-border-color__warning)}gx-ide-list-selector-item.success.not-zero .active-indicator{background-color:var(--mer-border-color__success);border-color:var(--mer-border-color__success)}gx-ide-list-selector-item.message.not-zero .active-indicator{background-color:var(--mer-border-color__primary);border-color:var(--mer-border-color__primary)}gx-ide-list-selector-item input:after{display:none}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .label__wrapper:before{display:block}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}gx-ide-list-selector-item .label__wrapper{position:relative}gx-ide-list-selector-item .label__wrapper:before{content:\"\";width:4px;height:7px;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-color:var(--gxg-checkbox-indicator-color);border-style:solid;position:absolute;left:auto;top:12px;right:14px;display:none}gx-ide-list-selector-item .label__wrapper:after{content:\"\";width:var(--gxg-checkbox-size);height:var(--gxg-checkbox-size);border:1px solid var(--gxg-checkbox-border-color);border-radius:var(--gxg-checkbox-border-radius)}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__wrapper:before{top:10px}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
 const GxIdeStatusButtons = class {
     constructor(hostRef) {
@@ -46,12 +46,7 @@ const GxIdeStatusButtons = class {
         this.hideMessage = false;
         this.minimal = false;
         this.compact = false;
-        this.noBorder = false;
         this.noInnerBorders = false;
-        this.noBorderTop = false;
-        this.noBorderEnd = false;
-        this.noBorderBottom = false;
-        this.noBorderStart = false;
         this.iconsSize = "small";
     }
     // 6.COMPONENT LIFECYCLE METHODS //
@@ -61,13 +56,13 @@ const GxIdeStatusButtons = class {
     }
     // 10.RENDER() FUNCTION //
     render() {
-        return (index.h(index.Host, null, index.h("gx-ide-list-selector", { type: "multi-selection", listName: "status-buttons", noListBorder: true, ellipsis: true, iconsSize: this.iconsSize, onSelectionChanged: this.selectionChangedHandler }, !this.hideError ? (index.h("gx-ide-list-selector-item", { itemId: "errors", itemValue: this.evaluateLabel("errors"), icon: "gx-test/result-exception", iconColor: this.errors === 0 ? "disabled" : "auto", class: { "error": true, "not-zero": this.errors !== 0 }, itemChecked: true }, index.h("span", { slot: "universal", class: {
+        return (index.h(index.Host, null, index.h("gx-ide-list-selector", { type: "multi-selection", listName: "status-buttons", noListBorder: true, ellipsis: true, iconsSize: this.iconsSize, onSelectionChanged: this.selectionChangedHandler }, !this.hideError ? (index.h("gx-ide-list-selector-item", { itemId: "errors", itemValue: this.evaluateLabel("errors"), icon: "gx-test/result-exception", iconColor: this.errors === 0 ? "disabled" : "mercury-on-surface", class: { "error": true, "not-zero": this.errors !== 0 }, itemChecked: true }, index.h("span", { slot: "universal", class: {
                 "active-indicator": true
-            } }))) : null, !this.hideWarning ? (index.h("gx-ide-list-selector-item", { itemId: "warnings", itemValue: this.evaluateLabel("warnings"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "auto", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, index.h("span", { slot: "universal", class: {
+            } }))) : null, !this.hideWarning ? (index.h("gx-ide-list-selector-item", { itemId: "warnings", itemValue: this.evaluateLabel("warnings"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "mercury-on-surface", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, index.h("span", { slot: "universal", class: {
                 "active-indicator": true
-            } }))) : null, !this.hideSuccess ? (index.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 }, index.h("span", { slot: "universal", class: {
+            } }))) : null, !this.hideSuccess ? (index.h("gx-ide-list-selector-item", { itemId: "successes", itemValue: this.evaluateLabel("successes"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "mercury-on-surface", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, index.h("span", { slot: "universal", class: {
                 "active-indicator": true
-            } }))) : null, !this.hideMessage ? (index.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 }, index.h("span", { slot: "universal", class: {
+            } }))) : null, !this.hideMessage ? (index.h("gx-ide-list-selector-item", { itemId: "messages", itemValue: this.evaluateLabel("messages"), icon: "gx-test/screenshot-viewer", iconColor: this.messages === 0 ? "disabled" : "mercury-on-surface", class: { "message": true, "not-zero": this.messages !== 0 }, itemChecked: true }, index.h("span", { slot: "universal", class: {
                 "active-indicator": true
             } }))) : null)));
     }

package/dist/cjs/gx-ide-status-buttons.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-status-buttons.entry.cjs.js","mappings":"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","names":["Locale","h","Host"],"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 border-radius: var(--ds-form-control-border-radius);\n --status-buttons-label-color: var(--mer-text__on-surface);\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(--mer-font__weight--semi-bold);\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 margin-inline-start: var(--mer-spacing--xxs);\n }\n }\n\n /active indicator/\n .active-indicator {\n display: inline-block;\n width: var(--mer-spacing--xs);\n height: var(--mer-spacing--xs);\n border: 1px solid var(--mer-border-color__dim);\n border-radius: calc(var(--mer-spacing--xs) / 2);\n background-color: var(--mer-border-color__dim);\n }\n input:checked {\n + .label {\n --status-buttons-label-color: var(--mer-text__on-surface);\n background-color: inherit;\n\n .active-indicator {\n background-color: var(--mer-icon__primary);\n border-color: var(--mer-icon__primary);\n }\n }\n }\n\n /hover/\n &:hover {\n input:checked + .label {\n background-color: var(--ds-item-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(--mer-font__size--xxs);\n }\n .label__wrapper {\n gap: var(--mer-spacing--xxs);\n padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n }\n .label__universal-slot {\n margin-inline-end: var(--mer-spacing--xxxs);\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 = \"small\";\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}
1	+ {"file":"gx-ide-status-buttons.entry.cjs.js","mappings":"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","names":["Locale","h","Host"],"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":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n display: block;\n border-radius: var(--ds-form-control-border-radius);\n --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/list-selector/\ngx-ide-list-selector::part(list) {\n display: flex;\n flex-direction: row;\n background-color: var(--mer-color__elevation--01);\n}\n/list-selector-items/\ngx-ide-list-selector-item {\n border-block-start: none !important; //reset\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 margin-inline-start: var(--mer-spacing--xxs);\n text-transform: capitalize;\n }\n }\n\n /active indicator/\n .active-indicator {\n display: inline-block;\n width: var(--mer-spacing--xxs);\n height: var(--mer-spacing--xxs);\n border: 1px solid var(--mer-border-color__dim);\n border-radius: calc(var(--mer-spacing--xs) / 2);\n background-color: var(--mer-border-color__dim);\n }\n\n /States/\n &.error.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__error);\n border-color: var(--mer-border-color__error);\n }\n }\n &.warning.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__warning);\n border-color: var(--mer-border-color__warning);\n }\n }\n &.success.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__success);\n border-color: var(--mer-border-color__success);\n }\n }\n &.message.not-zero {\n .active-indicator {\n background-color: var(--mer-border-color__primary);\n border-color: var(--mer-border-color__primary);\n }\n }\n\n input {\n &:after {\n display: none;\n }\n }\n input:checked {\n + .label {\n --status-buttons-label-color: var(--mer-text__on-surface);\n background-color: inherit;\n\n .label__wrapper {\n &:before {\n display: block;\n }\n }\n }\n }\n\n /hover/\n &:hover {\n input:checked + .label {\n background-color: var(--ds-item-background-color--hover) !important;\n }\n }\n\n .label__wrapper {\n position: relative;\n &:before {\n content: \"\";\n width: 4px;\n height: 7px;\n border-width: 0 2px 2px 0;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n border-color: var(--gxg-checkbox-indicator-color);\n border-style: solid;\n position: absolute;\n left: auto;\n top: 12px;\n right: 14px;\n display: none;\n }\n &:after {\n content: \"\";\n width: var(--gxg-checkbox-size);\n height: var(--gxg-checkbox-size);\n border: 1px solid var(--gxg-checkbox-border-color);\n border-radius: var(--gxg-checkbox-border-radius);\n }\n }\n}\n\n/--------------------\nCompact size\n--------------------/\n:host([compact]) {\n gx-ide-list-selector-item {\n font-size: var(--mer-font__size--xxs);\n }\n .label__wrapper {\n gap: var(--mer-spacing--xxs);\n padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n &:before {\n top: 10px;\n }\n }\n .label__universal-slot {\n margin-inline-end: var(--mer-spacing--xxxs);\n }\n}\n\n/--------------------\nAll about borders\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 inner borders\n /\n @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeStatusButtonsElement;\n\n // 3.STATE() VARIABLES //\n\n @State() iconsSize: Size = \"small\";\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\" : \"mercury-on-surface\"}\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={\n this.warnings === 0 ? \"disabled\" : \"mercury-on-surface\"\n }\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={\n this.successes === 0 ? \"disabled\" : \"mercury-on-surface\"\n }\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={\n this.messages === 0 ? \"disabled\" : \"mercury-on-surface\"\n }\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/cjs/gxg-buttons-container_2.cjs.entry.js CHANGED Viewed

@@ -64,7 +64,7 @@ const GxgButtonsContainer = class {
 };
 GxgButtonsContainer.style = buttonsContainerCss;
-const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows;overflow:hidden;--ds-icon-size-box--small:var(--mer-font__size--xxs);--ds-icon-size--small:100%}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__outer-wrapper{flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm);border:var(--mer-border__width--sm) solid var(--mer-border-color__dim);border-radius:var(--mer-border__width--lg)}.top-state-bar__inner-wrapper{flex:1;display:flex;flex-direction:row;justify-content:space-between;gap:var(--mer-spacing--xs)}.top-state-bar__caption{color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04)}.top-state-bar__close{cursor:pointer;transition:200ms background-color}.top-state-bar__inner-wrapper,.top-state-bar__progress-wrapper,.top-state-bar__close{opacity:0;transition:150ms opacity}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--accent .top-state-bar__caption{color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--success .top-state-bar__caption{color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--warning .top-state-bar__caption{color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--error .top-state-bar__caption{color:var(--mer-color__message-red--100)}.top-state-bar--in-progress:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .top-state-bar__close-wrapper{border-inline-start-color:#3fa89b;-webkit-animation:inProgressBorderColor 1s linear infinite;animation:inProgressBorderColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{color:#3fa89b}.top-state-bar--visible .top-state-bar__inner-wrapper,.top-state-bar--visible .top-state-bar__progress-wrapper,.top-state-bar--visible .top-state-bar__close{opacity:1}.top-state-bar--visible .top-state-bar__close:hover{opacity:0.75}.top-state-bar--visible .top-state-bar__close:active{opacity:0.5}@-webkit-keyframes inProgressBorderColor{0%{border-inline-start-color:#3fa89b}100%{border-inline-start-color:#5ba7ff}}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar__outer-wrapper{border:0}";
+const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows;overflow:hidden;--ds-icon-size-box--small:var(--mer-font__size--xxs);--ds-icon-size--small:100%}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__outer-wrapper{position:relative;flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__outer-wrapper::after,.top-state-bar__outer-wrapper::before{border-radius:var(--mer-border__width--lg)}.top-state-bar__outer-wrapper::before{content:\"\";width:100%;height:100%;left:0;top:0;position:absolute;background-color:var(--mer-border-color__dim);z-index:0}.top-state-bar__outer-wrapper::after{content:\"\";left:var(--mer-border__width--sm);top:var(--mer-border__width--sm);width:calc(100% - var(--mer-border__width--sm) * 2);height:calc(100% - var(--mer-border__width--sm) * 2);position:absolute;background-color:var(--mer-color__surface);z-index:1}.top-state-bar__inner-wrapper{flex:1;display:flex;flex-direction:row;justify-content:space-between;gap:var(--mer-spacing--xs);position:relative;z-index:2}.top-state-bar__caption{color:var(--mer-text__on-surface);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04);position:relative;z-index:2}.top-state-bar__close{cursor:pointer;transition:200ms background-color}.top-state-bar__inner-wrapper,.top-state-bar__progress-wrapper,.top-state-bar__close{opacity:0;transition:150ms opacity}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--in-progress .top-state-bar__outer-wrapper:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--visible .top-state-bar__inner-wrapper,.top-state-bar--visible .top-state-bar__progress-wrapper,.top-state-bar--visible .top-state-bar__close{opacity:1}.top-state-bar--visible .top-state-bar__close:hover{opacity:0.75}.top-state-bar--visible .top-state-bar__close:active{opacity:0.5}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar__outer-wrapper:before{display:none}";
 const GxgTopStateBar = class {
     constructor(hostRef) {

package/dist/cjs/gxg-buttons-container_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gxg-buttons-container.gxg-top-state-bar.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.css?tag=gxg-buttons-container&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.js","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":["/--- Elevation ---/\n:host {\n --ds-background-color-disabled: transparent;\n --ds-border-color-disabled: transparent;\n display: block;\n}\n:host .container {\n background-color: var(--mer-elevation__background-color--01);\n border: var(--mer-elevation__border-01);\n box-shadow: var(--mer-elevation__box-shadow--01);\n box-shadow: none;\n display: inline-flex;\n align-items: center;\n padding: var(--gxg-buttons-group__padding);\n box-sizing: border-box;\n gap: var(--gxg-buttons-group__gap);\n border-radius: var(--gxg-buttons-group__border-radius);\n border: 1px solid var(--mer-color__elevation__03);\n}\n:host .container--reduced {\n height: calc(var(--gxg-form-text-height) + 2px);\n --gxg-button-height: 100%;\n}\n:host .container--reduced ::slotted(gxg-button) {\n height: 100%;\n}\n:host ::slotted(.button--unselected) {\n --gxg-button-primary-border-color: transparent;\n --gxg-button-primary-bg-color: var(\n --gxg-button-unselected-bg-color--enabled\n );\n --gxg-button-primary-color: var(--gxg-button-unselected-color--enabled);\n}\n\n:host([full-width]) {\n width: 100%;\n}\n:host([full-width]) .container {\n width: 100%;\n display: flex;\n}\n:host([full-width]) ::slotted(gxg-button) {\n flex: 1;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgButtonsContainer {\n constructor() {\n this.selectedButtonId = undefined;\n this.reduced = false;\n this.fullWidth = false;\n }\n el;\n containerEl;\n // 2. REFERENCE TO ELEMENTS //\n // 3.STATE() VARIABLES //\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n // 5.EVENTS (EMIT) //\n selectedButtonChanged;\n // 6.COMPONENT LIFECYCLE METHODS //\n componentDidLoad() {\n this.updateSelectedButtonId();\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n setSelectedButton = (event) => {\n const tagName = event.target.tagName;\n if (tagName !== \"GXG-BUTTON\") {\n //clicked button is disabled\n return;\n }\n else {\n const clickedButton = event.target;\n if (clickedButton.disabled \|\| clickedButton.selected) {\n //button is disabled or is the current selected\n return;\n }\n const gxgButtonsHtmlCollection = this.el.children;\n Array.from(gxgButtonsHtmlCollection).forEach(function (button) {\n if (button.selected) {\n button.selected = false;\n }\n });\n clickedButton.selected = true;\n this.selectedButtonChanged.emit(clickedButton.id);\n this.updateSelectedButtonId();\n }\n };\n updateSelectedButtonId = () => {\n const gxgButtonsHtmlCollection = this.el.children;\n const selectedButton = Array.from(gxgButtonsHtmlCollection).find((button) => {\n return button.selected && !button.disabled;\n });\n if (selectedButton) {\n this.selectedButtonId = selectedButton.id;\n }\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, null, h(\"div\", { class: {\n container: true,\n \"container--reduced\": this.reduced\n }, ref: el => (this.containerEl = el), onClick: this.setSelectedButton }, h(\"slot\", null))));\n }\n static get is() { return \"gxg-buttons-container\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"buttons-container.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"buttons-container.css\"]\n };\n }\n static get properties() {\n return {\n \"selectedButtonId\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The id of the currently selected button, or null if all are disabled\"\n },\n \"attribute\": \"selected-button-id\",\n \"reflect\": false\n },\n \"reduced\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Used to reduce the height when the button-container is next to a form-text\"\n },\n \"attribute\": \"reduced\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"fullWidth\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Makes the buttons-container full-width\"\n },\n \"attribute\": \"full-width\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"selectedButtonChanged\",\n \"name\": \"selectedButtonChanged\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"\"\n },\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n }\n }];\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=buttons-container.js.map\n",":host {\n --top-bar-progress: 0%;\n display: grid;\n grid-template-rows: 0fr;\n transition: 200ms grid-template-rows;\n overflow: hidden;\n --ds-icon-size-box--small: var(--mer-font__size--xxs);\n --ds-icon-size--small: 100%;\n}\n:host > * {\n overflow: hidden;\n}\n\n:host(.visible) {\n grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n border-radius: var(--mer-border__width--lg);\n list-style: var(--mer-font__size--xxs);\n display: flex;\n /states/\n}\n.top-state-bar > * {\n position: relative;\n z-index: 1;\n}\n.top-state-bar__outer-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n border: var(--mer-border__width--sm) solid var(--mer-border-color__dim);\n border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar__inner-wrapper {\n flex: 1;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--mer-spacing--xs);\n}\n.top-state-bar__caption {\n color: var(--mer-text__on-message);\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--mer-font__size--xxs);\n line-height: var(--mer-font__size--xxs);\n font-weight: var(--mer-font__weight--regular);\n display: flex;\n align-items: baseline;\n font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n height: var(--mer-spacing--xxs);\n background-color: var(--mer-color__elevation--04);\n}\n.top-state-bar__close {\n cursor: pointer;\n transition: 200ms background-color;\n}\n.top-state-bar__inner-wrapper, .top-state-bar__progress-wrapper, .top-state-bar__close {\n opacity: 0;\n transition: 150ms opacity;\n}\n.top-state-bar--accent .progress-bar {\n background-color: var(--mer-accent__primary);\n}\n.top-state-bar--accent .top-state-bar__caption {\n color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--success .top-state-bar__caption {\n color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--warning .top-state-bar__caption {\n color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--error .top-state-bar__caption {\n color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress:before {\n height: 0;\n width: 120%;\n padding-top: 60%;\n padding-bottom: 60%;\n background: linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .top-state-bar__close-wrapper {\n border-inline-start-color: #3fa89b;\n -webkit-animation: inProgressBorderColor 1s linear infinite;\n animation: inProgressBorderColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n content: \"\";\n position: absolute;\n z-index: 0;\n width: 300%;\n height: 100%;\n left: 0;\n background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n animation-name: inProgressBar;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n color: #3fa89b;\n}\n.top-state-bar--visible .top-state-bar__inner-wrapper,\n.top-state-bar--visible .top-state-bar__progress-wrapper,\n.top-state-bar--visible .top-state-bar__close {\n opacity: 1;\n}\n.top-state-bar--visible .top-state-bar__close:hover {\n opacity: 0.75;\n}\n.top-state-bar--visible .top-state-bar__close:active {\n opacity: 0.5;\n}\n\n/in progress animation/\n@-webkit-keyframes inProgressBorderColor {\n 0% {\n border-inline-start-color: #3fa89b;\n }\n 100% {\n border-inline-start-color: #5ba7ff;\n }\n}\n@-webkit-keyframes inProgressBackgroundColor {\n 0% {\n transform: translate(-50%, -50%) rotate(0);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(1turn);\n }\n}\n@-webkit-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n@-moz-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: 200%;\n }\n}\n@keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n.progress-bar {\n display: block;\n transition: all 200ms;\n width: var(--top-bar-progress);\n border-radius: calc(var(--mer-spacing--xxs) / 2);\n height: 100%;\n}\n\n:host([no-border]) .top-state-bar__outer-wrapper {\n border: 0;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n constructor() {\n this.topStateBarVisible = false;\n this.visible = false;\n this.caption = undefined;\n this.minimal = false;\n this.active = false;\n this.stateType = \"in-progress\";\n this.progress = undefined;\n this.withClose = undefined;\n this.autoClose = false;\n this.noBorder = false;\n this.closedCallback = () => { };\n }\n // 1.OWN PROPERTIES //\n // 2. REFERENCE TO ELEMENTS //\n el;\n watchActiveHandler(active) {\n if (active) {\n this.visible = true;\n setTimeout(() => {\n this.topStateBarVisible = true;\n }, 300);\n }\n else {\n this.topStateBarVisible = false;\n setTimeout(() => {\n this.visible = false;\n }, 300);\n }\n }\n watchStateTypeHandler() {\n this.evaluateWithAction();\n }\n watchProgressHandler(progress) {\n if (progress => 0 && progress <= 100) {\n this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n }\n if (progress === 100 && this.autoClose) {\n setTimeout(() => {\n this.active = false;\n }, 200);\n }\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE EVENTS //\n componentWillLoad() {\n this.evaluateWithAction();\n this.evaluateInitialProgress();\n if (this.active) {\n this.visible = true;\n this.topStateBarVisible = true;\n }\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n evaluateInitialProgress = () => {\n if (this.progress === undefined &&\n (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\")) {\n this.progress = 100;\n }\n else if (this.progress === undefined &&\n this.stateType === \"in-progress\") {\n this.progress = 0;\n }\n this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n };\n evaluateWithAction = () => {\n if (this.withClose === undefined &&\n (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\")) {\n this.withClose = true;\n }\n };\n closeButtonHandler = () => {\n this.active = false;\n };\n closeKeyDownHandler = (e) => {\n if (e.key === \"Enter\") {\n this.active = false;\n }\n };\n closeClickHandler = () => {\n this.closeButtonHandler();\n this.closedCallback();\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n \"top-state-bar\": true,\n [`top-state-bar--${this.stateType}`]: true,\n \"top-state-bar--with-close\": this.withClose,\n \"top-state-bar--visible\": this.topStateBarVisible\n } }, h(\"div\", { class: \"top-state-bar__outer-wrapper\" }, !this.minimal ? (h(\"div\", { class: \"top-state-bar__inner-wrapper\" }, h(\"label\", { id: \"label\", class: {\n \"top-state-bar__caption\": true\n }, part: \"label\" }, this.caption), this.withClose && !this.minimal ? (h(\"gxg-icon\", { class: {\n \"top-state-bar__close\": true\n }, onClick: this.closeClickHandler, onKeyDown: this.closeKeyDownHandler, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-on-surface\", tabIndex: this.visible ? 0 : -1, size: \"small\" })) : null)) : null, h(\"div\", { class: {\n \"top-state-bar__progress-wrapper\": true\n }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))))));\n }\n static get is() { return \"gxg-top-state-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"minimal\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will only display the bar (no title, no close button)\"\n },\n \"attribute\": \"minimal\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"active\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar active state. If false it will be hidden\"\n },\n \"attribute\": \"active\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"stateType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"topStateBarType\",\n \"resolved\": \"\\\"accent\\\" \| \\\"error\\\" \| \\\"in-progress\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"topStateBarType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"state-type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"in-progress\\\"\"\n },\n \"progress\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The progress bar progress\"\n },\n \"attribute\": \"progress\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"withClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will display a close action button\"\n },\n \"attribute\": \"with-close\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"autoClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It true, it will auto-close when the progress is 100\"\n },\n \"attribute\": \"auto-close\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"noBorder\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It removes the border (actually is box shadow)\"\n },\n \"attribute\": \"no-border\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"closedCallback\": {\n \"type\": \"unknown\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"() => void\",\n \"resolved\": \"() => void\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"A callback that gets called when the top-state-bar is closed\"\n },\n \"defaultValue\": \"() => {}\"\n }\n };\n }\n static get states() {\n return {\n \"topStateBarVisible\": {},\n \"visible\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"watchActiveHandler\"\n }, {\n \"propName\": \"stateType\",\n \"methodName\": \"watchStateTypeHandler\"\n }, {\n \"propName\": \"progress\",\n \"methodName\": \"watchProgressHandler\"\n }];\n }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}
1	+ {"file":"gxg-buttons-container.gxg-top-state-bar.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.css?tag=gxg-buttons-container&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.js","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":["/--- Elevation ---/\n:host {\n --ds-background-color-disabled: transparent;\n --ds-border-color-disabled: transparent;\n display: block;\n}\n:host .container {\n background-color: var(--mer-elevation__background-color--01);\n border: var(--mer-elevation__border-01);\n box-shadow: var(--mer-elevation__box-shadow--01);\n box-shadow: none;\n display: inline-flex;\n align-items: center;\n padding: var(--gxg-buttons-group__padding);\n box-sizing: border-box;\n gap: var(--gxg-buttons-group__gap);\n border-radius: var(--gxg-buttons-group__border-radius);\n border: 1px solid var(--mer-color__elevation__03);\n}\n:host .container--reduced {\n height: calc(var(--gxg-form-text-height) + 2px);\n --gxg-button-height: 100%;\n}\n:host .container--reduced ::slotted(gxg-button) {\n height: 100%;\n}\n:host ::slotted(.button--unselected) {\n --gxg-button-primary-border-color: transparent;\n --gxg-button-primary-bg-color: var(\n --gxg-button-unselected-bg-color--enabled\n );\n --gxg-button-primary-color: var(--gxg-button-unselected-color--enabled);\n}\n\n:host([full-width]) {\n width: 100%;\n}\n:host([full-width]) .container {\n width: 100%;\n display: flex;\n}\n:host([full-width]) ::slotted(gxg-button) {\n flex: 1;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgButtonsContainer {\n constructor() {\n this.selectedButtonId = undefined;\n this.reduced = false;\n this.fullWidth = false;\n }\n el;\n containerEl;\n // 2. REFERENCE TO ELEMENTS //\n // 3.STATE() VARIABLES //\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n // 5.EVENTS (EMIT) //\n selectedButtonChanged;\n // 6.COMPONENT LIFECYCLE METHODS //\n componentDidLoad() {\n this.updateSelectedButtonId();\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n setSelectedButton = (event) => {\n const tagName = event.target.tagName;\n if (tagName !== \"GXG-BUTTON\") {\n //clicked button is disabled\n return;\n }\n else {\n const clickedButton = event.target;\n if (clickedButton.disabled \|\| clickedButton.selected) {\n //button is disabled or is the current selected\n return;\n }\n const gxgButtonsHtmlCollection = this.el.children;\n Array.from(gxgButtonsHtmlCollection).forEach(function (button) {\n if (button.selected) {\n button.selected = false;\n }\n });\n clickedButton.selected = true;\n this.selectedButtonChanged.emit(clickedButton.id);\n this.updateSelectedButtonId();\n }\n };\n updateSelectedButtonId = () => {\n const gxgButtonsHtmlCollection = this.el.children;\n const selectedButton = Array.from(gxgButtonsHtmlCollection).find((button) => {\n return button.selected && !button.disabled;\n });\n if (selectedButton) {\n this.selectedButtonId = selectedButton.id;\n }\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, null, h(\"div\", { class: {\n container: true,\n \"container--reduced\": this.reduced\n }, ref: el => (this.containerEl = el), onClick: this.setSelectedButton }, h(\"slot\", null))));\n }\n static get is() { return \"gxg-buttons-container\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"buttons-container.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"buttons-container.css\"]\n };\n }\n static get properties() {\n return {\n \"selectedButtonId\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The id of the currently selected button, or null if all are disabled\"\n },\n \"attribute\": \"selected-button-id\",\n \"reflect\": false\n },\n \"reduced\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Used to reduce the height when the button-container is next to a form-text\"\n },\n \"attribute\": \"reduced\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"fullWidth\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Makes the buttons-container full-width\"\n },\n \"attribute\": \"full-width\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"selectedButtonChanged\",\n \"name\": \"selectedButtonChanged\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"\"\n },\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n }\n }];\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=buttons-container.js.map\n",":host {\n --top-bar-progress: 0%;\n display: grid;\n grid-template-rows: 0fr;\n transition: 200ms grid-template-rows;\n overflow: hidden;\n --ds-icon-size-box--small: var(--mer-font__size--xxs);\n --ds-icon-size--small: 100%;\n}\n:host > * {\n overflow: hidden;\n}\n\n:host(.visible) {\n grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n border-radius: var(--mer-border__width--lg);\n list-style: var(--mer-font__size--xxs);\n display: flex;\n /states/\n}\n.top-state-bar > * {\n position: relative;\n z-index: 1;\n}\n.top-state-bar__outer-wrapper {\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__outer-wrapper::after, .top-state-bar__outer-wrapper::before {\n border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar__outer-wrapper::before {\n content: \"\";\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n position: absolute;\n background-color: var(--mer-border-color__dim);\n z-index: 0;\n}\n.top-state-bar__outer-wrapper::after {\n content: \"\";\n left: var(--mer-border__width--sm);\n top: var(--mer-border__width--sm);\n width: calc(100% - var(--mer-border__width--sm) * 2);\n height: calc(100% - var(--mer-border__width--sm) * 2);\n position: absolute;\n background-color: var(--mer-color__surface);\n z-index: 1;\n}\n.top-state-bar__inner-wrapper {\n flex: 1;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--mer-spacing--xs);\n position: relative;\n z-index: 2;\n}\n.top-state-bar__caption {\n color: var(--mer-text__on-surface);\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--mer-font__size--xxs);\n line-height: var(--mer-font__size--xxs);\n font-weight: var(--mer-font__weight--regular);\n display: flex;\n align-items: baseline;\n font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n height: var(--mer-spacing--xxs);\n background-color: var(--mer-color__elevation--04);\n position: relative;\n z-index: 2;\n}\n.top-state-bar__close {\n cursor: pointer;\n transition: 200ms background-color;\n}\n.top-state-bar__inner-wrapper, .top-state-bar__progress-wrapper, .top-state-bar__close {\n opacity: 0;\n transition: 150ms opacity;\n}\n.top-state-bar--accent .progress-bar {\n background-color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress .top-state-bar__outer-wrapper:before {\n height: 0;\n width: 120%;\n padding-top: 60%;\n padding-bottom: 60%;\n background: linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 100%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n content: \"\";\n position: absolute;\n z-index: 0;\n width: 300%;\n height: 100%;\n left: 0;\n background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n animation-name: inProgressBar;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n.top-state-bar--visible .top-state-bar__inner-wrapper,\n.top-state-bar--visible .top-state-bar__progress-wrapper,\n.top-state-bar--visible .top-state-bar__close {\n opacity: 1;\n}\n.top-state-bar--visible .top-state-bar__close:hover {\n opacity: 0.75;\n}\n.top-state-bar--visible .top-state-bar__close:active {\n opacity: 0.5;\n}\n\n/in progress animation/\n@-webkit-keyframes inProgressBackgroundColor {\n 0% {\n transform: translate(-50%, -50%) rotate(0);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(1turn);\n }\n}\n@-webkit-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n@-moz-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: 200%;\n }\n}\n@keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n.progress-bar {\n display: block;\n transition: all 200ms;\n width: var(--top-bar-progress);\n border-radius: calc(var(--mer-spacing--xxs) / 2);\n height: 100%;\n}\n\n:host([no-border]) .top-state-bar__outer-wrapper:before {\n display: none;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n constructor() {\n this.topStateBarVisible = false;\n this.visible = false;\n this.caption = undefined;\n this.minimal = false;\n this.active = false;\n this.stateType = \"in-progress\";\n this.progress = undefined;\n this.withClose = undefined;\n this.autoClose = false;\n this.noBorder = false;\n this.closedCallback = () => { };\n }\n // 1.OWN PROPERTIES //\n // 2. REFERENCE TO ELEMENTS //\n el;\n watchActiveHandler(active) {\n if (active) {\n this.visible = true;\n setTimeout(() => {\n this.topStateBarVisible = true;\n }, 300);\n }\n else {\n this.topStateBarVisible = false;\n setTimeout(() => {\n this.visible = false;\n }, 300);\n }\n }\n watchStateTypeHandler() {\n this.evaluateWithAction();\n }\n watchProgressHandler(progress) {\n if (progress => 0 && progress <= 100) {\n this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n }\n if (progress === 100 && this.autoClose) {\n setTimeout(() => {\n this.active = false;\n }, 200);\n }\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE EVENTS //\n componentWillLoad() {\n this.evaluateWithAction();\n this.evaluateInitialProgress();\n if (this.active) {\n this.visible = true;\n this.topStateBarVisible = true;\n }\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n evaluateInitialProgress = () => {\n if (this.progress === undefined &&\n (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\")) {\n this.progress = 100;\n }\n else if (this.progress === undefined &&\n this.stateType === \"in-progress\") {\n this.progress = 0;\n }\n this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n };\n evaluateWithAction = () => {\n if (this.withClose === undefined &&\n (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\")) {\n this.withClose = true;\n }\n };\n closeButtonHandler = () => {\n this.active = false;\n };\n closeKeyDownHandler = (e) => {\n if (e.key === \"Enter\") {\n this.active = false;\n }\n };\n closeClickHandler = () => {\n this.closeButtonHandler();\n this.closedCallback();\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n \"top-state-bar\": true,\n [`top-state-bar--${this.stateType}`]: true,\n \"top-state-bar--with-close\": this.withClose,\n \"top-state-bar--visible\": this.topStateBarVisible\n } }, h(\"div\", { class: \"top-state-bar__outer-wrapper\" }, !this.minimal ? (h(\"div\", { class: \"top-state-bar__inner-wrapper\" }, h(\"label\", { id: \"label\", class: {\n \"top-state-bar__caption\": true\n }, part: \"label\" }, this.caption), this.withClose && !this.minimal ? (h(\"gxg-icon\", { class: {\n \"top-state-bar__close\": true\n }, onClick: this.closeClickHandler, onKeyDown: this.closeKeyDownHandler, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-on-surface\", tabIndex: this.visible ? 0 : -1, size: \"small\" })) : null)) : null, h(\"div\", { class: {\n \"top-state-bar__progress-wrapper\": true\n }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))))));\n }\n static get is() { return \"gxg-top-state-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"minimal\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will only display the bar (no title, no close button)\"\n },\n \"attribute\": \"minimal\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"active\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar active state. If false it will be hidden\"\n },\n \"attribute\": \"active\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"stateType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"topStateBarType\",\n \"resolved\": \"\\\"accent\\\" \| \\\"error\\\" \| \\\"in-progress\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"topStateBarType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"state-type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"in-progress\\\"\"\n },\n \"progress\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The progress bar progress\"\n },\n \"attribute\": \"progress\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"withClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It will display a close action button\"\n },\n \"attribute\": \"with-close\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"autoClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It true, it will auto-close when the progress is 100\"\n },\n \"attribute\": \"auto-close\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"noBorder\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"It removes the border (actually is box shadow)\"\n },\n \"attribute\": \"no-border\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"closedCallback\": {\n \"type\": \"unknown\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"() => void\",\n \"resolved\": \"() => void\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"A callback that gets called when the top-state-bar is closed\"\n },\n \"defaultValue\": \"() => {}\"\n }\n };\n }\n static get states() {\n return {\n \"topStateBarVisible\": {},\n \"visible\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"watchActiveHandler\"\n }, {\n \"propName\": \"stateType\",\n \"methodName\": \"watchStateTypeHandler\"\n }, {\n \"propName\": \"progress\",\n \"methodName\": \"watchProgressHandler\"\n }];\n }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}

package/dist/cjs/{gx-ide-empty-state_2.cjs.entry.js → gxg-card_2.cjs.entry.js} RENAMED Viewed

@@ -4,67 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5ab4492a.js');
 const store = require('./store-ea3722c0.js');
-const gxIdeEmptyStateCss = ":host{display:flex;align-items:center;justify-content:center}.container{max-width:520px;margin:0 auto;gap:var(--mer-spacing--xl);opacity:0;transition:opacity var(--state-transition-speed);padding:var(--mer-spacing--md)}.container .icon-wrapper{border:var(--mer-border__width--sm) dashed var(--mer-accent__primary);border-radius:50%;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}.container__main{gap:var(--mer-spacing--sm)}.container__buttons{gap:var(--mer-spacing--xs)}.container--visible{opacity:1}.container,.container__main,.container__buttons{display:flex;align-items:center;flex-direction:column}";
-const GxIdeEmptyState = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /*
-      INDEX:
-      1.OWN PROPERTIES
-      2.REFERENCE TO ELEMENTS
-      3.STATE() VARIABLES
-      4.PUBLIC PROPERTY API | WATCH'S
-      5.EVENTS (EMIT)
-      6.COMPONENT LIFECYCLE METHODS
-      7.LISTENERS
-      8.PUBLIC METHODS API
-      9.LOCAL METHODS
-      10.RENDER() FUNCTION
-      */
-        // 1.OWN PROPERTIES //
-        this.transitionSpeed = 200;
-        this.stateIcon = undefined;
-        this.stateTitle = undefined;
-        this.stateDescription = undefined;
-        this.primaryButtonLabel = undefined;
-        this.secondaryButtonLabel = undefined;
-        this.display = false;
-    }
-    watchDisplayHandler(display) {
-        if (display) {
-            this.primaryButtonLabel && (this.primaryButtonEl.disabled = false);
-            this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = false);
-        }
-        else {
-            setTimeout(() => {
-                this.primaryButtonLabel && (this.primaryButtonEl.disabled = true);
-                this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = true);
-            }, this.transitionSpeed);
-        }
-    }
-    // 5.EVENTS (EMIT) //
-    // 6.COMPONENT LIFECYCLE METHODS //
-    componentWillLoad() {
-        this.el.style.setProperty("--state-transition-speed", `${this.transitionSpeed}ms`);
-    }
-    componentDidLoad() {
-        this.display = true;
-    }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    // 10.RENDER() FUNCTION //
-    render() {
-        return (index.h(index.Host, null, index.h("div", { class: { "container": true, "container--visible": this.display } }, this.stateIcon ? (index.h("span", { class: "icon-wrapper" }, index.h("gxg-icon", { class: "icon", type: this.stateIcon, color: "mercury-primary" }, this.stateTitle))) : null, index.h("main", { class: "container__main" }, this.stateTitle ? (index.h("gx-ide-title", { alignment: "center" }, this.stateTitle)) : null, this.stateDescription ? (index.h("gxg-text", { textAlign: "center" }, this.stateDescription)) : null), index.h("div", { class: "container__buttons" }, this.primaryButtonLabel ? (index.h("gxg-button", { type: "primary-text-only", ref: el => (this.primaryButtonEl = el) }, this.primaryButtonLabel)) : null, this.secondaryButtonLabel ? (index.h("gxg-button", { type: "secondary-text-only", ref: el => (this.secondaryButtonEl = el) }, this.secondaryButtonLabel)) : null))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "display": ["watchDisplayHandler"]
-    }; }
-};
-GxIdeEmptyState.style = gxIdeEmptyStateCss;
+const form = require('./form-487189d7.js');
+const classesNames = require('./classesNames-789a05af.js');
+const detectClickOutside = require('./detect-click-outside-995ccc90.js');
 /* STENCIL IMPORTS */
 /*A function that helps highlighting characters when searching.*/
@@ -180,7 +122,123 @@ const GxgCard = class {
 };
 GxgCard.style = cardCss;
-exports.gx_ide_empty_state = GxIdeEmptyState;
+const titleEditableCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.gxg-validation--warning) .form-element{border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--ds-border-color--warning);border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--warning)}:host(.gxg-validation--error) .form-element{border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--ds-border-color--error);border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--error)}:host(.gxg-validation--success) .form-element{border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--ds-border-color--success);border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--success)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper{--margin-inline-start:6px;overflow:hidden;transition:150ms width;width:0}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important;margin-inline-start:var(--margin-inline-start);box-sizing:border-box}.tooltip-inner-wrapper--visible{width:calc(var(--ds-icon-size-box--small) + var(--margin-inline-start))}.tooltip-inner-wrapper--hidden{display:none}:host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--ds-background-color-disabled) !important;color:var(--ds-color--disabled) !important;border-color:var(--ds-border-color-disabled) !important;cursor:default !important}:host{display:block;color:var(--gxg-title-editable__color)}:host .wrapper{font-family:var(--ds-base-font-family-primary);position:relative;max-width:100%}:host input{font-family:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;color:inherit;background-color:transparent;border:none;padding:0;box-sizing:border-box;flex-grow:1;cursor:auto;border-bottom:2px solid transparent}:host input:focus{outline:none}.wrapper{display:flex;align-items:center;gap:var(--gxg-title-editable-wrapper__gap);font-weight:var(--gxg-title-editable__font-weight)}:host(:not([editing])) input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([click-to-edit]:not([disable-edition])) .wrapper,:host([click-to-edit]:not([disable-edition])) input{cursor:pointer}:host([title-type=h1]) .wrapper{font-size:var(--gxg-title-editable-h1__font-size);text-transform:capitalize}:host([title-type=h2]) .wrapper{font-size:var(--gxg-title-editable-h2__font-size)}:host([fluid]) .wrapper{display:inline-flex}:host(.focus--text.editing) input{color:var(--gxg-title-editable__color--editing)}:host(.focus--line.editing) input{border-bottom-color:var(--gxg-title-editable__color--editing)}.ghost{font-family:inherit;font-size:inherit;position:fixed;visibility:hidden;height:auto;width:auto;white-space:nowrap;bottom:0;left:0;transform:translate(-100%, -100%)}.right-wrapper{display:flex;align-items:center}";
+const GxgTitleEditable = class {
+    constructor(hostRef) {
+        /*PRIVATE METHODS*/
+        this.edit = () => {
+            this.editing = true;
+            this.positionCursorAtTheEnd();
+        };
+        this.wrapperClickedHandler = () => {
+            this.editing = true;
+        };
+        this.positionCursorAtTheEnd = () => {
+            this.textInput.selectionStart = this.textInput.selectionEnd =
+                this.textInput.value.length;
+            this.textInput.focus();
+        };
+        this.inputKeyDownHandler = (e) => {
+            if (e.key === "Enter" || e.key === "Escape") {
+                e.preventDefault();
+                this.editing = false;
+                this.editButtonEl.focus();
+            }
+            else if (this.fluid) {
+                this.setInputWidth();
+            }
+        };
+        this.detectClickOutsideFunc = (e) => {
+            const clickedOutside = detectClickOutside.detectClickOutside(e, this.wrapperEl);
+            if (clickedOutside) {
+                this.editing = false;
+            }
+        };
+        this.setInputWidth = () => {
+            this.textInput.style.width = this.value.length + 1 + "ch";
+        };
+        this.inputInputHandler = () => {
+            this.value = this.textInput.value;
+            if (this.fluid) {
+                this.ghostDiv.innerText = this.value;
+                this.updateInputWidth();
+            }
+        };
+        this.updateInputWidth = () => {
+            if (this.fluid) {
+                const ghostDivWidth = this.ghostDiv.getBoundingClientRect().width;
+                this.textInput.style.width = `${ghostDivWidth}px`;
+            }
+        };
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 7);
+        this.value = undefined;
+        this.titleType = "h1";
+        this.disableEdition = false;
+        this.debounce = false;
+        this.debounceDelay = 800;
+        this.disabled = false;
+        this.clickToEdit = false;
+        this.fluid = false;
+        this.focusType = undefined;
+        this.validationStatus = "indeterminate";
+        this.validationMessage = undefined;
+        this.hideTooltip = false;
+        this.editing = false;
+    }
+    get el() { return index.getElement(this); }
+    watchValueHandler(newValue) {
+        if (this.debounce) {
+            clearTimeout(this.timeoutReference);
+            this.timeoutReference = setTimeout(() => {
+                this.valueChanged.emit(newValue);
+            }, this.debounceDelay);
+        }
+        else {
+            this.valueChanged.emit(newValue);
+        }
+    }
+    watchEditingHandler(editing) {
+        if (editing) {
+            document.addEventListener("click", this.detectClickOutsideFunc);
+        }
+        else {
+            document.removeEventListener("click", this.detectClickOutsideFunc);
+        }
+    }
+    /*COMPONENT LIFECYCLE METHODS*/
+    componentDidLoad() {
+        if (this.fluid) {
+            this.inputInputHandler();
+        }
+    }
+    /*RENDER*/
+    render() {
+        return (index.h(index.Host, { class: {
+                editing: this.editing,
+                "focus--text": this.focusType === "text",
+                "focus--line": this.focusType === "line",
+                [classesNames.formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
+                [classesNames.formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
+                [classesNames.formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
+                [classesNames.formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
+                [classesNames.commonClassesNames["DISABLED_CLASS"]]: this.disabled
+            } }, index.h("div", { onMouseUp: this.clickToEdit &&
+                !this.editing &&
+                !this.disableEdition &&
+                this.wrapperClickedHandler, class: {
+                wrapper: true
+            }, ref: el => (this.wrapperEl = el) }, this.fluid ? (index.h("div", { class: "ghost", ref: el => (this.ghostDiv = el) })) : null, index.h("input", { type: "text", value: this.value, readOnly: !this.editing, ref: el => (this.textInput = el), onKeyDown: this.inputKeyDownHandler, onInput: this.inputInputHandler, tabIndex: this.editing ? 0 : -1 }), index.h("div", { class: "right-wrapper" }, !this.disableEdition ? (index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/edit", onClick: this.edit, ref: el => (this.editButtonEl = el) })) : null, form.formTooltipLogic(this, this.hideTooltip)))));
+    }
+    static get watchers() { return {
+        "value": ["watchValueHandler"],
+        "editing": ["watchEditingHandler"]
+    }; }
+};
+GxgTitleEditable.style = titleEditableCss;
 exports.gxg_card = GxgCard;
+exports.gxg_title_editable = GxgTitleEditable;
-//# sourceMappingURL=gx-ide-empty-state_2.cjs.entry.js.map
+//# sourceMappingURL=gxg-card_2.cjs.entry.js.map