Merge branch 'develop' of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend into develop

apps/isa-app/src/tailwind.scss

@@ -20,6 +20,7 @@
   @import "../../../libs/ui/skeleton-loader/src/skeleton-loader.scss";
   @import "../../../libs/ui/tooltip/src/tooltip.scss";
   @import "../../../libs/ui/label/src/label.scss";
+  @import "../../../libs/ui/switch/src/switch.scss";
 
   .input-control {
     @apply rounded border border-solid border-[#AEB7C1] px-4 py-[1.125rem] outline-none;

apps/isa-app/stories/ui/switch/ui-icon-switch.stories.ts

@@ -0,0 +1,104 @@
+import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
+import { IconSwitchComponent, IconSwitchColor } from '@isa/ui/switch';
+import { provideIcons } from '@ng-icons/core';
+import { isaFiliale, IsaIcons, isaNavigationDashboard } from '@isa/icons';
+
+type IconSwitchComponentInputs = {
+  icon: string;
+  checked: boolean;
+  color: IconSwitchColor;
+  disabled: boolean;
+};
+
+const meta: Meta<IconSwitchComponentInputs> = {
+  component: IconSwitchComponent,
+  title: 'ui/switch/IconSwitch',
+  decorators: [
+    (story) => ({
+      ...story(),
+      applicationConfig: {
+        providers: [provideIcons(IsaIcons)],
+      },
+    }),
+  ],
+  argTypes: {
+    icon: {
+      control: { type: 'select' },
+      options: Object.keys(IsaIcons),
+      description: 'The name of the icon to display in the switch',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether the switch is checked (on) or not (off)',
+    },
+    color: {
+      control: { type: 'select' },
+      options: Object.values(IconSwitchColor),
+      description: 'Determines the switch color theme',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the switch when true',
+    },
+  },
+  args: {
+    icon: 'isaFiliale',
+    checked: false,
+    color: 'primary',
+    disabled: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ui-icon-switch ${argsToTemplate(args)}></ui-icon-switch>`,
+  }),
+};
+export default meta;
+
+type Story = StoryObj<IconSwitchComponent>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Enabled: Story = {
+  args: {
+    checked: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The switch in its enabled/checked state with the primary color theme.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The switch in a disabled state. User interactions are prevented.',
+      },
+    },
+  },
+};
+
+export const EnabledAndDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The switch in both enabled and disabled states simultaneously.',
+      },
+    },
+  },
+};