npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.99 → 0.0.101 - Mend

@genexus/genexus-ide-ui 0.0.99 → 0.0.101

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

package/dist/components/pill.js CHANGED Viewed

@@ -4,12 +4,12 @@ import { e as exportParts } from './export-parts.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
-const pillCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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:inline-flex;align-items:center;border-color:var(--gray-02);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:11px;padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03);opacity:1;height:var(--spacing-comp-04);box-sizing:border-box;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .title{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)}:host .clear-button{margin-inline-start:10px;cursor:pointer;opacity:0.7}:host .clear-button:hover{opacity:1}:host gxg-icon{transform:scale(0.84)}:host gxg-icon.clear-button{transform:scale(0.65)}:host(.no-icon) gxg-icon.custom{width:0}:host(.has-icon){padding-inline-start:0}:host([type=static]),:host([type=static-with-action]){background-color:var(--gray-01);border-color:var(--gray-01);font-style:italic}:host([type=static-with-action]),:host([type=button-with-action]){padding-inline-end:0}:host([type=button]){padding-inline-end:var(--spacing-comp-02)}:host([type=button]:hover),:host([type=button-with-action]:hover){border-color:var(--gray-07);cursor:pointer}:host([type=button]:focus),:host([type=button-with-action]:focus){border-color:var(--gray-07)}:host([type=button]:active),:host([type=button-with-action]:active){border-color:var(--gray-07)}:host([type=button-with-action]){padding-inline-end:2px}:host([type=button-with-action]) .clear-button{cursor:pointer;opacity:0.5;margin-inline-start:8px}:host([type=button-with-action]) .clear-button:hover{opacity:0.75}:host(.hide){opacity:0}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .title{color:var(--gray-03)}:host([disabled]) gxg-icon{opacity:0.3}:host([disabled][type=button]),:host([disabled][type=button-with-action]){border-color:var(--gray-03)}:host([disabled]:focus){box-shadow:none}:host([height-auto]){height:auto}:host(.large){height:20px}:host(.large) .title{font-size:var(--font-size-lg)}:host(.large) gxg-icon.clear-button{transform:scale(0.85)}:host(.mercury){background-color:var(--gray-10);padding:var(--spacing-comp-01) var(--spacing-comp-04);border-radius:var(--border-radius-xl);height:34px;border-color:transparent}:host(.mercury) .title{font-size:var(--font-size--xs);color:var(--gray-07)}:host(.mercury[type=static]),:host(.mercury[type=static-with-action]){background-color:var(--gray-10)}:host(.mercury[type=static]) .title,:host(.mercury[type=static-with-action]) .title{color:var(--gray-03)}:host(.mercury[italic]) .title{font-style:italic}";
+const pillCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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:inline-flex;align-items:center;border-radius:var(--gxg-pill__border-radius);padding-inline-start:var(--gxg-pill__padding-inline-start);padding-inline-end:var(--gxg-pill__padding-inline-end);opacity:1;height:var(--gxg-pill__height);box-sizing:border-box;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .title{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)}:host .clear-button{cursor:pointer;opacity:0.7}:host .clear-button:hover{opacity:1}:host gxg-icon{transform:scale(0.84)}:host gxg-icon.clear-button{transform:scale(0.65)}:host(.no-icon) gxg-icon.custom{width:0}:host(.has-icon){padding-inline-start:0}:host([type=static]),:host([type=static-with-action]){border:var(--gxg-pill-static__border);background-color:var(--gxg-pill-static__background-color);font-style:var(--gxg-pill-static__font-style)}:host([type=static-with-action]),:host([type=button-with-action]){padding-inline-end:0}:host([type=button]),:host([type=button-with-action]){border:var(--gxg-pill-with-action__border)}:host([type=button]:hover),:host([type=button-with-action]:hover){border:var(--gxg-pill-with-action__border--hover);cursor:pointer}:host([type=button]:focus),:host([type=button-with-action]:focus){border:var(--gxg-pill-with-action__border--hover)}:host([type=button]:active),:host([type=button-with-action]:active){border:var(--gxg-pill-with-action__border--hover)}:host([type=button-with-action]) .clear-button{cursor:pointer;opacity:0.5}:host([type=button-with-action]) .clear-button:hover{opacity:0.75}:host(.hide-pill){opacity:0}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .title{color:var(--gxg-pill__color--disabled)}:host([disabled]) gxg-icon{opacity:0.3}:host([disabled][type=button]),:host([disabled][type=button-with-action]){border:var(--gxg-pill-with-action__border--disabled)}:host([disabled]:focus){box-shadow:none}:host([height-auto]){height:auto}:host(.large){height:20px}:host(.large) .title{font-size:var(--font-size-lg)}:host(.large) gxg-icon.clear-button{transform:scale(0.85)}";
 const GxgPill = /*@__PURE__*/ proxyCustomElement(class GxgPill extends HTMLElement {
     constructor() {
         this.parts = {
-            removeButton: "remove-button",
+            removeButton: "remove-button"
         };
         this.attachExportParts = () => {
             const part = this.el.getAttribute("part");
@@ -33,7 +33,7 @@ const GxgPill = /*@__PURE__*/ proxyCustomElement(class GxgPill extends HTMLEleme
     }
     removeButtonFunc() {
         this.pillRemoved.emit(this.id);
-        this.el.classList.add("hide");
+        this.el.classList.add("hide-pill");
         setTimeout(() => {
             this.el.remove();
         }, 250);
@@ -48,7 +48,7 @@ const GxgPill = /*@__PURE__*/ proxyCustomElement(class GxgPill extends HTMLEleme
     }
     iconColor() {
         if (state.mercury) {
-            return "mercury";
+            return "mercury-neutral";
         }
         else if (this.disabled) {
             return "disabled";
@@ -62,7 +62,7 @@ const GxgPill = /*@__PURE__*/ proxyCustomElement(class GxgPill extends HTMLEleme
                 "no-icon": this.icon === undefined,
                 "has-icon": this.icon !== undefined,
                 large: state.large,
-                mercury: state.mercury,
+                mercury: state.mercury
             }, exportParts: this.exportparts ? this.exportparts : null }, h("gxg-icon", { class: "custom", type: this.iconType(), size: "regular", color: this.iconColor() }), h("span", { class: "title" }, h("slot", null)), this.type === "button-with-action" ||
             this.type === "static-with-action" ? (h("gxg-icon", { class: "clear-button", type: "gemini-tools/close", size: "small", color: "onbackground", onClick: this.removeButtonFunc.bind(this), part: this.parts.removeButton })) : null));
     }

package/dist/components/pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pill.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,81YAA81Y;;MCGj2Y,OAAO;IAChB;QAQA,UAAK,GAAG;YACJ,YAAY,EAAE,eAAe;SAChC,CAAC;QAOF,sBAAiB,GAAG;YAChB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC1C,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACxD,iBAAiB,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,CAAC;SACtE,CAAC;;;;;QApBE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;KACxB;;IAOD,iBAAiB;QACb,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAMD,gBAAgB;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC9B,UAAU,CAAC;YACP,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;SACpB,EAAE,GAAG,CAAC,CAAC;KACX;IACD,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC;SACpB;aACI;YACD,OAAO,oBAAoB,CAAC;SAC/B;KACJ;IACD,SAAS;QACL,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,OAAO,SAAS,CAAC;SACpB;aACI,IAAI,IAAI,CAAC,QAAQ,EAAE;YACpB,OAAO,UAAU,CAAC;SACrB;aACI;YACD,OAAO,SAAS,CAAC;SACpB;KACJ;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE;gBAChC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAClC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACnC,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,oBAAoB;YACrP,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE;KAC5O;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/pills/pill.css?tag=gxg-pill&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/pills/pill.js"],"sourcesContent":["/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n/* Document\n ========================================================================== /\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\nhtml {\n line-height: 1.15;\n / 1 /\n -webkit-text-size-adjust: 100%;\n / 2 /\n}\n\n/ Sections\n ========================================================================== /\n/\n Remove the margin in all browsers.\n /\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\nhr {\n box-sizing: content-box;\n / 1 /\n height: 0;\n / 1 /\n overflow: visible;\n / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\npre {\n font-family: monospace, monospace;\n / 1 /\n font-size: 1em;\n / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n/\n Remove the gray background on active links in IE 10.\n /\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\nabbr[title] {\n border-bottom: none;\n / 1 /\n text-decoration: underline;\n / 2 /\n text-decoration: underline dotted;\n / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n / 1 /\n font-size: 1em;\n / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n/\n Remove the border on images inside links in IE 10.\n /\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n / 1 /\n font-size: 100%;\n / 1 /\n line-height: 1.15;\n / 1 /\n margin: 0;\n / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\nlegend {\n box-sizing: border-box;\n / 1 /\n color: inherit;\n / 2 /\n display: table;\n / 1 /\n max-width: 100%;\n / 1 /\n padding: 0;\n / 3 /\n white-space: normal;\n / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n[type=checkbox],\n[type=radio] {\n box-sizing: border-box;\n / 1 /\n padding: 0;\n / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n[type=search] {\n -webkit-appearance: textfield;\n / 1 /\n outline-offset: -2px;\n / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n / 1 /\n font: inherit;\n / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n/\n Add the correct display in IE 10+.\n /\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n[hidden] {\n display: none;\n}\n\n:root {\n --ui-animaton-speed: 0.2s;\n}\n\n/ALIGNMENT/\n/Ellipsis/\n/**************************************************\nTYPOGRAPHY\n**************************************************/\n/Title 01 (Positive)/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/Title 01 (Negative)/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Title 02 (Positive)/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/Title 03/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Title 04/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Title 05/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Text/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/Quote/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/Link/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/Alerts/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/Tab/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/Label/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/**************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*************************************************/\n/*************************************************\nFORM ELEMENTS\n**************************************************/\n.gxg-scrollbar {\n / Track /\n / Handle /\n / Handle on hover /\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n display: inline-flex;\n align-items: center;\n border-color: var(--gray-02);\n border-width: var(--border-width-sm);\n border-style: var(--border-style-regular);\n border-radius: 11px;\n padding-inline-start: var(--spacing-comp-02);\n padding-inline-end: var(--spacing-comp-03);\n opacity: 1;\n height: var(--spacing-comp-04);\n box-sizing: border-box;\n transition-property: opacity;\n transition-duration: var(--ui-animaton-speed);\n transition-timing-function: ease;\n}\n:host .title {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n:host .clear-button {\n margin-inline-start: 10px;\n cursor: pointer;\n opacity: 0.7;\n}\n:host .clear-button:hover {\n opacity: 1;\n}\n:host gxg-icon {\n transform: scale(0.84);\n}\n:host gxg-icon.clear-button {\n transform: scale(0.65);\n}\n\n:host(.no-icon) gxg-icon.custom {\n width: 0;\n}\n\n:host(.has-icon) {\n padding-inline-start: 0;\n}\n\n:host([type=static]),\n:host([type=static-with-action]) {\n background-color: var(--gray-01);\n border-color: var(--gray-01);\n font-style: italic;\n}\n\n:host([type=static-with-action]),\n:host([type=button-with-action]) {\n padding-inline-end: 0;\n}\n\n:host([type=button]) {\n padding-inline-end: var(--spacing-comp-02);\n}\n\n:host([type=button]:hover),\n:host([type=button-with-action]:hover) {\n border-color: var(--gray-07);\n cursor: pointer;\n}\n\n:host([type=button]:focus),\n:host([type=button-with-action]:focus) {\n border-color: var(--gray-07);\n}\n\n:host([type=button]:active),\n:host([type=button-with-action]:active) {\n border-color: var(--gray-07);\n}\n\n:host([type=button-with-action]) {\n padding-inline-end: 2px;\n}\n:host([type=button-with-action]) .clear-button {\n cursor: pointer;\n opacity: 0.5;\n margin-inline-start: 8px;\n}\n:host([type=button-with-action]) .clear-button:hover {\n opacity: 0.75;\n}\n\n:host(.hide) {\n opacity: 0;\n}\n\n:host(:focus) {\n outline: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) .title {\n color: var(--gray-03);\n}\n:host([disabled]) gxg-icon {\n opacity: 0.3;\n}\n\n:host([disabled][type=button]),\n:host([disabled][type=button-with-action]) {\n border-color: var(--gray-03);\n}\n\n:host([disabled]:focus) {\n box-shadow: none;\n}\n\n:host([height-auto]) {\n height: auto;\n}\n\n/******************************************\nLARGE VERSION (html tag has 'gxg-large' class)\n******************************************/\n:host(.large) {\n height: 20px;\n}\n:host(.large) .title {\n font-size: var(--font-size-lg);\n}\n:host(.large) gxg-icon.clear-button {\n transform: scale(0.85);\n}\n\n/*****************************************\nMercury\n********************************************/\n:host(.mercury) {\n background-color: var(--gray-10);\n padding: var(--spacing-comp-01) var(--spacing-comp-04);\n border-radius: var(--border-radius-xl);\n height: 34px;\n border-color: transparent;\n}\n:host(.mercury) .title {\n font-size: var(--font-size--xs);\n color: var(--gray-07);\n}\n\n:host(.mercury[type=static]),\n:host(.mercury[type=static-with-action]) {\n background-color: var(--gray-10);\n}\n:host(.mercury[type=static]) .title,\n:host(.mercury[type=static-with-action]) .title {\n color: var(--gray-03);\n}\n\n:host(.mercury[italic]) .title {\n font-style: italic;\n}","import { h, Host, } from \"@stencil/core\";\nimport state from \"../store\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgPill {\n constructor() {\n this.disabled = false;\n this.icon = undefined;\n this.heightAuto = false;\n this.id = undefined;\n this.italic = false;\n this.type = \"static\";\n }\n parts = {\n removeButton: \"remove-button\",\n };\n exportparts;\n el;\n pillRemoved;\n componentWillLoad() {\n this.attachExportParts();\n }\n attachExportParts = () => {\n const part = this.el.getAttribute(\"part\");\n const exportPartsResult = exportParts(part, this.parts);\n exportPartsResult.length && (this.exportparts = exportPartsResult);\n };\n removeButtonFunc() {\n this.pillRemoved.emit(this.id);\n this.el.classList.add(\"hide\");\n setTimeout(() => {\n this.el.remove();\n }, 250);\n }\n iconType() {\n if (this.icon !== undefined) {\n return this.icon;\n }\n else {\n return \"gemini-tools/empty\";\n }\n }\n iconColor() {\n if (state.mercury) {\n return \"mercury\";\n }\n else if (this.disabled) {\n return \"disabled\";\n }\n else {\n return \"success\";\n }\n }\n render() {\n return (h(Host, { tabindex: \"0\", class: {\n \"no-icon\": this.icon === undefined,\n \"has-icon\": this.icon !== undefined,\n large: state.large,\n mercury: state.mercury,\n }, exportParts: this.exportparts ? this.exportparts : null }, h(\"gxg-icon\", { class: \"custom\", type: this.iconType(), size: \"regular\", color: this.iconColor() }), h(\"span\", { class: \"title\" }, h(\"slot\", null)), this.type === \"button-with-action\" \|\|\n this.type === \"static-with-action\" ? (h(\"gxg-icon\", { class: \"clear-button\", type: \"gemini-tools/close\", size: \"small\", color: \"onbackground\", onClick: this.removeButtonFunc.bind(this), part: this.parts.removeButton })) : null));\n }\n static get is() { return \"gxg-pill\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"pill.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"pill.css\"]\n };\n }\n static get properties() {\n return {\n \"disabled\": {\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 presence of this attribute disables the pill\"\n },\n \"attribute\": \"disabled\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"icon\": {\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 icon\"\n },\n \"attribute\": \"icon\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"heightAuto\": {\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 presence of this attribute sets auto-height. Useful when the text overflows.\"\n },\n \"attribute\": \"height-auto\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"id\": {\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 pill id\"\n },\n \"attribute\": \"id\",\n \"reflect\": false\n },\n \"italic\": {\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\": \"Stylizes the font with italic (only used in mercury)\"\n },\n \"attribute\": \"italic\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"type\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"PillType\",\n \"resolved\": \"\\\"button\\\" \| \\\"button-with-action\\\" \| \\\"static\\\" \| \\\"static-with-action\\\"\",\n \"references\": {\n \"PillType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/pills/pill.tsx\",\n \"id\": \"src/components/pills/pill.tsx::PillType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of pill\"\n },\n \"attribute\": \"type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"static\\\"\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"pillRemoved\",\n \"name\": \"pillRemoved\",\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=pill.js.map\n"],"version":3}
1	+ {"file":"pill.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,25XAA25X;;MCG95X,OAAO;IAChB;QAQA,UAAK,GAAG;YACJ,YAAY,EAAE,eAAe;SAChC,CAAC;QAOF,sBAAiB,GAAG;YAChB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC1C,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACxD,iBAAiB,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,CAAC;SACtE,CAAC;;;;;QApBE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;KACxB;;IAOD,iBAAiB;QACb,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAMD,gBAAgB;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACnC,UAAU,CAAC;YACP,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;SACpB,EAAE,GAAG,CAAC,CAAC;KACX;IACD,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC;SACpB;aACI;YACD,OAAO,oBAAoB,CAAC;SAC/B;KACJ;IACD,SAAS;QACL,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,OAAO,iBAAiB,CAAC;SAC5B;aACI,IAAI,IAAI,CAAC,QAAQ,EAAE;YACpB,OAAO,UAAU,CAAC;SACrB;aACI;YACD,OAAO,SAAS,CAAC;SACpB;KACJ;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE;gBAChC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAClC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACnC,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,oBAAoB;YACrP,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE;KAC5O;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/pills/pill.css?tag=gxg-pill&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/pills/pill.js"],"sourcesContent":["/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n/* Document\n ========================================================================== /\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\nhtml {\n line-height: 1.15;\n / 1 /\n -webkit-text-size-adjust: 100%;\n / 2 /\n}\n\n/ Sections\n ========================================================================== /\n/\n Remove the margin in all browsers.\n /\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\nhr {\n box-sizing: content-box;\n / 1 /\n height: 0;\n / 1 /\n overflow: visible;\n / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\npre {\n font-family: monospace, monospace;\n / 1 /\n font-size: 1em;\n / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n/\n Remove the gray background on active links in IE 10.\n /\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\nabbr[title] {\n border-bottom: none;\n / 1 /\n text-decoration: underline;\n / 2 /\n text-decoration: underline dotted;\n / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n / 1 /\n font-size: 1em;\n / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n/\n Remove the border on images inside links in IE 10.\n /\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n / 1 /\n font-size: 100%;\n / 1 /\n line-height: 1.15;\n / 1 /\n margin: 0;\n / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\nlegend {\n box-sizing: border-box;\n / 1 /\n color: inherit;\n / 2 /\n display: table;\n / 1 /\n max-width: 100%;\n / 1 /\n padding: 0;\n / 3 /\n white-space: normal;\n / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n[type=checkbox],\n[type=radio] {\n box-sizing: border-box;\n / 1 /\n padding: 0;\n / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n[type=search] {\n -webkit-appearance: textfield;\n / 1 /\n outline-offset: -2px;\n / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n / 1 /\n font: inherit;\n / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n/\n Add the correct display in IE 10+.\n /\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n[hidden] {\n display: none;\n}\n\n:root {\n --ui-animaton-speed: 0.2s;\n}\n\n/ALIGNMENT/\n/Ellipsis/\n/**************************************************\nTYPOGRAPHY\n**************************************************/\n/Title 01 (Positive)/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/Title 01 (Negative)/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Title 02 (Positive)/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/Title 03/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Title 04/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Title 05/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/Text/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/Quote/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/Link/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/Alerts/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/Tab/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/Label/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/**************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*************************************************/\n/*************************************************\nFORM ELEMENTS\n**************************************************/\n.gxg-scrollbar {\n / Track /\n / Handle /\n / Handle on hover /\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n display: inline-flex;\n align-items: center;\n border-radius: var(--gxg-pill__border-radius);\n padding-inline-start: var(--gxg-pill__padding-inline-start);\n padding-inline-end: var(--gxg-pill__padding-inline-end);\n opacity: 1;\n height: var(--gxg-pill__height);\n box-sizing: border-box;\n transition-property: opacity;\n transition-duration: var(--ui-animaton-speed);\n transition-timing-function: ease;\n}\n:host .title {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n:host .clear-button {\n cursor: pointer;\n opacity: 0.7;\n}\n:host .clear-button:hover {\n opacity: 1;\n}\n:host gxg-icon {\n transform: scale(0.84);\n}\n:host gxg-icon.clear-button {\n transform: scale(0.65);\n}\n\n:host(.no-icon) gxg-icon.custom {\n width: 0;\n}\n\n:host(.has-icon) {\n padding-inline-start: 0;\n}\n\n:host([type=static]),\n:host([type=static-with-action]) {\n border: var(--gxg-pill-static__border);\n background-color: var(--gxg-pill-static__background-color);\n font-style: var(--gxg-pill-static__font-style);\n}\n\n:host([type=static-with-action]),\n:host([type=button-with-action]) {\n padding-inline-end: 0;\n}\n\n:host([type=button]),\n:host([type=button-with-action]) {\n border: var(--gxg-pill-with-action__border);\n}\n\n:host([type=button]:hover),\n:host([type=button-with-action]:hover) {\n border: var(--gxg-pill-with-action__border--hover);\n cursor: pointer;\n}\n\n:host([type=button]:focus),\n:host([type=button-with-action]:focus) {\n border: var(--gxg-pill-with-action__border--hover);\n}\n\n:host([type=button]:active),\n:host([type=button-with-action]:active) {\n border: var(--gxg-pill-with-action__border--hover);\n}\n\n:host([type=button-with-action]) .clear-button {\n cursor: pointer;\n opacity: 0.5;\n}\n:host([type=button-with-action]) .clear-button:hover {\n opacity: 0.75;\n}\n\n:host(.hide-pill) {\n opacity: 0;\n}\n\n:host(:focus) {\n outline: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) .title {\n color: var(--gxg-pill__color--disabled);\n}\n:host([disabled]) gxg-icon {\n opacity: 0.3;\n}\n\n:host([disabled][type=button]),\n:host([disabled][type=button-with-action]) {\n border: var(--gxg-pill-with-action__border--disabled);\n}\n\n:host([disabled]:focus) {\n box-shadow: none;\n}\n\n:host([height-auto]) {\n height: auto;\n}\n\n/******************************************\nLARGE VERSION (html tag has 'gxg-large' class)\n********************************************/\n:host(.large) {\n height: 20px;\n}\n:host(.large) .title {\n font-size: var(--font-size-lg);\n}\n:host(.large) gxg-icon.clear-button {\n transform: scale(0.85);\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgPill {\n constructor() {\n this.disabled = false;\n this.icon = undefined;\n this.heightAuto = false;\n this.id = undefined;\n this.italic = false;\n this.type = \"static\";\n }\n parts = {\n removeButton: \"remove-button\"\n };\n exportparts;\n el;\n pillRemoved;\n componentWillLoad() {\n this.attachExportParts();\n }\n attachExportParts = () => {\n const part = this.el.getAttribute(\"part\");\n const exportPartsResult = exportParts(part, this.parts);\n exportPartsResult.length && (this.exportparts = exportPartsResult);\n };\n removeButtonFunc() {\n this.pillRemoved.emit(this.id);\n this.el.classList.add(\"hide-pill\");\n setTimeout(() => {\n this.el.remove();\n }, 250);\n }\n iconType() {\n if (this.icon !== undefined) {\n return this.icon;\n }\n else {\n return \"gemini-tools/empty\";\n }\n }\n iconColor() {\n if (state.mercury) {\n return \"mercury-neutral\";\n }\n else if (this.disabled) {\n return \"disabled\";\n }\n else {\n return \"success\";\n }\n }\n render() {\n return (h(Host, { tabindex: \"0\", class: {\n \"no-icon\": this.icon === undefined,\n \"has-icon\": this.icon !== undefined,\n large: state.large,\n mercury: state.mercury\n }, exportParts: this.exportparts ? this.exportparts : null }, h(\"gxg-icon\", { class: \"custom\", type: this.iconType(), size: \"regular\", color: this.iconColor() }), h(\"span\", { class: \"title\" }, h(\"slot\", null)), this.type === \"button-with-action\" \|\|\n this.type === \"static-with-action\" ? (h(\"gxg-icon\", { class: \"clear-button\", type: \"gemini-tools/close\", size: \"small\", color: \"onbackground\", onClick: this.removeButtonFunc.bind(this), part: this.parts.removeButton })) : null));\n }\n static get is() { return \"gxg-pill\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"pill.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"pill.css\"]\n };\n }\n static get properties() {\n return {\n \"disabled\": {\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 presence of this attribute disables the pill\"\n },\n \"attribute\": \"disabled\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"icon\": {\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 icon\"\n },\n \"attribute\": \"icon\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"heightAuto\": {\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 presence of this attribute sets auto-height. Useful when the text overflows.\"\n },\n \"attribute\": \"height-auto\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"id\": {\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 pill id\"\n },\n \"attribute\": \"id\",\n \"reflect\": false\n },\n \"italic\": {\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\": \"Stylizes the font with italic (only used in mercury)\"\n },\n \"attribute\": \"italic\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"type\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"PillType\",\n \"resolved\": \"\\\"button\\\" \| \\\"button-with-action\\\" \| \\\"static\\\" \| \\\"static-with-action\\\"\",\n \"references\": {\n \"PillType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/pills/pill.tsx\",\n \"id\": \"src/components/pills/pill.tsx::PillType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of pill\"\n },\n \"attribute\": \"type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"static\\\"\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"pillRemoved\",\n \"name\": \"pillRemoved\",\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=pill.js.map\n"],"version":3}

package/dist/components/recent-news.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './text.js';
 import { d as defineCustomElement$2 } from './title.js';
 import { d as defineCustomElement$1 } from './title-editable.js';
-const recentNewsCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:hidden;padding-bottom:2px;box-sizing:border-box}.news-container{display:flex;flex-direction:column;gap:var(--gx-ide-articles-gap)}.news-container p:first-child{margin-top:0}.news-container p:last-child{margin-bottom:0}gxg-card.section{height:100% !important;overflow:auto;border-bottom:2px solid var(--gray-00)}gxg-ide-loader::part(loader-wrapper){border-radius:8px;overflow:hidden}.gxg-card-container{height:100%;overflow:auto}.gx-ide-message{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm)}.gx-ide-message--hidden{display:none}gx-ide-title{max-width:250px}.news-article{transition:200ms opacity;opacity:0}.news-article.visible{opacity:1}";
+const recentNewsCss = ":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)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:hidden;padding-bottom:2px;box-sizing:border-box}.news-container{display:flex;flex-direction:column;gap:var(--gx-ide-articles-gap)}.news-container p:first-child{margin-top:0}.news-container p:last-child{margin-bottom:0}gxg-card.section{height:100% !important;overflow:auto;border-bottom:2px solid var(--gray-00)}gxg-ide-loader::part(loader-wrapper){border-radius:var(--gxg-card-section_border-radius);overflow:hidden}.gxg-card-container{height:100%;overflow:auto}.gx-ide-message{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm)}.gx-ide-message--hidden{display:none}gx-ide-title{max-width:250px}.news-article{transition:200ms opacity;opacity:0}.news-article.visible{opacity:1}";
 const GxIdeRecentNews = /*@__PURE__*/ proxyCustomElement(class GxIdeRecentNews extends HTMLElement {
     constructor() {

package/dist/components/recent-news.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"recent-news.js","mappings":"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","names":[],"sources":["src/components/start-page/recent-news.scss?tag=gx-ide-recent-news&encapsulation=shadow","src/components/start-page/recent-news.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n box-shadow: none;\n height: 100%;\n overflow: hidden;\n padding-bottom: 2px;\n box-sizing: border-box;\n}\n.news-container {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-articles-gap);\n p:first-child {\n margin-top: 0;\n }\n p:last-child {\n margin-bottom: 0;\n }\n}\ngxg-card.section {\n height: 100% !important;\n overflow: auto;\n border-bottom: 2px solid var(--gray-00);\n}\ngxg-ide-loader::part(loader-wrapper) {\n border-radius: 8px;\n overflow: hidden;\n}\n.gxg-card-container {\n height: 100%;\n overflow: auto;\n}\n.gx-ide-message {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n\n &--hidden {\n display: none;\n }\n}\ngx-ide-title {\n max-width: 250px;\n}\n.news-article {\n transition: 200ms opacity;\n opacity: 0;\n\n &.visible {\n opacity: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\n@Component({\n tag: \"gx-ide-recent-news\",\n styleUrl: \"recent-news.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\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 //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeRecentNewsElement;\n private loaderEl!: HTMLGxgIdeLoaderElement;\n private newsContainerEl: HTMLDivElement;\n private newsRendered = false;\n private setTimeOutNewsDelay = 75;\n\n // 3.STATE() VARIABLES //\n\n /\n The list of news\n /\n @State() news: NewsData[] = [];\n @Watch(\"news\")\n watchNewsHandler() {\n this.displayNews();\n }\n\n /\n True if news couldn't be loaded\n /\n @State() newsLoadFailed = false;\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n Callback invoked to load the news feed (right panel \"Recent News\").\n /\n @Prop() readonly getNewsCallback: GetNewsCallback;\n\n /\n Callback invoked to open a news article.\n */\n @Prop() readonly openNewsCallback: OpenNewsCallback;\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.getNews();\n this.attachLoaderEvents();\n }\n\n componentDidRender() {\n this.evaluateNewsDisplay();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateNewsDisplay = () => {\n if (\n !this.newsRendered &&\n this.news.length > 0 &&\n this.newsContainerEl !== undefined\n ) {\n this.displayNews();\n this.newsRendered = true;\n }\n };\n\n private displayNews = () => {\n if (this.newsContainerEl !== undefined) {\n const news = Array.from(\n this.newsContainerEl.querySelectorAll(\"gxg-card\")\n );\n news.forEach(news => {\n setTimeout(() => {\n news.classList.add(\"visible\");\n }, this.setTimeOutNewsDelay);\n this.setTimeOutNewsDelay += 75;\n });\n }\n };\n\n private attachLoaderEvents = () => {\n this.loaderEl.addEventListener(\"loaderFinished\", () => {\n if (this.news.length === 0) {\n this.newsLoadFailed = true;\n } else {\n this.newsLoadFailed = false;\n }\n });\n };\n\n private getNews = async () => {\n this.loaderEl.show = true;\n if (this.getNewsCallback) {\n const newsResult = await this.getNewsCallback();\n this.loaderEl.show = false;\n if (newsResult && newsResult.length > 0) {\n this.news = newsResult;\n this.newsLoadFailed = false;\n } else {\n this.newsLoadFailed = true;\n }\n }\n };\n\n private openNewsHandler = (newsId: string) => async () => {\n if (this.openNewsCallback) {\n await this.openNewsCallback(newsId);\n }\n };\n\n // 9.LOCAL METHODS -> RENDERS //\n\n private renderNews = (news: NewsData): HTMLGxgCardElement \| null => {\n if (news.id && news.title) {\n return (\n <gxg-card\n id={news.id}\n key={news.id}\n cardType=\"article\"\n cardTitle={news.title}\n icon=\"gx-test/test-results\"\n iconColor=\"auto\"\n actionable\n onClick={this.openNewsHandler(news.id)}\n titleSemibold\n noHeaderBorder\n class=\"news-article\"\n >\n {news.body ? <p>{news.body}</p> : null}\n </gxg-card>\n );\n }\n return null;\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <gxg-card\n class=\"section\"\n cardType=\"section\"\n cardTitle={this._componentLocale.recentNews.title}\n >\n {this.news.length > 0 ? (\n <div\n class=\"news-container\"\n ref={el => (this.newsContainerEl = el as HTMLDivElement)}\n >\n {this.news?.map(singleNews => {\n return this.renderNews(singleNews);\n })}\n </div>\n ) : (\n <div\n class={{\n \"gx-ide-message\": true,\n \"gx-ide-message--hidden\": !this.newsLoadFailed\n }}\n >\n <gx-ide-title alignment=\"center\">\n {this._componentLocale.recentNews.newsNotFetched}\n </gx-ide-title>\n <gxg-button onClick={this.getNews}>\n {this._componentLocale.recentNews.tryAgainButtonLabel}\n </gxg-button>\n <gxg-text\n type=\"text-link\"\n href=\"https://www.genexus.com/en/news\"\n target=\"_blank\"\n >\n {this._componentLocale.recentNews.readThemOnline}\n </gxg-text>\n </div>\n )}\n </gxg-card>\n <gxg-ide-loader\n abortTime={8000}\n container={this.el}\n loaderTitle={this._componentLocale.loader.title}\n description=\"Hang on please\"\n ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n ></gxg-ide-loader>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"recent-news.js","mappings":"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","names":[],"sources":["src/components/start-page/recent-news.scss?tag=gx-ide-recent-news&encapsulation=shadow","src/components/start-page/recent-news.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n box-shadow: none;\n height: 100%;\n overflow: hidden;\n padding-bottom: 2px;\n box-sizing: border-box;\n}\n.news-container {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-articles-gap);\n p:first-child {\n margin-top: 0;\n }\n p:last-child {\n margin-bottom: 0;\n }\n}\ngxg-card.section {\n height: 100% !important;\n overflow: auto;\n border-bottom: 2px solid var(--gray-00);\n}\ngxg-ide-loader::part(loader-wrapper) {\n border-radius: var(--gxg-card-section_border-radius);\n overflow: hidden;\n}\n.gxg-card-container {\n height: 100%;\n overflow: auto;\n}\n.gx-ide-message {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: var(--mer-spacing--sm);\n\n &--hidden {\n display: none;\n }\n}\ngx-ide-title {\n max-width: 250px;\n}\n.news-article {\n transition: 200ms opacity;\n opacity: 0;\n\n &.visible {\n opacity: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../common/locale\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\n@Component({\n tag: \"gx-ide-recent-news\",\n styleUrl: \"recent-news.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\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 //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeRecentNewsElement;\n private loaderEl!: HTMLGxgIdeLoaderElement;\n private newsContainerEl: HTMLDivElement;\n private newsRendered = false;\n private setTimeOutNewsDelay = 75;\n\n // 3.STATE() VARIABLES //\n\n /\n The list of news\n /\n @State() news: NewsData[] = [];\n @Watch(\"news\")\n watchNewsHandler() {\n this.displayNews();\n }\n\n /\n True if news couldn't be loaded\n /\n @State() newsLoadFailed = false;\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n Callback invoked to load the news feed (right panel \"Recent News\").\n /\n @Prop() readonly getNewsCallback: GetNewsCallback;\n\n /\n Callback invoked to open a news article.\n */\n @Prop() readonly openNewsCallback: OpenNewsCallback;\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidLoad() {\n this.getNews();\n this.attachLoaderEvents();\n }\n\n componentDidRender() {\n this.evaluateNewsDisplay();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateNewsDisplay = () => {\n if (\n !this.newsRendered &&\n this.news.length > 0 &&\n this.newsContainerEl !== undefined\n ) {\n this.displayNews();\n this.newsRendered = true;\n }\n };\n\n private displayNews = () => {\n if (this.newsContainerEl !== undefined) {\n const news = Array.from(\n this.newsContainerEl.querySelectorAll(\"gxg-card\")\n );\n news.forEach(news => {\n setTimeout(() => {\n news.classList.add(\"visible\");\n }, this.setTimeOutNewsDelay);\n this.setTimeOutNewsDelay += 75;\n });\n }\n };\n\n private attachLoaderEvents = () => {\n this.loaderEl.addEventListener(\"loaderFinished\", () => {\n if (this.news.length === 0) {\n this.newsLoadFailed = true;\n } else {\n this.newsLoadFailed = false;\n }\n });\n };\n\n private getNews = async () => {\n this.loaderEl.show = true;\n if (this.getNewsCallback) {\n const newsResult = await this.getNewsCallback();\n this.loaderEl.show = false;\n if (newsResult && newsResult.length > 0) {\n this.news = newsResult;\n this.newsLoadFailed = false;\n } else {\n this.newsLoadFailed = true;\n }\n }\n };\n\n private openNewsHandler = (newsId: string) => async () => {\n if (this.openNewsCallback) {\n await this.openNewsCallback(newsId);\n }\n };\n\n // 9.LOCAL METHODS -> RENDERS //\n\n private renderNews = (news: NewsData): HTMLGxgCardElement \| null => {\n if (news.id && news.title) {\n return (\n <gxg-card\n id={news.id}\n key={news.id}\n cardType=\"article\"\n cardTitle={news.title}\n icon=\"gx-test/test-results\"\n iconColor=\"auto\"\n actionable\n onClick={this.openNewsHandler(news.id)}\n titleSemibold\n noHeaderBorder\n class=\"news-article\"\n >\n {news.body ? <p>{news.body}</p> : null}\n </gxg-card>\n );\n }\n return null;\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <gxg-card\n class=\"section\"\n cardType=\"section\"\n cardTitle={this._componentLocale.recentNews.title}\n >\n {this.news.length > 0 ? (\n <div\n class=\"news-container\"\n ref={el => (this.newsContainerEl = el as HTMLDivElement)}\n >\n {this.news?.map(singleNews => {\n return this.renderNews(singleNews);\n })}\n </div>\n ) : (\n <div\n class={{\n \"gx-ide-message\": true,\n \"gx-ide-message--hidden\": !this.newsLoadFailed\n }}\n >\n <gx-ide-title alignment=\"center\">\n {this._componentLocale.recentNews.newsNotFetched}\n </gx-ide-title>\n <gxg-button onClick={this.getNews}>\n {this._componentLocale.recentNews.tryAgainButtonLabel}\n </gxg-button>\n <gxg-text\n type=\"text-link\"\n href=\"https://www.genexus.com/en/news\"\n target=\"_blank\"\n >\n {this._componentLocale.recentNews.readThemOnline}\n </gxg-text>\n </div>\n )}\n </gxg-card>\n <gxg-ide-loader\n abortTime={8000}\n container={this.el}\n loaderTitle={this._componentLocale.loader.title}\n description=\"Hang on please\"\n ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n ></gxg-ide-loader>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/tab-bar.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './button.js';
 import { d as defineCustomElement$1 } from './icon2.js';
-const tabBarCss = ":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{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%;background-color:var(--gxg-tab-bar-background-color)}:host .nav--border{border-bottom:var(--ds-border-common-styles)}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar__menu-button{padding-right:4px;transform:scale(0.9)}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host([scrollable]) .nav{width:100%;overflow-y:auto;}:host([scrollable]) .nav::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}:host([scrollable]) .nav::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}:host([scrollable]) .nav::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.gxg-tab-bar--hidden){display:none}:host(.rtl) .tab-bar-menu{left:0;right:auto}";
+const tabBarCss = ":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{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%;background-color:var(--gxg-tab-bar-background-color)}:host .nav--border{border-bottom:var(--ds-border-common-styles)}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar__menu-button{padding-right:4px;transform:scale(0.9)}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host(.gxg-tab-bar--left-stacked),:host(.gxg-tab-bar--right-stacked){height:100%}:host(.gxg-tab-bar--left-stacked) .tab-bar,:host(.gxg-tab-bar--right-stacked) .tab-bar{flex-direction:column}:host(.gxg-tab-bar--left-stacked){border-inline-end:var(--ds-border-common-styles)}:host(.gxg-tab-bar--right-stacked){border-inline-start:var(--ds-border-common-styles)}:host([scrollable]) .nav{width:100%;overflow-y:auto;}:host([scrollable]) .nav::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}:host([scrollable]) .nav::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([scrollable]) .nav::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}:host([scrollable]) .nav::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.gxg-tab-bar--hidden){display:none}:host(.rtl) .tab-bar-menu{left:0;right:auto}";
 const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLElement {
     constructor() {
@@ -60,6 +60,7 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLE
         this.tabBarMenuPosition = undefined;
         this.displayBorder = false;
         this.scrollable = false;
+        this.stacked = null;
         this.rtl = false;
         this.detectClickOutsideTabBarMenu =
             this.detectClickOutsideTabBarMenu.bind(this);
@@ -120,7 +121,8 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLE
         if (gxgTabsPosition === "top" || gxgTabsPosition === "bottom") {
             sizeReference = this.el.parentElement.offsetWidth;
         }
-        else if (gxgTabsPosition === "right" || gxgTabsPosition === "left") {
+        else if (gxgTabsPosition === "right-rotated" ||
+            gxgTabsPosition === "left-rotated") {
             sizeReference = this.el.parentElement.offsetHeight;
         }
         const tabBarWidth = this.tabBar.offsetWidth;
@@ -148,7 +150,8 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLE
                 this.appendedButtons--;
             }
         }
-        if (gxgTabsPosition === "right" || gxgTabsPosition === "left") {
+        if (gxgTabsPosition === "right-rotated" ||
+            gxgTabsPosition === "left-rotated") {
             this.tabBarMenuHeight = this.appendedButtons * buttonHeight + "px";
         }
         this.evaluateMenuButtonsTabIndex(this.tabBarMenuCollapsed);
@@ -187,8 +190,8 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLE
             this.tabBarMenuPosition = "bottom";
         }
         //Tabbar menu on right
-        if (gxgTabsPosition === "right") {
-            this.tabBarMenuPosition = "right";
+        if (gxgTabsPosition === "right-rotated") {
+            this.tabBarMenuPosition = "right-rotated";
         }
         this.setIndexToTabButtons();
     }
@@ -225,17 +228,21 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLE
                 rtl: this.rtl,
                 "gxg-tab-bar": true,
                 "gxg-tab-bar--hidden": this.hidden,
+                "gxg-tab-bar--left-stacked": this.stacked === "left-stacked",
+                "gxg-tab-bar--right-stacked": this.stacked === "right-stacked",
                 mercury: state.mercury
             }, exportParts: this.exportparts ? this.exportparts : null }, h("nav", { class: {
                 nav: true,
-                "nav--border": this.displayBorder
-            } }, h("ul", { class: "tab-bar", ref: el => (this.tabBar = el) }, h("slot", { name: "tab-bar" })), this.renderTabBarMenu(), h("ul", { class: {
+                "nav--border": this.displayBorder && this.stacked === null
+            } }, h("ul", { class: {
+                "tab-bar": true
+            }, ref: el => (this.tabBar = el) }, h("slot", { name: "tab-bar" })), this.renderTabBarMenu(), h("ul", { class: {
                 "tab-bar-menu": true,
                 "tab-bar-menu--collapsed": this.tabBarMenuCollapsed,
                 top: this.tabBarMenuPosition === "top",
-                right: this.tabBarMenuPosition === "right",
+                right: this.tabBarMenuPosition === "right-rotated",
                 bottom: this.tabBarMenuPosition === "bottom",
-                left: this.tabBarMenuPosition === "left"
+                left: this.tabBarMenuPosition === "left-rotated"
             }, style: {
                 "--tabBarMenuHeight": this.tabBarMenuHeight,
                 "--tabBarMenuWidth": this.tabBarMenuWidth
@@ -249,6 +256,7 @@ const GxgTabBar = /*@__PURE__*/ proxyCustomElement(class GxgTabBar extends HTMLE
         "hidden": [4],
         "displayBorder": [4, "display-border"],
         "scrollable": [516],
+        "stacked": [1],
         "appendedButtons": [32],
         "tabBarMenuHeight": [32],
         "tabBarMenuWidth": [32],