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

package/generic/braintree/braintree.component.ts

@@ -1,134 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  effect,
-  ElementRef,
-  input,
-  OnDestroy,
-  output,
-  viewChild,
-} from '@angular/core';
-import { BraintreePayload } from './types';
-
-declare let braintree: any;
-
-/**
- * Braintree Drop‑in component that auto‑wires clicks
- * on the first projected element and errors if more than one.
- * Recreates the drop‑in UI whenever isDigitalWalletPayment changes,
- * ensuring the container is empty before initialization.
- */
-@Component({
-  standalone: true,
-  selector: 'sdc-braintree',
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div #braintreeContainer id="braintree-container"></div>
-    <ng-content></ng-content>
-  `,
-})
-export class BraintreeComponent implements OnDestroy {
-  /** Braintree element reference */
-  public braintreeContainer = viewChild('braintreeContainer', { read: ElementRef<HTMLElement> });
-
-  /** Braintree client token input */
-  public readonly token = input.required<string>();
-
-  /** Toggle to require cardholder name */
-  public readonly isDigitalWalletPayment = input<boolean>(false);
-
-  /** Emits when a payment payload is ready */
-  public readonly onSubmit = output<BraintreePayload>();
-
-  /** Holds the Drop‑in instance */
-  private dropinInstance: any;
-
-  constructor(private readonly elRef: ElementRef) {
-    // Re-initialize drop‑in UI on config change
-    effect(() => {
-      const requireName = this.isDigitalWalletPayment();
-      this.teardownDropin();
-      this.initializeDropin(requireName);
-    });
-
-    // Attach click handler to the single projected element
-    effect(onCleanup => {
-      const projectedEls = Array.from((this.elRef.nativeElement as HTMLElement).children).filter(
-        el => el.id !== 'braintree-container'
-      );
-      if (projectedEls.length > 1) {
-        throw new Error(`sdc-braintree: only one projected element allowed, found ${projectedEls.length}`);
-      }
-      if (projectedEls.length === 1) {
-        const btn = projectedEls[0] as HTMLElement;
-        const handler = () => this.requestPayment();
-        btn.addEventListener('click', handler);
-        onCleanup(() => btn.removeEventListener('click', handler));
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.teardownDropin();
-  }
-
-  /** Clears previous drop-in UI and recreates it */
-  private initializeDropin(requireName: boolean): void {
-    if (this.dropinInstance) return;
-    const container = this.braintreeContainer()?.nativeElement as HTMLElement;
-
-    if (!container) {
-      console.error('sdc-braintree: missing container element');
-      return;
-    }
-
-    const cardOptions = requireName
-      ? {
-          card: { cardholderName: { required: requireName } },
-          number: { supportedCardBrand: ['visa', 'mastercard', 'diners-club', 'discover', 'american-express'] },
-        }
-      : undefined;
-
-    setTimeout(() => {
-      braintree.dropin.create(
-        {
-          authorization: this.token(),
-          container: container,
-          ...cardOptions,
-        },
-        (err: any, instance: any) => {
-          if (err) {
-            console.error('Braintree init error:', err);
-            return;
-          }
-          this.dropinInstance = instance;
-        }
-      );
-    }, 0);
-  }
-
-  /** Requests payment method and emits payload */
-  private requestPayment(): void {
-    if (!this.dropinInstance) {
-      console.warn('sdc-braintree: drop‑in not ready');
-      return;
-    }
-    this.dropinInstance.requestPaymentMethod((err: any, payload: BraintreePayload) => {
-      if (err) {
-        console.error('sdc-braintree payment error:', err);
-        return;
-      }
-      this.onSubmit.emit(payload);
-    });
-  }
-
-  /** Tears down the drop-in instance if present */
-  private teardownDropin(): void {
-    if (this.dropinInstance?.teardown) {
-      this.dropinInstance.teardown();
-    }
-    this.dropinInstance = null;
-  }
-}

package/generic/braintree/index.ts

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

package/generic/braintree/ng-package.json

@@ -1 +0,0 @@
-{ "lib": { "entryFile": "public-api.ts" } }

package/generic/braintree/public-api.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of software-division-components
- */
-
-export * from './braintree.component';
-export * from './types';

package/generic/braintree/story/braintree.stories.css

@@ -1,3 +0,0 @@
-.tooltip-padding {
-  background-color: red;
-}

package/generic/braintree/story/braintree.stories.ts

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { BraintreeComponent } from '../braintree.component';
-
-const meta: Meta<BraintreeComponent> = {
-  title: 'Generic/Braintree',
-  component: BraintreeComponent,
-  id: 'Braintree',
-  argTypes: {
-    token: {
-      control: 'text',
-      description: 'Token to enable Braintree',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<BraintreeComponent>;
-
-export const Default: Story = {
-  args: {
-    token: '123',
-  },
-};

package/generic/braintree/types.ts

@@ -1,28 +0,0 @@
-export interface BraintreePayload {
-  type: string;
-  nonce: string;
-  description: string;
-  details: BraintreeDetails;
-  binData: BraintreeBinData;
-}
-
-export interface BraintreeDetails {
-  bin: string;
-  lastTwo: string;
-  lastFour: string;
-  cardType: string;
-  expirationYear: string;
-  expirationMonth: string;
-}
-
-export interface BraintreeBinData {
-  debit: string;
-  prepaid: string;
-  payroll: string;
-  productId: string;
-  commercial: string;
-  healthcare: string;
-  issuingBank: string;
-  durbinRegulated: string;
-  countryOfIssuance: string;
-}

package/generic/button/button.component.css

@@ -1,305 +0,0 @@
-/* Base styles*/
-.sdc-button {
-  --sdc-button-ripple-color: var(--color-neutral-300);
-  --sdc-button-text-color: var(--color-pure-white);
-  --sdc-button-text-size: var(--text-base);
-  --sdc-button-text-weight: var(--font-medium);
-  --sdc-button-background: var(--color-primary);
-  --sdc-button-padding: var(--space-2) var(--space-7);
-  --sdc-button-border-color: var(--color-primary);
-  --sdc-button-border-radius: var(--radius-full);
-  --sdc-button-border-width: var(--border-0);
-  --sdc-button-height: 100%;
-  --sdc-button-width: 100%;
-
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-
-  color: var(--sdc-button-text-color);
-  font-size: var(--sdc-button-text-size);
-  font-weight: var(--sdc-button-text-weight);
-  background: var(--sdc-button-background);
-  padding: var(--sdc-button-padding);
-  border-color: var(--sdc-button-border-color);
-  border-radius: var(--sdc-button-border-radius);
-  border-width: var(--sdc-button-border-width);
-  height: var(--sdc-button-height);
-  width: var(--sdc-button-width);
-}
-
-/* Debounce styles */
-.sdc-button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.6;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.sdc-button:not([disabled]) {
-  transition: all 0.2s ease-in-out;
-}
-
-/* Hover and focus states */
-.sdc-button:not([disabled]):hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.sdc-button:not([disabled]):focus {
-  outline: none;
-}
-
-/* Active state */
-.sdc-button:not([disabled]):active {
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Variants */
-.sdc-button.variant-primary {
-  --sdc-button-background: var(--color-primary);
-  --sdc-button-border-color: var(--color-primary);
-}
-
-.sdc-button.variant-primary-light {
-  --sdc-button-background: color-mix(in srgb, var(--color-primary) 15%, white);
-  --sdc-button-border-color: var(--color-outline);
-  --sdc-button-text-color: var(--color-primary);
-}
-
-.sdc-button.variant-secondary {
-  --sdc-button-background: var(--color-secondary);
-  --sdc-button-border-color: var(--color-secondary);
-  --sdc-button-text-color: var(--color-primary);
-}
-
-.sdc-button.variant-alternative {
-  --sdc-button-background: var(--color-alternative);
-  --sdc-button-border-color: var(--color-alternative);
-}
-
-.sdc-button.variant-alternative-light {
-  --sdc-button-background: color-mix(in srgb, var(--color-alternative) 15%, white);
-  --sdc-button-border-color: var(--color-alternative);
-  --sdc-button-text-color: var(--color-primary);
-}
-
-.sdc-button.variant-accent {
-  --sdc-button-background: var(--color-accent);
-  --sdc-button-border-color: var(--color-accent);
-}
-
-.sdc-button.variant-accent-light {
-  --sdc-button-background: color-mix(in srgb, var(--color-accent) 15%, white);
-  --sdc-button-border-color: var(--color-accent);
-  --sdc-button-text-color: var(--color-primary);
-}
-
-.sdc-button.variant-success {
-  --sdc-button-background: var(--color-success);
-  --sdc-button-border-color: var(--color-success);
-}
-
-.sdc-button.variant-warning {
-  --sdc-button-background: var(--color-warning);
-  --sdc-button-border-color: var(--color-warning);
-}
-
-.sdc-button.variant-danger {
-  --sdc-button-background: var(--color-danger);
-  --sdc-button-border-color: var(--color-danger);
-}
-
-.sdc-button.variant-outline {
-  --sdc-button-background: transparent;
-  --sdc-button-border-width: var(--border-default);
-  --sdc-button-border-color: var(--color-primary);
-  --sdc-button-text-color: var(--color-neutral-700);
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.sdc-button.variant-outline-accent {
-  --sdc-button-background: transparent;
-  --sdc-button-border-width: var(--border-default);
-  --sdc-button-border-color: var(--color-accent);
-  --sdc-button-text-color: var(--color-accent);
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.sdc-button.variant-outline-alternative {
-  --sdc-button-background: transparent;
-  --sdc-button-border-width: var(--border-default);
-  --sdc-button-border-color: var(--color-alternative);
-  --sdc-button-text-color: var(--color-alternative);
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.sdc-button.variant-outline-white {
-  --sdc-button-background: transparent;
-  --sdc-button-border-width: var(--border-default);
-  --sdc-button-border-color: white;
-  --sdc-button-text-color: white;
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.sdc-button.variant-link {
-  --sdc-button-background: transparent;
-  --sdc-button-border-color: transparent;
-  --sdc-button-text-color: var(--color-neutral-700);
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-.sdc-button.variant-success-light {
-  --sdc-button-background: color-mix(in srgb, var(--color-success) 15%, white);
-  --sdc-button-border-color: var(--color-success);
-  --sdc-button-text-color: var(--color-success);
-}
-
-.sdc-button.variant-warning-light {
-  --sdc-button-background: color-mix(in srgb, var(--color-warning) 15%, white);
-  --sdc-button-border-color: var(--color-warning);
-  --sdc-button-text-color: var(--color-warning);
-}
-
-.sdc-button.variant-destructive-light {
-  --sdc-button-background: color-mix(in srgb, var(--color-danger) 20%, white);
-  --sdc-button-border-color: var(--color-danger);
-  --sdc-button-text-color: var(--color-danger);
-}
-
-/* Sizes */
-.sdc-button.size-xxs,
-.sdc-button.size-xs {
-  --sdc-button-padding: var(--space-1) var(--space-2_5);
-  --sdc-button-text-size: var(--text-xs);
-  --sdc-button-text-weight: var(--font-regular);
-}
-
-.sdc-button.size-sm {
-  --sdc-button-padding: var(--space-1) var(--space-4);
-  --sdc-button-text-size: var(--text-sm);
-  --sdc-button-text-weight: var(--font-semibold);
-}
-
-.sdc-button.size-md {
-  --sdc-button-padding: var(--space-1_5) var(--space-7);
-  --sdc-button-text-size: var(--text-sm);
-  --sdc-button-text-weight: var(--font-semibold);
-}
-
-.sdc-button.size-lg,
-.sdc-button.size-xl,
-.sdc-button.size-2xl {
-  --sdc-button-padding: var(--space-2) var(--space-8);
-  --sdc-button-text-size: var(--text-lg);
-  --sdc-button-text-weight: var(--font-semibold);
-}
-
-/* Circle size */
-.sdc-button.size-circle-sm {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --sdc-button-padding: 0;
-  --sdc-button-height: var(--space-6);
-  --sdc-button-width: var(--space-6);
-  --sdc-button-text-size: var(--text-sm);
-  --sdc-button-text-weight: var(--font-medium);
-}
-
-.sdc-button.size-circle-md {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --sdc-button-padding: 0;
-  --sdc-button-height: var(--space-8);
-  --sdc-button-width: var(--space-8);
-  --sdc-button-text-size: var(--text-base);
-  --sdc-button-text-weight: var(--font-medium);
-}
-
-.sdc-button.size-circle-lg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --sdc-button-padding: 0;
-  --sdc-button-height: var(--space-10);
-  --sdc-button-width: var(--space-10);
-  --sdc-button-text-size: var(--text-xl);
-  --sdc-button-text-weight: var(--font-medium);
-}
-
-.sdc-button.size-circle-xl {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --sdc-button-padding: 0;
-  --sdc-button-height: var(--space-12);
-  --sdc-button-width: var(--space-12);
-  --sdc-button-text-size: var(--text-2xl);
-  --sdc-button-text-weight: var(--font-medium);
-}
-
-/* Radius */
-.sdc-button.radius-default {
-  --sdc-button-border-radius: var(--radius-default);
-}
-
-.sdc-button.radius-sm {
-  --sdc-button-border-radius: var(--radius-sm);
-}
-
-.sdc-button.radius-md {
-  --sdc-button-border-radius: var(--radius-md);
-}
-
-.sdc-button.radius-lg {
-  --sdc-button-border-radius: var(--radius-lg);
-}
-
-.sdc-button.radius-xl {
-  --sdc-button-border-radius: var(--radius-xl);
-}
-
-.sdc-button.radius-2xl {
-  --sdc-button-border-radius: var(--radius-2xl);
-}
-
-.sdc-button.radius-full {
-  --sdc-button-border-radius: var(--radius-full);
-}
-
-/* Border */
-.sdc-button.border-0 {
-  --sdc-button-border-width: var(--border-0);
-}
-
-.sdc-button.border-default {
-  --sdc-button-border-width: var(--border-default);
-}
-
-.sdc-button.border-2 {
-  --sdc-button-border-width: var(--border-2);
-}
-
-.sdc-button.border-4 {
-  --sdc-button-border-width: var(--border-4);
-}
-
-.sdc-button.border-8 {
-  --sdc-button-border-width: var(--border-8);
-}

package/generic/button/button.component.html

@@ -1,10 +0,0 @@
-<button
-  hlmBtn
-  [class]="computedClass()"
-  [disabled]="disabled() || debounceState()"
-  (click)="handleClick($event); createRipple($event)"
-  (focus)="handleFocus($event)"
-  (blur)="handleBlur($event)"
-  [type]="type()">
-  <ng-content></ng-content>
-</button>