@salas-ds/cli 0.1.0 → 0.2.1

package/templates/angular/checkbox/checkbox.component.ts

@@ -0,0 +1,172 @@
+import { Component, EventEmitter, forwardRef, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../utils';
+
+export type CheckboxState = boolean | 'indeterminate';
+
+export interface CheckboxProps {
+  checked?: CheckboxState;
+  disabled?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-checkbox',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'checkboxClasses',
+    '[attr.role]': '"checkbox"',
+    '[attr.aria-checked]': 'ariaChecked',
+    '[attr.aria-disabled]': 'disabled || null',
+    '[attr.tabindex]': 'disabled ? -1 : 0',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SalasCheckboxComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    @if (indeterminate) {
+      <svg class="salas-checkbox-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M5 12h14" />
+      </svg>
+    } @else if (checked === true) {
+      <svg class="salas-checkbox-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    }
+  `,
+  styles: [`
+    salas-checkbox {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 0.25rem;
+      border: 1px solid var(--salas-gray-300);
+      background-color: var(--salas-bg-elevated, #fff);
+      color: var(--salas-gray-900);
+      cursor: pointer;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+      outline: none;
+      flex-shrink: 0;
+    }
+
+    salas-checkbox:focus-visible {
+      outline: 2px solid var(--salas-primary-500);
+      outline-offset: 2px;
+    }
+
+    salas-checkbox.salas-checkbox--checked,
+    salas-checkbox.salas-checkbox--indeterminate {
+      background-color: var(--salas-primary-500);
+      border-color: var(--salas-primary-500);
+      color: white;
+    }
+
+    salas-checkbox.salas-checkbox--checked:hover:not(.salas-checkbox--disabled),
+    salas-checkbox.salas-checkbox--indeterminate:hover:not(.salas-checkbox--disabled) {
+      background-color: var(--salas-primary-600);
+      border-color: var(--salas-primary-600);
+    }
+
+    salas-checkbox.salas-checkbox--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .salas-checkbox-icon {
+      width: 0.75rem;
+      height: 0.75rem;
+      stroke: currentColor;
+      stroke-width: 3;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    [data-theme='dark'] salas-checkbox {
+      background-color: var(--salas-gray-900);
+      border-color: var(--salas-gray-700);
+      color: var(--salas-gray-100);
+    }
+
+    [data-theme='dark'] salas-checkbox.salas-checkbox--checked,
+    [data-theme='dark'] salas-checkbox.salas-checkbox--indeterminate {
+      background-color: var(--salas-primary-500);
+      border-color: var(--salas-primary-500);
+      color: white;
+    }
+  `],
+})
+export class SalasCheckboxComponent implements CheckboxProps, ControlValueAccessor {
+  @Input() checked: CheckboxState = false;
+  @Input() disabled = false;
+
+  @Output() checkedChange = new EventEmitter<CheckboxState>();
+
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get indeterminate(): boolean {
+    return this.checked === 'indeterminate';
+  }
+
+  get ariaChecked(): string {
+    if (this.indeterminate) return 'mixed';
+    return this.checked === true ? 'true' : 'false';
+  }
+
+  get checkboxClasses(): string {
+    return cn(
+      'salas-checkbox',
+      this.checked === true && 'salas-checkbox--checked',
+      this.indeterminate && 'salas-checkbox--indeterminate',
+      this.disabled && 'salas-checkbox--disabled',
+    );
+  }
+
+  @HostListener('click', ['$event'])
+  handleClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.toggle();
+  }
+
+  @HostListener('keydown.space', ['$event'])
+  handleSpace(event: KeyboardEvent): void {
+    event.preventDefault();
+    this.toggle();
+  }
+
+  toggle(): void {
+    if (this.disabled) return;
+
+    const next: CheckboxState = this.indeterminate ? true : !this.checked;
+    this.checked = next;
+    this.onTouched();
+    this.onChange(this.checked === true);
+    this.checkedChange.emit(next);
+  }
+
+  // ControlValueAccessor
+  writeValue(value: boolean | null | undefined): void {
+    this.checked = value ?? false;
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/templates/angular/checkbox/checkbox.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { SalasCheckboxComponent } from './checkbox.component';
+
+@NgModule({
+  imports: [SalasCheckboxComponent],
+  exports: [SalasCheckboxComponent],
+})
+export class SalasCheckboxModule {}