@genexus/genexus-ide-ui 0.0.12 → 0.0.14

package/dist/node_modules/@genexus/gemini/dist/collection/components/suggest/styles.css

@@ -0,0 +1,617 @@
+@charset "UTF-8";
+:root {
+  --ui-animaton-speed: 0.2s;
+}
+
+/*ALIGNMENT*/
+/*****************************************************
+TYPOGRAPHY
+*****************************************************/
+/*Title 01 (Positive)*/
+.gxg-title-01 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+/*Title 01 (Negative)*/
+.gxg-title-01--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 02 (Positive)*/
+.gxg-title-02 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-02--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 03*/
+.gxg-title-03 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-03--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 04*/
+.gxg-title-04 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-title-04--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 05*/
+.gxg-title-05 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+}
+
+.gxg-title-05--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Text*/
+.gxg-text {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-text--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+.gxg-text--gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--gray-05);
+}
+
+/*Quote*/
+.gxg-quote {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  font-style: italic;
+}
+
+.gxg-quote--negative {
+  color: var(--color-on-primary);
+}
+
+/*Link*/
+.gxg-link {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+}
+.gxg-link:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-link:active {
+  color: var(--color-primary-active);
+}
+
+.gxg-link-gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+}
+.gxg-link-gray:hover {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+  color: var(--gray-06);
+}
+
+/*Alerts*/
+.gxg-alert-error {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-error-dark);
+  display: inline-block;
+}
+
+.gxg-alert-warning {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-warning-dark);
+  display: inline-block;
+}
+
+.gxg-alert-success {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-success-dark);
+  display: inline-block;
+}
+
+/*Tab*/
+.gxg-tab--disabled {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+.gxg-tab--disabled[disabled] {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+
+/*Label*/
+.gxg-label {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+.gxg-label:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-label:focus {
+  color: var(--color-primary-active);
+}
+.gxg-label:active {
+  color: var(--color-primary-active);
+}
+.gxg-label[disabled] {
+  color: var(--color-primary-disabled);
+}
+
+.gxg-label--negative {
+  color: var(--color-on-primary);
+}
+.gxg-label--negative[disabled] {
+  color: var(--color-on-disabled);
+}
+
+/*****************************************************
+GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
+*****************************************************/
+.gxg-button-styles {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+
+/*****************************************************
+FORM ELEMENTS
+*****************************************************/
+/*Warning*/
+:host(.gxg-validation--warning) .form-element {
+  border-color: var(--color-warning-dark);
+}
+:host(.gxg-validation--warning) .form-element:focus {
+  outline-color: var(--color-warning-dark);
+  border-color: var(--color-warning-dark);
+}
+:host(.gxg-validation--warning) .form-element:focus + .checkmark {
+  --checkmark-border-color: var(--color-warning-dark);
+}
+
+/*Error*/
+:host(.gxg-validation--error) .form-element {
+  border-color: var(--color-error-dark);
+}
+:host(.gxg-validation--error) .form-element:focus {
+  outline-color: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+}
+:host(.gxg-validation--error) .form-element:focus + .checkmark {
+  --checkmark-border-color: var(--color-error-dark);
+}
+
+/*Success*/
+:host(.gxg-validation--success) .form-element {
+  border-color: var(--color-success-dark);
+}
+:host(.gxg-validation--success) .form-element:focus {
+  outline-color: var(--color-success-dark);
+  border-color: var(--color-success-dark);
+}
+:host(.gxg-validation--success) .form-element:focus + .checkmark {
+  --checkmark-border-color: var(--color-success-dark);
+}
+
+ch-suggest {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-lg);
+  color: var(--color-on-background);
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  /* Label */
+  /*Input*/
+  /*header*/
+  /*window*/
+}
+ch-suggest::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+ch-suggest::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+ch-suggest::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+ch-suggest::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+ch-suggest .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+ch-suggest ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+ch-suggest ::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+ch-suggest ::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+ch-suggest ::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+ch-suggest::part(label) {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  display: flex;
+  align-items: center;
+  cursor: default;
+  font-size: inherit;
+}
+ch-suggest[label-position=start]::part(label) {
+  margin-inline-end: var(--gxg-label-margin-horizontal);
+}
+ch-suggest[label-position=above]::part(label) {
+  margin-block-end: var(--gxg-label-margin-vertical);
+}
+ch-suggest::part(input) {
+  height: var(--spacing-comp-05);
+  border: var(--border-width-sm) solid var(--gxg-border-color--regular);
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+  box-sizing: border-box;
+  background-color: var(--color-background);
+}
+ch-suggest::part(input):focus {
+  outline-style: solid;
+  outline-color: var(--color-primary-active);
+  outline-width: var(--border-width-md);
+  outline-offset: -2px;
+}
+ch-suggest::part(input):focus {
+  outline-style: solid;
+  outline-color: var(--color-primary-active);
+  outline-width: var(--border-width-md);
+  outline-offset: -2px;
+}
+ch-suggest::part(header) {
+  display: block;
+  padding-block-end: var(--spacing-comp-02);
+  display: flex;
+  justify-content: flex-end;
+}
+ch-suggest::part(close-button) {
+  height: var(--spacing-comp-05);
+  width: var(--spacing-comp-05);
+  background-color: var(--color-background);
+  color: var(--color-primary-hover);
+  border: 1px solid var(--color-primary-hover);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+}
+ch-suggest::part(close-button):hover {
+  background-color: var(--color-primary-hover-opacity-01);
+}
+ch-suggest::part(close-button)::after {
+  content: "✖";
+  width: 100%;
+  display: block;
+  line-height: 24px;
+  text-align: center;
+}
+ch-suggest::part(close-button):focus {
+  outline-style: solid;
+  outline-color: var(--color-primary-active);
+  outline-width: var(--border-width-md);
+  outline-offset: -2px;
+}
+ch-suggest::part(dropdown) {
+  /*mixin shadow*/
+  background-color: var(--color-background);
+  margin-top: var(--spacing-comp-01);
+  padding: var(--spacing-comp-02);
+  box-shadow: var(--box-shadow-02);
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+ch-suggest::part(dropdown)::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+ch-suggest::part(dropdown)::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+ch-suggest::part(dropdown)::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+ch-suggest::part(dropdown) .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+ch-suggest::part(dropdown) ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+ch-suggest::part(dropdown) ::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+
+/*Validation*/
+.messages-wrapper {
+  margin-top: var(--spacing-comp-02);
+  display: flex;
+  gap: var(--spacing-comp-01);
+  flex-direction: column;
+}
+
+gxg-suggest.gxg-validation--success ch-suggest::part(input) {
+  outline-color: var(--color-success-dark);
+  border-color: var(--color-success-dark);
+}
+gxg-suggest.gxg-validation--success ch-suggest::part(input) + .checkmark {
+  --checkmark-border-color: var(--color-success-dark);
+}
+
+gxg-suggest.gxg-validation--warning ch-suggest::part(input) {
+  outline-color: var(--color-warning-dark);
+  border-color: var(--color-warning-dark);
+}
+gxg-suggest.gxg-validation--warning ch-suggest::part(input) + .checkmark {
+  --checkmark-border-color: var(--color-warning-dark);
+}
+
+gxg-suggest.gxg-validation--error ch-suggest::part(input) {
+  outline-color: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+}
+gxg-suggest.gxg-validation--error ch-suggest::part(input) + .checkmark {
+  --checkmark-border-color: var(--color-error-dark);
+}
+
+/*Disabled*/
+gxg-suggest.gxg--disabled ch-suggest {
+  pointer-events: none;
+}
+gxg-suggest.gxg--disabled ch-suggest::part(input) {
+  background-color: var(--gray-01);
+  color: var(--color-on-disabled);
+}
+
+gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+ch-suggest-list {
+  margin: var(--spacing-comp-01) 0;
+  font-family: inherit;
+  border: var(--border-width-sm) solid var(--gxg-border-color--regular);
+}
+ch-suggest-list:first-child {
+  margin-top: 0;
+}
+ch-suggest-list:last-child {
+  margin-bottom: 0;
+}
+ch-suggest-list::part(title) {
+  text-transform: uppercase;
+  font-weight: var(--font-weight-semibold);
+  margin: var(--spacing-comp-01) 0 0 0;
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+}
+
+ch-suggest-list-item {
+  /*button*/
+}
+ch-suggest-list-item::part(button) {
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+  align-items: center;
+  gap: var(--spacing-comp-01);
+  box-sizing: border-box;
+}
+ch-suggest-list-item::part(button):focus {
+  outline-style: solid;
+  outline-color: var(--color-primary-active);
+  outline-width: var(--border-width-md);
+  outline-offset: -2px;
+}
+ch-suggest-list-item::part(description)::before {
+  content: " - ";
+}
+ch-suggest-list-item gxg-icon::part(ch-icon) {
+  --icon-size: 16px;
+  margin-right: 2px;
+}
+ch-suggest-list-item:hover {
+  background-color: var(--gxg-background-color-item-hover);
+}

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab/tab.css

@@ -339,6 +339,16 @@ FORM ELEMENTS
   padding: 0;
 }
 
+.container--flex {
+  display: flex;
+}
+.container--flex.flex-column {
+  flex-direction: column;
+}
+.container--flex.flex-row {
+  flex-direction: row;
+}
+
 /*********************************************
 LARGE VERSION (html tag has 'gxg-large' class)
 **********************************************/

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-button/tab-button.css

@@ -352,7 +352,7 @@ FORM ELEMENTS
 }
 :host .tab-button:focus {
   outline-style: solid;
-  outline-color: var(--color-primary-enabled);
+  outline-color: var(--color-primary-active);
   outline-width: var(--border-width-md);
   outline-offset: -2px;
 }

package/dist/node_modules/@genexus/gemini/dist/collection/components/text/text.css

@@ -653,20 +653,46 @@ GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
 /*****************************************************
 FORM ELEMENTS
 *****************************************************/
-:host([type=link]),
-:host([type=link-gray]),
-:host([type=alert-error]),
-:host([type=alert-warning]),
-:host([type=alert-success]) {
-  display: inline-block;
-}
-
 :host {
+  display: block;
   font-size: 14px;
 }
 :host p,
-:host q {
+:host q,
+:host a {
+  display: block;
   margin: 0;
+  padding: 0;
+  margin: 0 auto;
+}
+
+:host([text-align=start]) {
+  text-align: start;
+}
+:host([text-align=start]) * {
+  text-align: start;
+}
+
+:host([text-align=center]) {
+  text-align: center;
+}
+:host([text-align=center]) * {
+  text-align: center;
+}
+
+:host([text-align=end]) {
+  text-align: end;
+}
+:host([text-align=end]) * {
+  text-align: end;
+}
+
+:host([padding=s]) {
+  padding: var(--spacing-comp-01);
+}
+
+:host([padding=m]) {
+  padding: var(--spacing-comp-02);
 }
 
 /*********************************************