Enhance UI components with new input control directive and styling.

- ✨ **Feature**: Added InputControlDirective for better input handling
- 🎨 **Style**: Updated button and text-field styles for loading states
- 🛠️ **Refactor**: Improved button component structure and disabled state handling
- 📚 **Docs**: Updated code style guidelines with new control flow syntax

apps/isa-app/stories/ui/buttons/ui-button.stories.ts

@@ -1,7 +1,5 @@
 import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
 import { ButtonColor, ButtonSize, ButtonComponent } from '@isa/ui/buttons';
-// import { within } from '@storybook/testing-library';
-// import { expect } from '@storybook/jest';
 
 type UiButtonComponentInputs = {
   color: ButtonColor;
@@ -15,23 +13,33 @@ const meta: Meta<UiButtonComponentInputs> = {
   title: 'ui/buttons/Button',
   argTypes: {
     color: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['primary', 'secondary', 'brand', 'tertiary'] as ButtonColor[],
+      description: 'Determines the button color',
     },
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['small', 'medium', 'large'] as ButtonSize[],
+      description: 'Determines the button size',
     },
     pending: {
       control: 'boolean',
+      description: 'Show a pending/loading state when true',
     },
     disabled: {
       control: 'boolean',
+      description: 'Disables the button when true',
     },
   },
+  args: {
+    color: 'primary',
+    size: 'medium',
+    pending: false,
+    disabled: false,
+  },
   render: (args) => ({
     props: args,
-    template: `<ui-button ${argsToTemplate(args, { exclude: ['disabled'] })} ${args.disabled ? 'disabled' : ''}>Button</ui-button>`,
+    template: `<button uiButton ${argsToTemplate(args)}>Button</button>`,
   }),
 };
 export default meta;

apps/isa-app/stories/ui/buttons/ui-icon-button.stories.ts

@@ -1,7 +1,5 @@
 import { argsToTemplate, type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 import { IconButtonColor, IconButtonSize, IconButtonComponent } from '@isa/ui/buttons';
-// import { within } from '@storybook/testing-library';
-// import { expect } from '@storybook/jest';
 import { IsaIcons } from '@isa/icons';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 
@@ -23,30 +21,42 @@ const meta: Meta<UiIconButtonComponentInputs> = {
   ],
   title: 'ui/buttons/IconButton',
   argTypes: {
-    icon: { control: 'select', options: Object.keys(IsaIcons) },
+    icon: {
+      control: { type: 'select' },
+      options: Object.keys(IsaIcons),
+      description: 'Icon name for the button',
+    },
     color: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['brand', 'primary', 'secondary', 'tertiary'] as IconButtonColor[],
+      description: 'Color style of the button',
     },
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['small', 'medium'] as IconButtonSize[],
+      description: 'Size of the icon button',
     },
     pending: {
       control: 'boolean',
+      description: 'Show a pending state when true',
     },
     disabled: {
       control: 'boolean',
+      description: 'Disable the button when true',
     },
   },
   args: {
     icon: 'isaActionCheck',
+    color: 'primary',
+    size: 'medium',
+    pending: false,
+    disabled: false,
   },
   render: (args) => ({
     props: args,
-    template: `<ui-icon-button ${argsToTemplate(args, { exclude: ['disabled', 'icon'] })} ${args.disabled ? 'disabled' : ''}>
+    template: `<button uiIconButton ${argsToTemplate(args, { exclude: ['icon'] })} >
         <ng-icon name="${args.icon}"></ng-icon>
-    </ui-icon-button>`,
+    </button>`,
   }),
 };
 export default meta;

apps/isa-app/stories/ui/buttons/ui-info-button.stories.ts

@@ -19,21 +19,37 @@ const meta: Meta<InfoButtonComponentInputs> = {
     }),
   ],
   title: 'ui/buttons/InfoButton',
-  args: {},
+  args: {
+    icon: 'isaNavigationLogout',
+    label: 'STA',
+    disabled: false,
+    pending: false,
+  },
   argTypes: {
-    icon: { control: 'select', options: Object.keys(IsaIcons) },
-    label: { control: 'text' },
-    disabled: { control: 'boolean' },
+    icon: {
+      control: { type: 'select' },
+      options: Object.keys(IsaIcons),
+      description: 'Icon to display on the button',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text inside the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the button when true',
+    },
     pending: {
       control: 'boolean',
+      description: 'Shows a pending state when true',
     },
   },
   render: (args) => ({
     props: args,
-    template: `<ui-info-button ${argsToTemplate(args, { exclude: ['disabled', 'icon'] })} ${args.disabled ? 'disabled' : ''}>
+    template: `<button uiInfoButton ${argsToTemplate(args, { exclude: ['icon'] })} >
         <span uiInfoButtonLabel>${args.label}</span>
         <ng-icon name="${args.icon}" uiInfoButtonIcon></ng-icon>
-    </ui-info-button>`,
+    </button>`,
   }),
 };
 

apps/isa-app/stories/ui/buttons/ui-text-button.stories.ts

@@ -1,35 +1,48 @@
 import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
 import { TextButtonComponent, TextButtonColor, TextButtonSize } from '@isa/ui/buttons';
-// import { within } from '@storybook/testing-library';
-// import { expect } from '@storybook/jest';
 
-type UiTextButtonComponentInputs = {
+export type UiTextButtonComponentInputs = {
   color: TextButtonColor;
   size: TextButtonSize;
   disabled: boolean;
+  pending: boolean;
 };
 
 const meta: Meta<UiTextButtonComponentInputs> = {
-  component: TextButtonComponent,
   title: 'ui/buttons/TextButton',
+  component: TextButtonComponent,
   argTypes: {
     color: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['strong', 'subtle'] as TextButtonColor[],
+      description: 'Color variation for the text button',
     },
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['small', 'medium', 'large'] as TextButtonSize[],
+      description: 'Size of the text button',
     },
     disabled: {
       control: 'boolean',
+      description: 'Disables the button when true',
     },
+    pending: {
+      control: 'boolean',
+      description: 'Displays a loading state when true',
+    },
+  },
+  args: {
+    color: 'subtle',
+    size: 'medium',
+    disabled: false,
+    pending: false,
   },
   render: (args) => ({
     props: args,
-    template: `<ui-text-button ${argsToTemplate(args, { exclude: ['disabled'] })} ${args.disabled ? 'disabled' : ''}>Button</ui-text-button>`,
+    template: `<button uiTextButton ${argsToTemplate(args)}>Button</button>`,
   }),
 };
+
 export default meta;
 
 type Story = StoryObj<TextButtonComponent>;
@@ -38,14 +51,6 @@ export const Default: Story = {
   args: {},
 };
 
-// export const Heading: Story = {
-//   args: {},
-//   play: async ({ canvasElement }) => {
-//     const canvas = within(canvasElement);
-//     expect(canvas.getByText(/ui-button works!/gi)).toBeTruthy();
-//   },
-// };
-
 export const StrongSmall: Story = {
   args: {
     color: 'strong',