dasar-ui 1.1.0 → 1.3.0

package/projects/dasar-ui/src/lib/components/dasar-number-input/dasar-number-input.ts

@@ -1,337 +0,0 @@
-import {
-  booleanAttribute,
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ViewEncapsulation,
-  ContentChild,
-  Directive,
-  HostBinding,
-  forwardRef,
-  inject,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-
-import { DASAR_THEME_PROVIDER } from '../dasar-theme-provider/dasar-theme-provider';
-import { ClassType, StyleType, ScaleAttributeType } from '../../models/type.model';
-import { DasarThemeService } from '../../services/theme.service';
-import { DasarButton } from '../dasar-button/dasar-button';
-import { resolveThemeDefault } from '../../utils/common';
-import { DasarIcon } from '../dasar-icon/dasar-icon';
-
-export type DasarNumberInputSize = Extract<ScaleAttributeType, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-export type DasarNumberInputAppearanceType = 'outline' | 'filled';
-export type DasarNumberInputRadiusType = ScaleAttributeType;
-
-export interface DasarNumberInputConfig {
-  appearance?: DasarNumberInputAppearanceType;
-  radius?: DasarNumberInputRadiusType;
-  size?: DasarNumberInputSize;
-  label?: string;
-  labelRight?: string;
-  placeholder?: string;
-  hint?: string;
-  step?: number;
-  min?: number;
-  max?: number;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  error?: boolean;
-  containerClass?: ClassType;
-  inputClass?: ClassType;
-  hostClass?: ClassType;
-  hintClass?: ClassType;
-  containerStyle?: StyleType;
-  inputStyle?: StyleType;
-  hintStyle?: StyleType;
-  hideOverflow?: boolean;
-}
-
-@Directive({ selector: '[extra-label-slot]', standalone: true })
-export class DasarNumberInputExtraLabelSlot {}
-@Directive({ selector: '[prefix-slot]', standalone: true })
-export class DasarNumberInputPrefixSlot {}
-@Directive({ selector: '[decrement-slot]', standalone: true })
-export class DasarNumberInputDecrementSlot {}
-@Directive({ selector: '[increment-slot]', standalone: true })
-export class DasarNumberInputIncrementSlot {}
-
-@Component({
-  providers: [
-    {
-      useExisting: forwardRef(() => DasarNumberInput),
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-    },
-  ],
-  imports: [CommonModule, FormsModule, DasarIcon, DasarButton],
-  templateUrl: './dasar-number-input.html',
-  styleUrls: ['./dasar-number-input.scss'],
-  encapsulation: ViewEncapsulation.None,
-  selector: 'dasar-number-input',
-  standalone: true,
-})
-export class DasarNumberInput implements ControlValueAccessor {
-  @ContentChild(DasarNumberInputExtraLabelSlot)
-  providedExtraLabelSlot?: DasarNumberInputExtraLabelSlot;
-  @ContentChild(DasarNumberInputDecrementSlot) providedDecrement?: DasarNumberInputDecrementSlot;
-  @ContentChild(DasarNumberInputIncrementSlot) providedIncrement?: DasarNumberInputIncrementSlot;
-  @ContentChild(DasarNumberInputPrefixSlot) providedPrefix?: DasarNumberInputPrefixSlot;
-
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-  private cdr = inject(ChangeDetectorRef);
-
-  @Input() appearance = resolveThemeDefault(
-    'numberInput',
-    'appearance',
-    'outline',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() radius = resolveThemeDefault(
-    'numberInput',
-    'radius',
-    'md',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault(
-    'numberInput',
-    'size',
-    'md',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() label = resolveThemeDefault(
-    'numberInput',
-    'label',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() labelRight = resolveThemeDefault(
-    'numberInput',
-    'labelRight',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() placeholder = resolveThemeDefault(
-    'numberInput',
-    'placeholder',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() hint = resolveThemeDefault(
-    'numberInput',
-    'hint',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() step = resolveThemeDefault(
-    'numberInput',
-    'step',
-    1,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() min = resolveThemeDefault(
-    'numberInput',
-    'min',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() max = resolveThemeDefault(
-    'numberInput',
-    'max',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) disabled = resolveThemeDefault(
-    'numberInput',
-    'disabled',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-
-  @Input({ transform: booleanAttribute, alias: 'full-width' }) fullWidth = resolveThemeDefault(
-    'numberInput',
-    'fullWidth',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) error = resolveThemeDefault(
-    'numberInput',
-    'error',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('container-class') containerClass = resolveThemeDefault(
-    'numberInput',
-    'containerClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('input-class') inputClass = resolveThemeDefault(
-    'numberInput',
-    'inputClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('host-class') hostClass = resolveThemeDefault(
-    'numberInput',
-    'hostClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('hint-class') hintClass = resolveThemeDefault(
-    'numberInput',
-    'hintClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('container-style') containerStyle = resolveThemeDefault(
-    'numberInput',
-    'containerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('input-style') inputStyle = resolveThemeDefault(
-    'numberInput',
-    'inputStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input('hint-style') hintStyle = resolveThemeDefault(
-    'numberInput',
-    'hintStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'hide-overflow', transform: booleanAttribute }) hideOverflow =
-    resolveThemeDefault('card', 'hideOverflow', false, this.themeProvider, this.themeService);
-
-  @Output() valueChange = new EventEmitter<number | null>();
-  @Output() onIncrementClick = new EventEmitter<number>();
-  @Output() onDecrementClick = new EventEmitter<number>();
-  @Output() onInputFocus = new EventEmitter<FocusEvent>();
-  @Output() onInputBlur = new EventEmitter<FocusEvent>();
-  @Output() onInputChange = new EventEmitter<Event>();
-
-  @HostBinding('class.dasar-number-input') readonly baseClass = true;
-  @HostBinding('class.full-width') get hasFullWidth(): boolean {
-    return this.fullWidth;
-  }
-  @HostBinding('class.disabled') get isDisabled(): boolean {
-    return this.disabled;
-  }
-
-  private _value: number | null = null;
-  @Input()
-  get value(): number | null {
-    return this._value;
-  }
-  set value(val: number | null) {
-    if (this._value !== val) {
-      this._value = val;
-      this.cdr.markForCheck();
-    }
-  }
-  onTouched: any = () => {};
-  onChange: any = () => {};
-
-  get hasDecrementSlot(): boolean {
-    return !!this.providedDecrement;
-  }
-  get hasIncrementSlot(): boolean {
-    return !!this.providedIncrement;
-  }
-  get hasExtraLabelSlot(): boolean {
-    return !!this.providedExtraLabelSlot;
-  }
-  get hasPrefixSlot(): boolean {
-    return !!this.providedPrefix;
-  }
-
-  writeValue(value: any): void {
-    const parsedValue =
-      value === null || value === undefined || value === '' ? null : Number(value);
-    this._value = parsedValue;
-    this.cdr.markForCheck();
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-  onDecrement(event: MouseEvent): void {
-    if (this.disabled) return;
-    event.preventDefault();
-    const currentValue = this.value ?? 0;
-    const newValue = currentValue - this.step;
-    if (this.min === undefined || newValue >= this.min) {
-      this.updateValue(newValue);
-      this.onDecrementClick.emit(newValue);
-    }
-  }
-  onIncrement(event: MouseEvent): void {
-    if (this.disabled) return;
-    event.preventDefault();
-    const currentValue = this.value ?? 0;
-    const newValue = currentValue + this.step;
-    if (this.max === undefined || newValue <= this.max) {
-      this.updateValue(newValue);
-      this.onIncrementClick.emit(newValue);
-    }
-  }
-  onInput(event: Event): void {
-    const inputElement = event.target as HTMLInputElement;
-    const parsedValue = inputElement.value === '' ? null : Number(inputElement.value);
-    this.updateValue(parsedValue);
-    this.onInputChange.emit(event);
-  }
-  onFocus(event: FocusEvent): void {
-    this.onInputFocus.emit(event);
-  }
-  onBlur(event: FocusEvent): void {
-    this.onTouched();
-    this.onInputBlur.emit(event);
-  }
-  private updateValue(newValue: number | null): void {
-    if (this._value !== newValue) {
-      this._value = newValue;
-      this.onChange(newValue);
-      this.valueChange.emit(newValue);
-      this.cdr.markForCheck();
-    }
-  }
-}
-export const DasarNumberInputComponent = [
-  DasarNumberInputDecrementSlot,
-  DasarNumberInputIncrementSlot,
-  DasarNumberInputPrefixSlot,
-  DasarNumberInput,
-] as const;

package/projects/dasar-ui/src/lib/components/dasar-pagination/dasar-pagination.html

@@ -1,98 +0,0 @@
-<nav class="dasar-pagination-container size-{{ size }}">
-  <ul class="dasar-pagination-list">
-    @if (showFirstLast) {
-      <li>
-        <dasar-button
-          [variant]="appearance === 'outline' ? 'ghost' : 'primary'"
-          [appearance]="appearance === 'solid' ? 'outline' : appearance"
-          [size]="size"
-          [radius]="radius"
-          [disabled]="currentPage === 1 || disabled"
-          (click)="goToPage(1)"
-          class="dasar-pagination-btn"
-          aria-label="First page"
-        >
-          &laquo;
-        </dasar-button>
-      </li>
-    }
-
-    <li>
-      <dasar-button
-        [variant]="appearance === 'outline' ? 'ghost' : 'primary'"
-        [appearance]="appearance === 'solid' ? 'outline' : appearance"
-        [size]="size"
-        [radius]="radius"
-        [disabled]="currentPage === 1 || disabled"
-        (click)="goToPage(currentPage - 1)"
-        class="dasar-pagination-btn"
-        aria-label="Previous page"
-      >
-        &lsaquo;
-      </dasar-button>
-    </li>
-
-    @for (page of pages; track $index) {
-      <li>
-        @if (page === '...') {
-          <span class="dasar-pagination-ellipsis">...</span>
-        } @else {
-          <dasar-button
-            [variant]="
-              currentPage === page ? 'primary' : appearance === 'outline' ? 'ghost' : 'secondary'
-            "
-            [appearance]="
-              currentPage === page
-                ? appearance === 'outline'
-                  ? 'solid'
-                  : appearance
-                : appearance === 'solid'
-                  ? 'outline'
-                  : appearance
-            "
-            [size]="size"
-            [radius]="radius"
-            [disabled]="disabled"
-            (click)="goToPage(page)"
-            class="dasar-pagination-btn"
-            [class.active]="currentPage === page"
-          >
-            {{ page }}
-          </dasar-button>
-        }
-      </li>
-    }
-
-    <li>
-      <dasar-button
-        [variant]="appearance === 'outline' ? 'ghost' : 'primary'"
-        [appearance]="appearance === 'solid' ? 'outline' : appearance"
-        [size]="size"
-        [radius]="radius"
-        [disabled]="currentPage === totalPages || disabled"
-        (click)="goToPage(currentPage + 1)"
-        class="dasar-pagination-btn"
-        aria-label="Next page"
-      >
-        &rsaquo;
-      </dasar-button>
-    </li>
-
-    @if (showFirstLast) {
-      <li>
-        <dasar-button
-          [variant]="appearance === 'outline' ? 'ghost' : 'primary'"
-          [appearance]="appearance === 'solid' ? 'outline' : appearance"
-          [size]="size"
-          [radius]="radius"
-          [disabled]="currentPage === totalPages || disabled"
-          (click)="goToPage(totalPages)"
-          class="dasar-pagination-btn"
-          aria-label="Last page"
-        >
-          &raquo;
-        </dasar-button>
-      </li>
-    }
-  </ul>
-</nav>

package/projects/dasar-ui/src/lib/components/dasar-pagination/dasar-pagination.scss

@@ -1,51 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-pagination-container {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-
-  .dasar-pagination-list {
-    display: inline-flex;
-    align-items: center;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    gap: $dasar-space-1;
-    flex-wrap: wrap;
-
-    li {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .dasar-pagination-btn {
-    ::ng-deep .dasar-button-native {
-      min-width: $dasar-space-10;
-      padding-left: $dasar-space-base;
-      padding-right: $dasar-space-base;
-    }
-  }
-
-  &.size-sm .dasar-pagination-btn ::ng-deep .dasar-button-native {
-    min-width: $dasar-space-8;
-  }
-
-  &.size-lg .dasar-pagination-btn ::ng-deep .dasar-button-native {
-    min-width: $dasar-space-12;
-  }
-
-  .dasar-pagination-ellipsis {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--theme-text-secondary-color);
-    font-weight: var(--font-weight-medium, $dasar-font-weight-medium);
-    padding: 0 $dasar-space-base;
-    letter-spacing: 2px;
-    user-select: none;
-  }
-}

package/projects/dasar-ui/src/lib/components/dasar-pagination/dasar-pagination.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DasarPagination } from './dasar-pagination';
-
-describe('DasarPagination', () => {
-  let component: DasarPagination;
-  let fixture: ComponentFixture<DasarPagination>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DasarPagination],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DasarPagination);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/dasar-ui/src/lib/components/dasar-pagination/dasar-pagination.ts

@@ -1,99 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  booleanAttribute,
-  computed,
-  signal,
-  effect,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DasarButtonComponent } from '../dasar-button/dasar-button'; // Adjust path as needed
-
-export type DasarPaginationRadiusType = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type DasarPaginationAppearanceType = 'solid' | 'subtle' | 'outline';
-export type DasarPaginationSizeType = 'sm' | 'md' | 'lg';
-
-@Component({
-  imports: [CommonModule, DasarButtonComponent],
-  templateUrl: './dasar-pagination.html',
-  styleUrls: ['./dasar-pagination.scss'],
-  selector: 'dasar-pagination',
-  standalone: true,
-})
-export class DasarPagination {
-  @Input({ transform: booleanAttribute }) showFirstLast: boolean = true;
-  @Input({ transform: booleanAttribute }) disabled: boolean = false;
-  @Input() appearance: DasarPaginationAppearanceType = 'solid';
-  @Input() radius: DasarPaginationRadiusType = 'md';
-  @Input() size: DasarPaginationSizeType = 'md';
-  @Input() siblingCount: number = 1;
-  @Input() currentPage: number = 1;
-  @Input() pageSize: number = 10;
-  @Input() totalItems: number = 0;
-
-  @Output() pageChange = new EventEmitter<number>();
-
-  get totalPages(): number {
-    return Math.ceil(this.totalItems / this.pageSize);
-  }
-
-  get pages(): (number | string)[] {
-    const totalPages = this.totalPages;
-    const siblingCount = this.siblingCount;
-    const currentPage = this.currentPage;
-    const totalPageNumbers = siblingCount + 5;
-
-    if (totalPageNumbers >= totalPages) {
-      return this.range(1, totalPages);
-    }
-
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-    const showLeftDots = leftSiblingIndex > 2;
-    const showRightDots = rightSiblingIndex < totalPages - 2;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPages;
-
-    if (!showLeftDots && showRightDots) {
-      const leftItemCount = 3 + 2 * siblingCount;
-      const leftRange = this.range(1, leftItemCount);
-      return [...leftRange, '...', totalPages];
-    }
-
-    if (showLeftDots && !showRightDots) {
-      const rightItemCount = 3 + 2 * siblingCount;
-      const rightRange = this.range(totalPages - rightItemCount + 1, totalPages);
-      return [firstPageIndex, '...', ...rightRange];
-    }
-
-    if (showLeftDots && showRightDots) {
-      const middleRange = this.range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];
-    }
-
-    return [];
-  }
-
-  private range(start: number, end: number): number[] {
-    const length = end - start + 1;
-    return Array.from({ length }, (_, idx) => idx + start);
-  }
-
-  goToPage(page: number | string) {
-    if (
-      typeof page === 'string' ||
-      page === this.currentPage ||
-      page < 1 ||
-      page > this.totalPages ||
-      this.disabled
-    ) {
-      return;
-    }
-    this.currentPage = page;
-    this.pageChange.emit(this.currentPage);
-  }
-}
-
-export const DasarPaginationComponent = [DasarPagination] as const;

package/projects/dasar-ui/src/lib/components/dasar-pin/dasar-pin.html

@@ -1 +0,0 @@
-<p>dasar-pin works!</p>

package/projects/dasar-ui/src/lib/components/dasar-pin/dasar-pin.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DasarPin } from './dasar-pin';
-
-describe('DasarPin', () => {
-  let component: DasarPin;
-  let fixture: ComponentFixture<DasarPin>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DasarPin],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DasarPin);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/dasar-ui/src/lib/components/dasar-pin/dasar-pin.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  imports: [],
-  selector: 'dasar-dasar-pin',
-  styleUrl: './dasar-pin.css',
-  templateUrl: './dasar-pin.html',
-})
-export class DasarPin {}