@vector-crystal-web/atoms 1.25.2 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-crystal-web/atoms",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "description": "Atomic components for the Crystal Design System (Angular, PrimeNG)",
   "keywords": [
     "angular",
@@ -19,7 +19,7 @@
     "primeflex": "^3.3.1",
     "@phosphor-icons/web": "^2.1.2",
     "@vector-crystal-web/tokens": "^1.8.2",
-    "@vector-crystal-web/shared": "^1.1.1"
+    "@vector-crystal-web/shared": "^1.1.2"
   },
   "sideEffects": false,
   "publishConfig": {
@@ -39,14 +39,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-accordion.mjs"
     },
-    "./button": {
-      "types": "./button/index.d.ts",
-      "default": "./fesm2022/vector-crystal-web-atoms-button.mjs"
-    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-avatar.mjs"
     },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "default": "./fesm2022/vector-crystal-web-atoms-button.mjs"
+    },
     "./badge": {
       "types": "./badge/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-badge.mjs"
@@ -75,14 +75,14 @@
       "types": "./label/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-label.mjs"
     },
-    "./message": {
-      "types": "./message/index.d.ts",
-      "default": "./fesm2022/vector-crystal-web-atoms-message.mjs"
-    },
     "./hint": {
       "types": "./hint/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-hint.mjs"
     },
+    "./message": {
+      "types": "./message/index.d.ts",
+      "default": "./fesm2022/vector-crystal-web-atoms-message.mjs"
+    },
     "./multiselect": {
       "types": "./multiselect/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-multiselect.mjs"
@@ -95,14 +95,14 @@
       "types": "./popover/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-popover.mjs"
     },
-    "./radio": {
-      "types": "./radio/index.d.ts",
-      "default": "./fesm2022/vector-crystal-web-atoms-radio.mjs"
-    },
     "./panel": {
       "types": "./panel/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-panel.mjs"
     },
+    "./radio": {
+      "types": "./radio/index.d.ts",
+      "default": "./fesm2022/vector-crystal-web-atoms-radio.mjs"
+    },
     "./segment-control": {
       "types": "./segment-control/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-segment-control.mjs"
@@ -111,29 +111,29 @@
       "types": "./snackbar/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-snackbar.mjs"
     },
-    "./stepper": {
-      "types": "./stepper/index.d.ts",
-      "default": "./fesm2022/vector-crystal-web-atoms-stepper.mjs"
-    },
     "./switch": {
       "types": "./switch/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-switch.mjs"
     },
-    "./tag": {
-      "types": "./tag/index.d.ts",
-      "default": "./fesm2022/vector-crystal-web-atoms-tag.mjs"
+    "./stepper": {
+      "types": "./stepper/index.d.ts",
+      "default": "./fesm2022/vector-crystal-web-atoms-stepper.mjs"
     },
     "./tabs": {
       "types": "./tabs/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-tabs.mjs"
     },
+    "./textarea": {
+      "types": "./textarea/index.d.ts",
+      "default": "./fesm2022/vector-crystal-web-atoms-textarea.mjs"
+    },
     "./text-field": {
       "types": "./text-field/index.d.ts",
       "default": "./fesm2022/vector-crystal-web-atoms-text-field.mjs"
     },
-    "./textarea": {
-      "types": "./textarea/index.d.ts",
-      "default": "./fesm2022/vector-crystal-web-atoms-textarea.mjs"
+    "./tag": {
+      "types": "./tag/index.d.ts",
+      "default": "./fesm2022/vector-crystal-web-atoms-tag.mjs"
     },
     "./toast": {
       "types": "./toast/index.d.ts",

package/text-field/index.d.ts

@@ -1,22 +1,34 @@
 import * as _angular_core from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { HintSeverity } from '@vector-crystal-web/atoms/hint';
 
 type sizeType = 'x-small' | 'small' | 'medium' | 'large';
-type type = 'outlined' | 'filled';
+type styleType = 'outlined' | 'filled';
+type fieldType = 'text' | 'password';
+interface HintConfig {
+    display?: boolean;
+    text?: string;
+    severity?: HintSeverity;
+    showIcon?: boolean;
+}
 declare class CrystalTextField {
-    label: _angular_core.InputSignal<string | null>;
-    icon: _angular_core.InputSignal<string | null>;
+    fieldtype: _angular_core.InputSignal<fieldType>;
+    placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
     class: _angular_core.InputSignal<string | null>;
     size: _angular_core.InputSignal<sizeType | null>;
-    type: _angular_core.InputSignal<type | null>;
+    type: _angular_core.InputSignal<styleType | null>;
     control: _angular_core.InputSignal<FormControl<any> | null>;
+    hint: _angular_core.InputSignal<HintConfig>;
+    get hintConfig(): Required<HintConfig>;
     private _internalControl;
     formControl: _angular_core.Signal<FormControl<any>>;
     get customClass(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CrystalTextField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CrystalTextField, "cw-text-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CrystalTextField, "cw-text-field", never, { "fieldtype": { "alias": "fieldtype"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { CrystalTextField };
+export type { HintConfig };

package/text-field/src/text-field.scss

@@ -1,96 +1,98 @@
 @use '@vector-crystal-web/tokens/variables' as tokens;
 
-:host ::ng-deep {
-  .container-block {
-    gap: tokens.$spacing-spacing-3;
-    display: flex;
-    margin-bottom: tokens.$spacing-spacing-2;
-    label {
-      font-family: tokens.$primitive-font-family-body;
-      font-weight: var(--primitive-font-weight-6);
-      font-size: var(--primitive-font-size-body-4);
-      color: tokens.$color-text-primary;
-    }
-    i {
-      color: tokens.$color-text-primary;
-      font-weight: var(--primitive-font-weight-6);
-    }
-  }
+@mixin input-text-default {
+  padding: tokens.$padding-padding-4 tokens.$padding-padding-5;
+  width: 100%;
+  font-family: tokens.$primitive-font-family-body;
+  font-size: var(--primitive-font-size-body-3);
+  font-weight: var(--primitive-font-weight-4);
+  color: tokens.$color-text-primary;
+  border: 1px solid tokens.$color-stroke-secondary;
+  border-radius: tokens.$radius-radius-2;
+  background: #{tokens.$color-fill-primary} !important;
 
-  .p-inputtext {
-    padding: tokens.$padding-padding-4 tokens.$padding-padding-5;
-    width: 320px;
-    font-family: tokens.$primitive-font-family-body;
-    font-size: var(--primitive-font-size-body-3);
-    font-weight: var(--primitive-font-weight-4);
+  &::placeholder {
     color: tokens.$color-text-tertiary;
-    border: 1px solid tokens.$color-stroke-secondary;
-    border-radius: tokens.$radius-radius-2;
+    opacity: tokens.$opacity-opacity-6;
   }
 
-  .cw-text-field--outlined {
-    .p-inputtext {
-      background-color: tokens.$color-fill-primary;
-      &:hover {
-        border-color: tokens.$color-stroke-quaternary;
-      }
-      &:focus {
-        border-color: tokens.$color-stroke-brand-default;
-        // box-shadow: 0 0 0 3px tokens.$color-stroke-interactive-brand-focused; // verificar
-      }
+  &:focus {
+    border: 1px solid #{tokens.$color-stroke-feedback-danger-default};
+    background: #{tokens.$white};
+    outline: none;
+  }
+
+  &:focus-visible,
+  &:focus-within {
+    background-color: tokens.$white;
+    border: 1px solid #{tokens.$color-stroke-brand-default} !important;
+    outline: 3px solid #{tokens.$color-stroke-interactive-brand-focused} !important;
+    outline-offset: 0;
+  }
+
+  &.p-invalid {
+    border: 1px solid #{tokens.$color-stroke-feedback-danger-default};
+    background: tokens.$color-fill-primary !important;
+  }
+
+  &.p-variant-filled {
+    border: none;
+    background: #{tokens.$color-fill-secondary} !important;
+
+    &:hover:not(:disabled) {
+      background-color: tokens.$color-fill-tertiary !important;
     }
 
-    &__disabled {
-      label {
-        color: tokens.$color-text-interactive-disabled;
-      }
-      i {
-        color: tokens.$color-text-interactive-disabled;
-      }
-      .p-inputtext {
-        background-color: tokens.$color-fill-primary;
-        &:hover {
-          border: 1px solid tokens.$color-stroke-secondary;
-        }
-      }
+    &:disabled {
+      color: tokens.$color-text-tertiary !important;
+      background-color: tokens.$color-fill-interactive-disabled !important;
+      cursor: not-allowed;
     }
-  }
-  .cw-text-field--filled {
-    .p-inputtext {
-      background-color: tokens.$color-fill-secondary;
-      &:hover {
-        background-color: tokens.$color-fill-tertiary;
-        border-color: tokens.$color-fill-tertiary;
-      }
-      &:focus {
-        background-color: tokens.$color-fill-primary;
-
-        border-color: tokens.$color-stroke-brand-default;
-        box-shadow: 0 0 0 3px tokens.$color-stroke-interactive-brand-focused;
-      }
+
+    &.p-invalid {
+      border: 1px solid #{tokens.$color-stroke-feedback-danger-default};
+      background: #{tokens.$color-fill-secondary} !important;
     }
-    &__disabled {
-      label {
-        color: tokens.$color-text-interactive-disabled;
-      }
-      i {
-        color: tokens.$color-text-interactive-disabled;
-      }
-      .p-inputtext {
-        background-color: tokens.$color-fill-secondary;
-        &:hover {
-          border: 1px solid tokens.$color-stroke-secondary;
-          background-color: tokens.$color-fill-secondary;
-        }
-      }
+  }
+}
+
+:host ::ng-deep {
+  .p-inputtext {
+    @include input-text-default;
+
+    &:disabled {
+      color: tokens.$color-text-tertiary !important;
+      border: 1px solid #{tokens.$color-stroke-primary} !important;
+      background-color: #{tokens.$color-fill-primary} !important;
+      cursor: not-allowed;
     }
   }
 
-  .cw-text-field--error {
+  .p-password {
+    width: 100%;
+    align-items: center;
+
     .p-inputtext {
-      background-color: tokens.$color-fill-primary;
+      @include input-text-default;
+    }
 
-      border-color: tokens.$color-stroke-feedback-danger-default;
+    // hides the key icon of browsers (autofill/keychain)
+    .p-inputtext[type='password']::-webkit-credentials-auto-fill-button {
+      display: none !important;
+      visibility: hidden;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+    }
+
+    svg {
+      margin: 0 0 0 -32px;
+      width: var(--primitive-dimension-7);
+      height: var(--primitive-dimension-7);
+      color: tokens.$color-icon-primary;
+      position: relative;
+      object-fit: cover;
+      cursor: pointer;
     }
   }
 
@@ -99,25 +101,22 @@
       height: var(--primitive-dimension-10);
     }
   }
+
   .cw-text-field--small {
     .p-inputtext {
       height: var(--primitive-dimension-11);
     }
   }
+
   .cw-text-field--medium {
     .p-inputtext {
       height: 42px;
     }
   }
+
   .cw-text-field--large {
     .p-inputtext {
       height: 48px;
     }
   }
-
-  .cw-button--disabled {
-    opacity: tokens.$opacity-opacity-5;
-    color: tokens.$color-text-interactive-disabled-dark;
-    background-color: tokens.$color-text-interactive-disabled;
-  }
 }