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

package/src/generic/braintree/braintree.component.css

@@ -0,0 +1,7 @@
+/* USE DESIGN TOKENS */
+
+:root {
+  --p-button-primary-color: white !important;
+  --p-button-primary-contrast-color: white !important;
+  --p-button-primary-hover-color: white !important;
+}

package/src/generic/braintree/braintree.component.ts

@@ -0,0 +1,134 @@
+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/src/generic/braintree/index.ts

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

package/src/generic/braintree/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

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

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

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

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

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

@@ -0,0 +1,27 @@
+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/src/generic/braintree/types.ts

@@ -0,0 +1,28 @@
+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/src/generic/button/button.component.css

@@ -0,0 +1,295 @@
+/* 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-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/src/generic/button/button.component.html

@@ -0,0 +1,10 @@
+<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>