@3ddv/software-division-components 1.4.1 → 1.4.3

package/src/generic/button/story/button.stories.ts

@@ -0,0 +1,384 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { ButtonComponent } from '../button.component';
+
+const meta: Meta<ButtonComponent> = {
+  title: 'Generic/Button',
+  component: ButtonComponent,
+  id: 'Button',
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['theme-sdc', 'theme-backoffice'],
+      description: 'Theme class to apply to the button component',
+      table: {
+        type: { summary: 'ThemeClass' },
+      },
+    },
+    styleClass: {
+      control: 'select',
+      options: [
+        // Variants
+        'variant-primary',
+        'variant-secondary',
+        'variant-alternative',
+        'variant-success',
+        'variant-warning',
+        'variant-danger',
+        // Sizes
+        'size-sm',
+        'size-md',
+        'size-lg',
+        'size-xl',
+        // Radius
+        'radius-default',
+        'radius-sm',
+        'radius-md',
+        'radius-lg',
+        'radius-xl',
+        'radius-2xl',
+        'radius-full',
+        // Border
+        'border-0',
+        'border-default',
+        'border-2',
+        'border-4',
+        'border-8',
+        // Empty option
+        '',
+      ],
+      description: 'Predefined style class to apply (variant, size, radius, or border)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes to apply to the button',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    debounce: {
+      control: 'number',
+      description: 'Debounce time in milliseconds. When null, no debounce is applied.',
+      table: {
+        type: { summary: 'number | null' },
+      },
+    },
+    ripple: {
+      control: 'boolean',
+      description: 'Whether to enable the ripple effect on the button',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Event emitted when the button is clicked',
+      table: {
+        type: { summary: 'EventEmitter<MouseEvent>' },
+      },
+    },
+    onFocus: {
+      action: 'focused',
+      description: 'Event emitted when the button receives focus',
+      table: {
+        type: { summary: 'EventEmitter<FocusEvent>' },
+      },
+    },
+    onBlur: {
+      action: 'blurred',
+      description: 'Event emitted when the button loses focus',
+      table: {
+        type: { summary: 'EventEmitter<FocusEvent>' },
+      },
+    },
+    isDebounced: {
+      action: 'debounceStateChanged',
+      description:
+        'Event emitted to notify the debounce state. Returns true while the button is debounced, false when not.',
+      table: {
+        type: { summary: 'EventEmitter<boolean>' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ButtonComponent>;
+
+export const Default: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem">
+          <sdc-button [theme]="theme">
+            Default Button
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithDebounce: Story = {
+  args: {
+    theme: 'theme-sdc',
+    debounce: 2000,
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem">
+          <sdc-button 
+            [theme]="theme" 
+            [debounce]="debounce"
+            (onClick)="onClick($event)"
+            (isDebounced)="isDebounced($event)">
+            Click with 2s Debounce
+          </sdc-button>
+        </div>
+      </div>    
+    `,
+  }),
+};
+
+export const Circle: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div class="space-y-4">
+        <div class="flex items-center gap-4">
+          <sdc-button [theme]="theme" [styleClass]="['size-circle-sm']">
+            👤
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['size-circle-md']">
+            👤
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['size-circle-lg']">
+            👤
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['size-circle-xl']">
+            👤
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const RippleEffect: Story = {
+  args: {
+    theme: 'theme-sdc',
+    ripple: true,
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <p class="text-sm text-gray-600">Click the button below to see the ripple effect:</p>
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem">
+          <sdc-button [theme]="theme" [ripple]="ripple" [styleClass]="['variant-primary', 'size-md']">
+            Small Primary
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const AllVariants: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem">
+          <sdc-button [theme]="theme" [styleClass]="['variant-primary']">
+            Primary
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-secondary']">
+            Secondary
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-alternative']">
+            Alternative
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-success']">
+            Success
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-warning']">
+            Warning
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-destructive']">
+            Danger
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-outline']">
+            Outline
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-link']">
+            Link
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const AllSizes: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+     <div style="margin: 0.5rem 0">
+        <div style="width: 33%; display: flex; flex-direction: column; gap: 1rem">
+          <sdc-button [theme]="theme" [styleClass]="['size-sm']">
+            Small
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['size-md']">
+            Medium
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['size-lg']">
+            Large
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['size-xl']">
+            Extra Large
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const AllRadius: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="width: 33%; display: flex; flex-direction: column; gap: 1rem">
+          <sdc-button [theme]="theme" [styleClass]="['radius-default']">
+            Default Radius
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['radius-sm']">
+            Small Radius
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['radius-md']">
+            Medium Radius
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['radius-lg']">
+            Large Radius
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['radius-xl']">
+            Extra Large Radius
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['radius-2xl']">
+            2XL Radius
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['radius-full']">
+            Full Radius
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const AllBorders: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="width: 33%; display: flex; flex-direction: column; gap: 1rem">
+          <sdc-button [theme]="theme" [styleClass]="['border-0']">
+            No Border
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['border-default']">
+            Default Border
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['border-2']">
+            Border 2px
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['border-4']">
+            Border 4px
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['border-8']">
+            Border 8px
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    theme: 'theme-sdc',
+    disabled: true,
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem">
+          <sdc-button 
+            [theme]="theme" 
+            [disabled]="disabled">
+            Disabled Button
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const StyleClassCombinations: Story = {
+  args: {
+    theme: 'theme-sdc',
+  },
+  render: args => ({
+    props: args,
+    template: `
+      <div style="margin: 0.5rem 0">
+        <div style="width: 33%; display: flex; flex-direction: column; gap: 1rem">
+          <sdc-button [theme]="theme" [styleClass]="['variant-success', 'size-lg']">
+            Large Success
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-warning', 'size-sm']">
+            Small Warning
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-destructive', 'size-lg', 'radius-full']">
+            Large Danger Rounded
+          </sdc-button>
+          <sdc-button [theme]="theme" [styleClass]="['variant-alternative', 'size-sm', 'border-4']">
+            Small Alternative Thick Border
+          </sdc-button>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/generic/button/ui/ui-button-helm/src/index.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { HlmButton } from './lib/hlm-button';
+export * from './lib/hlm-button';
+export * from './lib/hlm-button.token';
+
+@NgModule({
+	imports: [HlmButton],
+	exports: [HlmButton],
+})
+export class HlmButtonModule {}

package/src/generic/button/ui/ui-button-helm/src/lib/hlm-button.token.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, ValueProvider, inject } from '@angular/core';
+import type { ButtonVariants } from './hlm-button';
+
+export interface BrnButtonConfig {
+	variant: ButtonVariants['variant'];
+	size: ButtonVariants['size'];
+}
+
+const defaultConfig: BrnButtonConfig = {
+	variant: 'default',
+	size: 'default',
+};
+
+const BrnButtonConfigToken = new InjectionToken<BrnButtonConfig>('BrnButtonConfig');
+
+export function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider {
+	return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectBrnButtonConfig(): BrnButtonConfig {
+	return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/generic/button/ui/ui-button-helm/src/lib/hlm-button.ts

@@ -0,0 +1,62 @@
+import { Directive, computed, input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectBrnButtonConfig } from './hlm-button.token';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none shrink-0 [&_ng-icon]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-default',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'border bg-background shadow-xs dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>ng-icon]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>ng-icon]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>ng-icon]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+  selector: '[hlmBtn]',
+  standalone: true,
+  exportAs: 'hlmBtn',
+  host: {
+    '[class]': '_computedClass()',
+  },
+})
+export class HlmButton {
+  private readonly _config = injectBrnButtonConfig();
+
+  private readonly _additionalClasses = signal<ClassValue>('');
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+  protected readonly _computedClass = computed(() =>
+    hlm(buttonVariants({ variant: this.variant(), size: this.size() }), this.userClass(), this._additionalClasses())
+  );
+
+  public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
+
+  public readonly size = input<ButtonVariants['size']>(this._config.size);
+
+  setClass(classes: string): void {
+    this._additionalClasses.set(classes);
+  }
+}

package/src/generic/carousel/carousel-item.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'sdc-carousel-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+})
+export class CarouselItemComponent {
+  @ViewChild('content', { static: true }) template!: TemplateRef<void>;
+}

package/src/generic/carousel/carousel-item.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+export interface CarouselItemContext<T> {
+  $implicit: T;
+  index: number;
+}
+
+@Directive({
+  standalone: true,
+  selector: '[sdcCarouselItem]',
+})
+export class CarouselItemDirective<T> {
+  constructor(public template: TemplateRef<CarouselItemContext<T>>) {}
+}

package/src/generic/carousel/carousel.component.css

@@ -0,0 +1,90 @@
+:host {
+  --carousel-gap: 16px;
+  --carousel-arrow-color: var(--color-alternative, #f45f10);
+  --carousel-arrow-size: 2.5rem;
+  --carousel-arrow-icon-size: 1.5rem;
+  display: block;
+}
+
+.sdc-carousel {
+  --sdc-carousel-max-width: 100%;
+  display: block;
+  position: relative;
+  width: 100%;
+  max-width: var(--sdc-carousel-max-width);
+}
+
+.sdc-carousel-content {
+  justify-content: flex-start;
+  gap: var(--carousel-gap);
+}
+
+.sdc-carousel-item {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+/* Navigation arrow buttons */
+.sdc-carousel :global(button[hlm-carousel-previous]),
+.sdc-carousel :global(button[hlm-carousel-next]) {
+  width: var(--carousel-arrow-size);
+  height: var(--carousel-arrow-size);
+  background-color: transparent;
+  border: none;
+  color: var(--carousel-arrow-color);
+  cursor: pointer;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+/* Override hlm positioning - place arrows at the padding edges */
+.sdc-carousel :global(button[hlm-carousel-previous]) {
+  left: 0;
+  right: auto;
+}
+
+.sdc-carousel :global(button[hlm-carousel-next]) {
+  right: 0;
+  left: auto;
+}
+
+.sdc-carousel :global(button[hlm-carousel-previous]:hover),
+.sdc-carousel :global(button[hlm-carousel-next]:hover) {
+  opacity: 0.8;
+  transform: translateY(-50%) scale(1.1);
+}
+
+.sdc-carousel :global(button[hlm-carousel-previous]:disabled),
+.sdc-carousel :global(button[hlm-carousel-next]:disabled) {
+  opacity: 0.3;
+  cursor: not-allowed;
+  color: var(--color-alternative, #f45f10);
+  background-color: transparent;
+}
+
+.sdc-carousel :global(button[hlm-carousel-previous]:disabled:hover),
+.sdc-carousel :global(button[hlm-carousel-next]:disabled:hover) {
+  transform: translateY(-50%);
+}
+
+.sdc-carousel :global(button[hlm-carousel-previous] ng-icon),
+.sdc-carousel :global(button[hlm-carousel-next] ng-icon) {
+  width: var(--carousel-arrow-icon-size);
+  height: var(--carousel-arrow-icon-size);
+}
+
+/* Responsive arrow sizes */
+@media (width >= 768px) {
+  :host {
+    --carousel-arrow-size: 3rem;
+    --carousel-arrow-icon-size: 1.75rem;
+  }
+}
+
+@media (width >= 1024px) {
+  :host {
+    --carousel-arrow-size: 3.5rem;
+    --carousel-arrow-icon-size: 2rem;
+  }
+}

package/src/generic/carousel/carousel.component.html

@@ -0,0 +1,13 @@
+<hlm-carousel class="sdc-carousel" [options]="emblaOptions()">
+  <hlm-carousel-content class="pl-1 sdc-carousel-content">
+    @for (item of carouselItems(); track $index) {
+      <hlm-carousel-item class="-ml-1 sdc-carousel-item">
+        <ng-container *ngTemplateOutlet="item.template"></ng-container>
+      </hlm-carousel-item>
+    }
+  </hlm-carousel-content>
+  @if (canScroll()) {
+    <button class="bg-transparent text-primary" hlm-carousel-previous></button>
+    <button class="bg-transparent text-primary" hlm-carousel-next></button>
+  }
+</hlm-carousel>

package/src/generic/carousel/carousel.component.ts

@@ -0,0 +1,44 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, contentChildren, input, viewChild } from '@angular/core';
+import { CarouselItemComponent } from './carousel-item.component';
+import {
+  HlmCarousel,
+  HlmCarouselContent,
+  HlmCarouselItem,
+  HlmCarouselNext,
+  HlmCarouselPrevious,
+} from './ui/ui-carousel-helm/src';
+
+@Component({
+  standalone: true,
+  selector: 'sdc-carousel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet, HlmCarousel, HlmCarouselContent, HlmCarouselItem, HlmCarouselNext, HlmCarouselPrevious],
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css'],
+  host: {
+    '[style.--carousel-gap.px]': 'gap()',
+  },
+})
+export class CarouselComponent {
+  public carouselItems = contentChildren(CarouselItemComponent);
+
+  /** Reference to the underlying HlmCarousel */
+  protected hlmCarousel = viewChild(HlmCarousel);
+
+  /** Gap between slides in pixels */
+  public gap = input<number>(16);
+
+  /** Computed Embla options based on inputs */
+  protected emblaOptions = computed(() => ({
+    align: 'start' as const,
+    containScroll: 'trimSnaps' as const,
+  }));
+
+  /** Whether scrolling is possible (show navigation only when true) */
+  protected canScroll = computed(() => {
+    const carousel = this.hlmCarousel();
+    if (!carousel) return false;
+    return carousel.canScrollPrev() || carousel.canScrollNext();
+  });
+}

package/src/generic/carousel/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/generic/carousel/public-api.ts

@@ -0,0 +1,2 @@
+export { CarouselItemComponent } from './carousel-item.component';
+export { CarouselComponent } from './carousel.component';