@3ddv/software-division-components 2.0.0 → 2.0.2

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

@@ -1,384 +0,0 @@
-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/generic/button/ui/ui-button-helm/src/index.ts

@@ -1,10 +0,0 @@
-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/generic/button/ui/ui-button-helm/src/lib/hlm-button.token.ts

@@ -1,22 +0,0 @@
-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/generic/button/ui/ui-button-helm/src/lib/hlm-button.ts

@@ -1,62 +0,0 @@
-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/generic/carousel/carousel-item.component.ts

@@ -1,15 +0,0 @@
-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/generic/carousel/carousel-item.directive.ts

@@ -1,14 +0,0 @@
-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/generic/carousel/carousel.component.css

@@ -1,90 +0,0 @@
-: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/generic/carousel/carousel.component.html

@@ -1,13 +0,0 @@
-<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/generic/carousel/carousel.component.ts

@@ -1,44 +0,0 @@
-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/generic/carousel/index.ts

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

package/generic/carousel/public-api.ts

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