@allsorter/ui-components 0.0.329 → 0.0.330

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/allsorter",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.329",
+  "version": "0.0.330",
   "description": "Starter template to get up and running quickly with Angular and Storybook",
   "author": "Chromatic <https://chromatic.com/>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/chromaui/intro-storybook-angular-template"
+    "url": "https://bitbucket.org/allsorter/allsorter-components/src/master/"
   },
   "bugs": {
-    "url": "https://github.com/chromaui/intro-storybook-angular-template/issues"
+    "url": "https://bitbucket.org/allsorter/allsorter-components/src/master/issues"
   },
   "license": "MIT",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "storybook": "ng run allsorter:storybook",
-    "build-storybook": "ng run allsorter:build-storybook",
+    "build": "ng build allsorter-lib",
+    "build-lib": "ng build allsorter-lib",
+    "watch": "ng build allsorter-lib --watch --configuration development",
+    "storybook": "ng run allsorter-lib:storybook",
+    "build-storybook": "ng run allsorter-lib:build-storybook",
     "init-msw": "msw init src/"
   },
   "dependencies": {
@@ -43,6 +44,7 @@
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-interactions": "^8.3.3",
     "@storybook/addon-links": "^8.3.3",
+    "@storybook/addon-mdx-gfm": "^8.6.14",
     "@storybook/angular": "^8.3.3",
     "@storybook/blocks": "^8.3.3",
     "@storybook/test": "^8.3.3",
@@ -55,7 +57,8 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "msw": "^2.3.0",
     "msw-storybook-addon": "^2.0.3",
+    "ng-packagr": "^19.0.0",
     "storybook": "^8.3.3",
     "typescript": "^5.6.3"
   }
-}
+}

package/projects/allsorter-lib/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: [
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+};

package/projects/allsorter-lib/README.md

@@ -0,0 +1,63 @@
+# AllsorterLib
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build allsorter-lib
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/allsorter-lib
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/allsorter-lib/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/allsorter-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/allsorter-lib/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@allsorter/ui-components",
+  "version": "0.0.330",
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/allsorter-lib/src/lib/allsorter-lib.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllsorterLibComponent } from './allsorter-lib.component';
+
+describe('AllsorterLibComponent', () => {
+  let component: AllsorterLibComponent;
+  let fixture: ComponentFixture<AllsorterLibComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AllsorterLibComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AllsorterLibComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/allsorter-lib/src/lib/allsorter-lib.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-allsorter-lib',
+  imports: [],
+  template: `
+    <p>
+      allsorter-lib works!
+    </p>
+  `,
+  styles: ``
+})
+export class AllsorterLibComponent {
+
+}

package/projects/allsorter-lib/src/lib/allsorter-lib.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AllsorterLibService } from './allsorter-lib.service';
+
+describe('AllsorterLibService', () => {
+  let service: AllsorterLibService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AllsorterLibService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/allsorter-lib/src/lib/allsorter-lib.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AllsorterLibService {
+
+  constructor() { }
+}

package/projects/allsorter-lib/src/lib/button/button.component.html

@@ -0,0 +1,116 @@
+<!-- Regular button types -->
+<ng-container *ngIf="buttonType !== 'dropdown'; else dropdownTpl">
+  <button
+    mat-flat-button
+    class="btn custom-button" [class]="effectiveFontClass"
+    [ngClass]="{
+      'size-header': size === 'header' && !fontClass,
+      'size-xs': size === 'xs' && !fontClass,
+      'size-sm': size === 'sm' && !fontClass,
+      'size-base': size === 'base' && !fontClass,
+      'size-l': size === 'l' && !fontClass,
+      'size-xl': size === 'xl' && !fontClass,
+      'mat-raised-button': variant === 'raised',
+      'mat-flat-button': variant === 'flat',
+      
+      'mat-stroked-button': variant === 'stroked',
+      'mat-fab': variant === 'fab',
+      'mat-icon-button': variant === 'icon',
+      'icon-circle': buttonType === 'icon-circle',
+      'icon-label': buttonType === 'icon-label',
+      'two-icon-label': buttonType === 'two-icon-label',
+      'blue': category === 'blue',
+      'green': category === 'green',
+      'grey': category === 'grey',
+      'error': category === 'error',
+      'gradient': category === 'gradient',
+      'blue-no-outline': category === 'blue-no-outline',
+      'green-no-outline': category === 'green-no-outline',
+      'grey-no-outline': category === 'grey-no-outline',
+      'error-no-outline': category === 'error-no-outline',
+      'btn-default': state === 'default',
+      'btn-hover': state === 'hover',
+      'btn-pressed': state === 'pressed',
+      'btn-disabled': state === 'disabled'
+    }"
+    [ngStyle]="{ color: color }"
+    [disabled]="state === 'disabled'"
+    (click)="onClick.emit($event)"
+    (mouseenter)="onHover.emit($event)"
+    (mouseleave)="onMouseLeave.emit($event)"
+    [style.display]="'inline-flex'"
+    [style.align-items]="'center'"
+    [style.gap.px]="computeGap()"
+  >
+    <!-- Left Icon (Only shown if leftIcon is set and not empty) -->
+    <mat-icon *ngIf="leftIcon?.trim() as leftIconText"
+              [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
+              class="left-icon">{{ leftIconText }}</mat-icon>
+    <!-- Label (Only shown if iconOnly is false) -->
+    <span *ngIf="!iconOnly" class="button-label" [ngStyle]="{ color: color }">{{ label || '' }}</span>
+  
+    <!-- Right Icon (Only shown if rightIcon is set and not empty) -->
+    <mat-icon *ngIf="rightIcon?.trim() as rightIconText"
+              [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
+              class="right-icon">{{ rightIconText }}</mat-icon>
+  </button>
+  </ng-container>
+  
+  <!-- Dropdown button template -->
+  <ng-template #dropdownTpl>
+    <button
+      mat-flat-button
+      class="btn custom-button" [class]="effectiveFontClass"
+      [ngClass]="{
+        'size-header': size === 'header' && !fontClass,
+        'size-xs': size === 'xs' && !fontClass,
+        'size-sm': size === 'sm' && !fontClass,
+        'size-base': size === 'base' && !fontClass,
+        'size-l': size === 'l' && !fontClass,
+        'size-xl': size === 'xl' && !fontClass,
+        'mat-raised-button': variant === 'raised',
+        'mat-flat-button': variant === 'flat',
+        'mat-stroked-button': variant === 'stroked',
+        'mat-fab': variant === 'fab',
+        'mat-icon-button': variant === 'icon',
+        'icon-label': true,
+        'blue': category === 'blue',
+        'green': category === 'green',
+        'grey': category === 'grey',
+        'error': category === 'error',
+        'gradient': category === 'gradient',
+        'blue-no-outline': category === 'blue-no-outline',
+        'green-no-outline': category === 'green-no-outline',
+        'grey-no-outline': category === 'grey-no-outline',
+        'error-no-outline': category === 'error-no-outline',
+        'btn-default': state === 'default',
+        'btn-hover': state === 'hover',
+        'btn-pressed': state === 'pressed',
+        'btn-disabled': state === 'disabled',
+        
+      }"
+      [ngStyle]="{ color: color }"
+      [disabled]="state === 'disabled'"
+      (mouseenter)="onHover.emit($event)"
+      (mouseleave)="onMouseLeave.emit($event)"
+      [style.display]="'inline-flex'"
+      [style.align-items]="'center'"
+      [style.gap.px]="computeGap()"
+      [matMenuTriggerFor]="menu"
+    >
+          <!-- Left Icon (optional) -->
+      <mat-icon *ngIf="leftIcon?.trim() as leftIconText"
+                [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
+                class="left-icon">{{ leftIconText }}</mat-icon>
+      <!-- Label -->
+      <span *ngIf="!iconOnly" class="button-label" [ngStyle]="{ color: color }">{{ label || '' }}</span>
+      <!-- Dropdown Arrow Icon -->
+      <mat-icon class="right-icon">arrow_drop_down</mat-icon>
+    </button>
+    <!-- Mat Menu -->
+    <mat-menu #menu="matMenu" panelClass="custom-dropdown-menu">
+      <button mat-menu-item *ngFor="let opt of dropdownOptions" (click)="selectOption(opt)" [ngClass]="effectiveFontClass">
+        {{ opt.label || opt }}
+      </button>
+    </mat-menu>
+  </ng-template>

package/{src/app → projects/allsorter-lib/src/lib}/button/button.component.scss

@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
-@import "../../styles/typography-classes.scss";
-
+@import "../styles/typography-classes.scss";
+ 
 .material-icons-outlined {
   font-family: 'Material Icons Outlined';
   font-weight: normal;
@@ -224,10 +224,10 @@ mat-icon.mat-icon {
 /* Reuse .size-xl for xl */
 
 /* Icon sizes for new naming */
-.size-header .mat-icon { width:20px; height:20px; font-size:20px; }
-.size-xs .mat-icon { width:16px; height:16px; font-size:16px; }
-.size-sm .mat-icon, .size-base .mat-icon { width:16px; height:16px; font-size:16px; }
-.size-l .mat-icon, .size-xl .mat-icon { width:20px; height:20px; font-size:20px; }
+.size-header .mat-icon { font-size:20px; }
+.size-xs .mat-icon { font-size:16px; }
+.size-sm .mat-icon, .size-base .mat-icon { font-size:16px; }
+.size-l .mat-icon, .size-xl .mat-icon { font-size:20px; }
 
 /* Adjust gap for header size */
 .btn.size-header { gap:4px !important; padding: 4px 12px !important;}
@@ -355,19 +355,19 @@ button.icon-circle {
 .size-header.icon-circle .mat-icon { width:10px; height:10px; font-size:10px; }
 
 .size-xs.icon-circle { padding:4px !important; }
-.size-xs.icon-circle .mat-icon { width:12px; height:12px; font-size:12px; }
+.size-xs.icon-circle .mat-icon { font-size:12px; }
 
 .size-sm.icon-circle { padding:8px !important; }
-.size-sm.icon-circle .mat-icon { width:12px; height:12px; font-size:12px; }
+.size-sm.icon-circle .mat-icon { font-size:12px; }
 
 .size-base.icon-circle { padding:10px !important; }
-.size-base.icon-circle .mat-icon { width:14px; height:14px; font-size:14px; }
+.size-base.icon-circle .mat-icon {  font-size:14px; }
 
 .size-l.icon-circle { padding:12px !important; }
-.size-l.icon-circle .mat-icon { width:16px; height:16px; font-size:16px; }
+.size-l.icon-circle .mat-icon { font-size:16px; }
 
 .size-xl.icon-circle { padding:14px !important; }
-.size-xl.icon-circle .mat-icon { width:16px; height:16px; font-size:16px; }
+.size-xl.icon-circle .mat-icon { font-size:16px; }
 
 /* icon-label and two-icon-label just rely on default flex behaviour */
 .icon-xs { 
@@ -459,4 +459,8 @@ button.icon-circle {
 
 ::ng-deep .mat-mdc-menu-item:hover {
   background-color: #f5f5f5 !important;
+}
+
+.mat-mdc-unelevated-button>.mat-icon{
+  line-height:18px !important
 }

package/{src/app → projects/allsorter-lib/src/lib}/button/button.module.ts

@@ -20,4 +20,4 @@ export class ButtonModule {
       'material-symbols-outlined'
     );
   }
-}
+}

package/projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts

@@ -0,0 +1,155 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ButtonComponent } from '../button.component';
+
+type Story = StoryObj<ButtonComponent>;
+
+const meta: Meta<ButtonComponent> = {
+  title: 'Components/Button/Gallery',
+  component: ButtonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    category: {
+      control: 'select',
+      options: [
+        'blue', 'green', 'grey', 'error', 'gradient',
+        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['header', 'xs', 'sm', 'base', 'l', 'xl'],
+    },
+    buttonType: {
+      control: 'select',
+      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],
+    },
+    outlined: { control: 'boolean' },
+    showLeftIcon: { control: 'boolean' },
+    showRightIcon: { control: 'boolean' },
+    leftIcon: { control: 'text' },
+    rightIcon: { control: 'text' },
+    dropdownOptions: { control: 'object' },
+    color: { control: 'text' },
+  },
+  args: {
+    size: 'sm',
+    category: 'blue',
+    outlined: false,
+    buttonType: 'icon-label',
+    label: 'Button text',
+    showLeftIcon: true,
+    showRightIcon: true,
+    leftIcon: 'circle',
+    rightIcon: 'circle',
+    dropdownOptions: [
+      { label: 'Create a merge commit', value: 'merge' },
+      { label: 'Squash and merge', value: 'squash' },
+      { label: 'Rebase and merge', value: 'rebase' },
+    ],
+  },
+  parameters: { controls: { expanded: true } },
+};
+export default meta;
+
+export const Default: Story = {
+  name: 'Default',
+  render: (args: any) => ({
+    props: {
+      ...args,
+      leftIcon: args.showLeftIcon ? args.leftIcon : '',
+      rightIcon: args.showRightIcon ? args.rightIcon : '',
+    },
+    template: `
+      <al-button
+        [category]="category"
+        [buttonType]="buttonType"
+        [label]="label"
+        [leftIcon]="leftIcon"
+        [rightIcon]="rightIcon"
+        [size]="size"
+        [outlined]="outlined"
+        [color]="color"
+        [dropdownOptions]="dropdownOptions"
+      ></al-button>
+    `,
+  }),
+};
+
+export const Variation: Story = {
+  name: 'Variation',
+  args: {
+    category: 'blue',
+    buttonType: 'icon-label',
+    label: 'Button text',
+    leftIcon: 'circle',
+    rightIcon: 'circle',
+    outlined: false,
+    dropdownOptions: [
+      { label: 'Create a merge commit', value: 'merge' },
+      { label: 'Squash and merge', value: 'squash' },
+      { label: 'Rebase and merge', value: 'rebase' },
+    ],
+  },
+  argTypes: {
+    category: {
+      control: 'select',
+      options: [
+        'blue', 'green', 'grey', 'error', 'gradient',
+        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',
+      ],
+    },
+    buttonType: {
+      control: 'select',
+      options: ['icon-label', 'two-icon-label', 'dropdown', 'icon-circle'],
+    },
+  },
+  parameters: {
+    docs: { disable: true }
+  },
+  render: (args: any) => ({
+    props: {
+      ...args,
+      sizes: ['header', 'xs', 'sm', 'base', 'l', 'xl'],
+      circleSizes: ['xs', 'sm', 'base', 'l', 'xl'],
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <div style="font-weight: bold; margin-bottom: 8px;">All Sizes ({{ category }}, {{ buttonType }})</div>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <ng-container *ngFor="let sz of sizes">
+              <al-button
+                [category]="category"
+                [buttonType]="buttonType"
+                [label]="sz === 'header' ? '' : label"
+                [leftIcon]="leftIcon"
+                [rightIcon]="rightIcon"
+                [size]="sz"
+                [outlined]="outlined"
+                [dropdownOptions]="dropdownOptions"
+                style="margin-right: 8px;"
+              ></al-button>
+            </ng-container>
+          </div>
+        </div>
+        <hr />
+        <div>
+          <div style="font-weight: bold; margin-bottom: 8px;">Circular Buttons (icon-circle)</div>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <ng-container *ngFor="let sz of circleSizes">
+              <al-button
+                [category]="category"
+                [buttonType]="'icon-circle'"
+                [leftIcon]="'add'"
+                [size]="sz"
+                [outlined]="outlined"
+                style="margin-right: 8px;"
+              ></al-button>
+            </ng-container>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/{src → projects/allsorter-lib/src/lib/button}/stories/button-playground.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
-import { ButtonComponent } from '../app/button/button.component';
+import { ButtonComponent } from '../button.component';
 
 const meta: Meta<ButtonComponent> = {
   title: 'Components/Button/Playground',
@@ -13,10 +13,7 @@ const meta: Meta<ButtonComponent> = {
         'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',
       ],
     },
-    state: {
-      control: 'select',
-      options: ['default', 'hover', 'pressed', 'disabled'],
-    },
+
     buttonType: {
       control: 'select',
       options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],
@@ -25,8 +22,16 @@ const meta: Meta<ButtonComponent> = {
       control: 'select',
       options: ['header','xs','sm','base','l','xl'],
     },
-    leftIcon: { control: 'text' },
-    rightIcon: { control: 'text' },
+    leftIcon: {
+      control: 'text',
+      if: { arg: 'showLeftIcon', truthy: true },
+      ifDisabled: { arg: 'showLeftIcon', truthy: false },
+    },
+    rightIcon: {
+      control: 'text',
+      if: { arg: 'showRightIcon', truthy: true },
+      ifDisabled: { arg: 'showRightIcon', truthy: false },
+    },
     outlined: { control: 'boolean' },
     iconOnly: { control: 'boolean' },
     showLeftIcon: { control: 'boolean' },
@@ -36,7 +41,6 @@ const meta: Meta<ButtonComponent> = {
   args: {
     size: 'sm',
     category: 'blue',
-    state: 'default',
     outlined: true,
     buttonType: 'icon-label',
     label: 'Button text',

package/projects/allsorter-lib/src/lib/input/input.component.css

@@ -0,0 +1,58 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Material Icons */
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+/* Roboto Font */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+
+/* Angular Material Theme (Indigo Pink) */
+@import url('https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css');
+
+
+
+/* ===== BASE STYLES ===== */
+.al-input-field {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+/* Global background color for all input fields */
+::ng-deep .al-input-field .mat-mdc-form-field-flex,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper,
+::ng-deep .al-input-field .mat-mdc-form-field-infix {
+  background-color: #F7F9FE !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper {
+  background-color: transparent !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay {
+  background-color: #F7F9FE !important;
+}
+
+/* ===== CATEGORY STYLES ===== */
+
+/* Common border width for most categories */
+::ng-deep .al-input-category-primary,
+::ng-deep .al-input-category-success,
+::ng-deep .al-input-category-warn,
+::ng-deep .al-input-category-disabled {
+  --mdc-outlined-text-field-outline-width: 1px !important;
+  --mdc-outlined-text-field-focus-outline-width: 1px !important;
+  --mdc-outlined-text-field-hover-outline-width: 1px !important;
+}
+
+/* Simple category */
+::ng-deep .al-input-category-simple {
+  --mdc-outlined-text-field-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-label-text-color: #5473E8 !important;
+  --mdc-outlined-text-field-focus-label-text-color: #5473E8 !important;
+}
+
+/* Success category */