@progressio_resources/gravity-design-system 2.4.7 → 2.5.0

package/lib/components/gravity-text-field/gravity-text-field.component.d.ts

@@ -1,43 +1,45 @@
 import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class GravityTextFieldComponent implements OnInit, OnChanges {
-    iconResponse: EventEmitter<boolean>;
+    leftIconResponse: EventEmitter<void>;
+    rightIconResponse: EventEmitter<void>;
     textFieldValueResponse: EventEmitter<string>;
-    autocomplete: string;
-    clickOnIconName: string | boolean;
+    private inputElement;
+    private textAreaElement;
     currentLang: string;
-    customPlaceholder: string;
     customInputValue: string;
+    customState: 'default' | 'active' | 'hover' | 'typing' | 'typed' | 'typed-error' | 'typed-positive' | 'disabled' | 'readonly' | 'autofill';
     cypressTag: string;
-    iconColor?: string | string[];
-    iconNames: string[];
-    iconsSizes: ('sm' | 'md' | 'lg')[];
-    iconPlacement: 'left' | 'right';
-    inputContentType: 'email' | 'number' | 'password' | 'tel' | 'text';
     label: string;
-    placeholderType: 'default' | 'email' | 'url';
     prefix: string;
     required: boolean;
-    state: 'readonly' | 'disabled' | 'enabled';
-    supportTextContent: string;
-    supportTextType: 'neutro' | 'negative' | 'positive';
+    supportText: string;
     textFieldType: 'input' | 'textarea';
+    clickOnLeftIcon: boolean;
+    clickOnRightIcon: boolean;
+    iconLeft: string;
+    iconRight: string;
+    autocomplete: string;
+    inputContentType: 'email' | 'number' | 'password' | 'tel' | 'text';
+    placeholder: string;
     validations: {
         maxLength?: number;
         minLength?: number;
     };
-    private inputElement;
-    private textAreaElement;
+    size: 'sm' | 'md';
+    width: 'short' | 'medium' | 'full';
     focusInput: boolean;
     inputValue: string;
-    private readonly placeholders;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     getPlaceholder(): string;
     clearInput(): void;
     changeInputValue(clearInput?: boolean): void;
-    handleIconClick(iconName: string): void;
-    getIconColor(iconIndex: number): string | null;
+    handleIconClick(iconPosition: 'left' | 'right'): void;
+    getTextFieldStatus(): string;
+    getTextFieldLabelFontSize(): string;
+    getTextFieldInputFontSize(): string;
+    getTextFieldSupportTextFontSize(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<GravityTextFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GravityTextFieldComponent, "gravity-text-field", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "clickOnIconName": { "alias": "clickOnIconName"; "required": false; }; "currentLang": { "alias": "currentLang"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "customInputValue": { "alias": "customInputValue"; "required": false; }; "cypressTag": { "alias": "cypressTag"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "iconNames": { "alias": "iconNames"; "required": false; }; "iconsSizes": { "alias": "iconsSizes"; "required": false; }; "iconPlacement": { "alias": "iconPlacement"; "required": false; }; "inputContentType": { "alias": "inputContentType"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholderType": { "alias": "placeholderType"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "required": { "alias": "required"; "required": false; }; "state": { "alias": "state"; "required": false; }; "supportTextContent": { "alias": "supportTextContent"; "required": false; }; "supportTextType": { "alias": "supportTextType"; "required": false; }; "textFieldType": { "alias": "textFieldType"; "required": false; }; "validations": { "alias": "validations"; "required": false; }; }, { "iconResponse": "clickIcon"; "textFieldValueResponse": "response"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GravityTextFieldComponent, "gravity-text-field", never, { "currentLang": { "alias": "currentLang"; "required": false; }; "customInputValue": { "alias": "customInputValue"; "required": false; }; "customState": { "alias": "customState"; "required": false; }; "cypressTag": { "alias": "cypressTag"; "required": false; }; "label": { "alias": "label"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "required": { "alias": "required"; "required": false; }; "supportText": { "alias": "supportText"; "required": false; }; "textFieldType": { "alias": "textFieldType"; "required": false; }; "clickOnLeftIcon": { "alias": "clickOnLeftIcon"; "required": false; }; "clickOnRightIcon": { "alias": "clickOnRightIcon"; "required": false; }; "iconLeft": { "alias": "iconLeft"; "required": false; }; "iconRight": { "alias": "iconRight"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "inputContentType": { "alias": "inputContentType"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "validations": { "alias": "validations"; "required": false; }; "size": { "alias": "size"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "leftIconResponse": "clickIconLeft"; "rightIconResponse": "clickIconRight"; "textFieldValueResponse": "response"; }, never, never, false, never>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "2.4.7",
+  "version": "2.5.0",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
     "@angular/common": "^16.2.12",

package/src/lib/styles/components/_offcanvas.scss

@@ -29,7 +29,6 @@ $z-index: 1040;
 .offcanvas {
   @extend .elevation-sm;
 
-  background-color: var(--surface-secondary);
   border-left-width: 0 !important;
   bottom: 0;
   box-shadow: 0 4px 10px 0 rgba(21, 28, 41, 0.22) !important;
@@ -43,15 +42,13 @@ $z-index: 1040;
   transition: transform .3s ease-in-out;
   z-index: $z-index;
 
-  @media (min-width: map-get(br.$breakpoints, lg) + 1) {
+  @media (min-width: map-get(br.$breakpoints, md) + 1) {
+    background-color: var(--surface-secondary);
     width: 50% !important;
   }
 
-  @media (min-width: map-get(br.$breakpoints, md) + 1) and (max-width: map-get(br.$breakpoints, lg)) {
-    width: 75% !important;
-  }
-
   @media (max-width: map-get(br.$breakpoints, md)) {
+    background-color: var(--surface-primary);
     width: 100% !important;
   }
 
@@ -64,6 +61,8 @@ $z-index: 1040;
   @extend .gravity-margin-bottom-sm;
 
   align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
   padding: 0;
 }
 

package/src/lib/styles/foundations/colors/themes/_hero.theme.scss

@@ -237,9 +237,9 @@ $placeholder-empty-enabled-primary-light: $n600;
 $label-text-empty-enabled-primary-light: $n400;
 $bg-field-empty-enabled-hover-primary-light: $n800;
 $bg-field-full-enabled-pressed-primary-light: $n900;
-$placeholder-full-enabled-pressed-primary-light: $n400;
-$label-text-full-enabled-pressed-primary-light: $n400;
 $outline-field-full-enabled-pressed-primary-light: $b400;
+$label-text-full-enabled-pressed-primary-light: $n400;
+$placeholder-full-enabled-pressed-primary-light: $n400;
 $bg-field-empty-disabled-primary-light: $n800;
 $placeholder-empty-disabled-primary-light: $n700;
 $label-text-empty-disabled-primary-light: $n700;
@@ -256,7 +256,7 @@ $input-text-full-read-only-primary-light: $n400;
 $label-text-full-read-only-primary-light: $n400;
 $bg-field-empty-enabled-primary-dark: $n100;
 $outline-field-empty-enabled-primary-dark: $n800;
-$placeholder-empty-enabled-primary-dark: $n400;
+$placeholder-empty-enabled-primary-dark: $n600;
 $label-text-empty-enabled-primary-dark: $n800;
 $bg-field-empty-enabled-hover-primary-dark: $n200;
 $bg-field-empty-disabled-primary-dark: $n200;
@@ -277,6 +277,12 @@ $label-text-full-disabled-primary-dark: $n300;
 $bg-field-full-read-only-primary-dark: $n300;
 $input-text-full-read-only-primary-dark: $n800;
 $label-text-full-read-only-primary-dark: $n800;
+$outline-field-full-enabled-typing-primary-light: $b400;
+$outline-field-full-enabled-typing-primary-dark: $b700;
+$outline-field-full-enabled-typed-primary-light: $n400;
+$outline-field-full-enabled-typed-primary-dark: $n800;
+$bg-field-autofill-light: $b800;
+$bg-field-autofill-dark: $n400;
 
 // icon
 $icon-active-primary-light: $n400;
@@ -341,6 +347,10 @@ $notification-success-highlight-primary-dark: $g500;
 $on-bg-icon-notification-warning-primary-dark: $o200;
 $bg-icon-notification-warning-primary-dark: $o400;
 $notification-warning-highlight-primary-dark: $o400;
+$bg-notification-list-primary-light: $n400;
+$bg-notification-list-primary-dark: $n800;
+$on-bg-notification-list-primary-light: $n900;
+$on-bg-notification-list-primary-dark: $n100;
 
 // dialog
 $bg-dialog-primary-light: $n900;

package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss

@@ -161,6 +161,9 @@
   --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
   --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
   --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
+  --outline-field-full-enabled-typing-primary: #{$outline-field-full-enabled-typing-primary-light};
+  --outline-field-full-enabled-typed-primary: #{$outline-field-full-enabled-typed-primary-light};
+  --bg-field-autofill: #{$bg-field-autofill-light};
 
   // icons
   --icon-active-primary: #{$icon-active-primary-light};
@@ -198,6 +201,8 @@
   --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
   --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
   --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
+  --bg-notification-list-primary: #{$bg-notification-list-primary-light};
+  --on-bg-notification-list-primary: #{$on-bg-notification-list-primary-light};
 
   // dialog
   --bg-dialog-primary: #{$bg-dialog-primary-light};
@@ -229,6 +234,7 @@
 
   // shadow
   --shadow-primary: #{$shadow-primary-light};
+  // DONT REMOVE
   --shadow-primary-rgba: #{to-rgb($shadow-primary-light)};
   --shadow-opacity: 0.22;
 }
@@ -269,7 +275,7 @@
   --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
   --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
 
-  // button-negative
+  // button-negative 
   --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
   --bg-button-active-negative: #{$bg-button-active-negative-dark};
   --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
@@ -277,7 +283,7 @@
   --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
   --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
 
-  // button-alternative
+  // button-alternative 
   --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
   --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
   --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
@@ -285,38 +291,38 @@
   --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
   --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
 
-  // disabled-status
+  // disabled-status 
   --on-bg-disabled: #{$on-bg-disabled-dark};
   --bg-disabled: #{$bg-disabled-dark};
   --outline-disabled: #{$outline-disabled-dark};
 
-  // surface
+  // surface 
   --surface-primary: #{$surface-primary-dark};
   --surface-secondary: #{$surface-secondary-dark};
 
-  // text
+  // text 
   --text-primary: #{$text-primary-dark};
   --text-highlight-primary: #{$text-highlight-primary-dark};
 
-  // divider
+  // divider 
   --divider-primary: #{$divider-primary-dark};
 
-  // logo
+  // logo 
   --logo-primary: #{$logo-primary-dark};
 
-  // highlight
+  // highlight 
   --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
   --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
   --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
   --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
 
-  // system
+  // system 
   --positive-primary: #{$positive-primary-dark};
   --negative-primary: #{$negative-primary-dark};
   --cta-primary: #{$bg-button-active-primary-dark};
   --alternative-primary: #{$alternative-primary-dark};
 
-  // calendar
+  // calendar 
   --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
   --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
   --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
@@ -332,16 +338,16 @@
   --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
   --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
 
-  // checkbox
+  // checkbox 
   --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
   --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
   --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
 
-  // radio button
+  // radio button 
   --radio-button-off-primary: #{$radio-button-off-primary-dark};
   --radio-button-on-primary: #{$radio-button-on-primary-dark};
 
-  // stepper
+  // stepper 
   --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
   --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
   --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
@@ -355,7 +361,7 @@
   --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
   --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
 
-  // table
+  // table 
   --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
   --bg-table-header-primary: #{$bg-table-header-primary-dark};
   --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
@@ -365,11 +371,11 @@
   --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
   --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
 
-  // tooltip
+  // tooltip 
   --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
   --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
 
-  // text-field
+  // text-field 
   --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
   --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
   --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
@@ -393,12 +399,15 @@
   --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
   --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
   --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
+  --outline-field-full-enabled-typing-primary: #{$outline-field-full-enabled-typing-primary-dark};
+  --outline-field-full-enabled-typed-primary: #{$outline-field-full-enabled-typed-primary-dark};
+  --bg-field-autofill: #{$bg-field-autofill-dark};
 
-  // icons
+  // icons 
   --icon-active-primary: #{$icon-active-primary-dark};
   --icon-hover-primary: #{$icon-hover-primary-dark};
 
-  // dropdown-list
+  // dropdown-list 
   --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
   --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
   --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
@@ -407,10 +416,10 @@
   --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
   --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
 
-  // loading
+  // loading 
   --loading-primary: #{$loading-primary-dark};
 
-  // switch
+  // switch 
   --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
   --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
   --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
@@ -418,7 +427,7 @@
   --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
   --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
 
-  // notification
+  // notification 
   --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
   --bg-notification-primary: #{$bg-notification-primary-dark};
   --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
@@ -430,8 +439,10 @@
   --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
   --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
   --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
+  --bg-notification-list-primary: #{$bg-notification-list-primary-dark};
+  --on-bg-notification-list-primary: #{$on-bg-notification-list-primary-dark};
 
-  // dialog
+  // dialog 
   --bg-dialog-primary: #{$bg-dialog-primary-dark};
   --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
   --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
@@ -441,14 +452,14 @@
   --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
   --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
 
-  // link
+  // link 
   --link-active-primary: #{$link-active-primary-dark};
   --link-hover-primary: #{$link-hover-primary-dark};
   --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
   --link-disabled-primary: #{$link-disabled-primary-dark};
   --link-pressed-primary: #{$link-pressed-primary-dark};
 
-  // menu
+  // menu 
   --divider-menu-primary: #{$divider-menu-primary-dark};
   --bg-menu-primary: #{$bg-menu-primary-dark};
   --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
@@ -459,8 +470,9 @@
   --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
   --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
 
-  // shadow
+  // shadow 
   --shadow-primary: #{$shadow-primary-dark};
+  // DONT REMOVE
   --shadow-primary-rgba: #{to-rgb($shadow-primary-dark)};
   --shadow-opacity: 1;
 }

package/src/lib/styles/foundations/typography/_hero.typography.scss

@@ -20,6 +20,8 @@ body {
 }
 
 .hr-body-text {
+  font-family: 'Roboto Flex', sans-serif;
+
   &.sm-regular {
     font-size: $font-size-12px;
     font-weight: 400;
@@ -57,6 +59,8 @@ body {
 }
 
 .hr-title {
+  font-family: 'Roboto Flex', sans-serif;
+
   &.sm-regular {
     font-size: $font-size-16px;
     font-weight: 420;
@@ -88,6 +92,8 @@ body {
 }
 
 .hr-label {
+  font-family: 'Roboto Flex', sans-serif;
+
   &.sm-regular {
     font-size: $font-size-12px;
     font-weight: 343;
@@ -126,6 +132,8 @@ body {
 }
 
 .hr-headline {
+  font-family: 'Roboto Flex', sans-serif;
+
   &.sm-bold {
     font-size: $font-size-32px;
     font-weight: 700;
@@ -146,6 +154,8 @@ body {
 }
 
 .hr-display {
+  font-family: 'Roboto Flex', sans-serif;
+
   &.sm-bold {
     font-size: $font-size-50px;
     font-weight: 700;