dasar-ui 1.1.0 → 1.3.0

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

@@ -1,207 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  booleanAttribute,
-  Directive,
-  TemplateRef,
-  ContentChild,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  inject,
-  HostBinding,
-  HostListener,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import {
-  DasarButtonAppearanceType,
-  DasarButtonVariantType,
-  DasarButtonRadiusType,
-  DasarButtonComponent,
-  DasarButtonSizeType,
-} from '../dasar-button/dasar-button';
-import { DASAR_THEME_PROVIDER } from '../dasar-theme-provider/dasar-theme-provider';
-import { DasarThemeService } from '../../services/theme.service';
-import { ClassType, StyleType } from '../../models/type.model';
-import { resolveThemeDefault } from '../../utils/common';
-import { DasarIconComponent } from '../dasar-icon/dasar-icon';
-
-export type DasarChipAppearanceType = DasarButtonAppearanceType;
-export type DasarChipVariantType = DasarButtonVariantType;
-
-export interface DasarChipConfig {
-  closeIconName?: string;
-  appearance?: DasarChipAppearanceType;
-  variant?: DasarChipVariantType;
-  iconName?: string;
-  radius?: DasarButtonRadiusType;
-  size?: DasarButtonSizeType;
-  label?: string;
-  removable?: boolean;
-  disabled?: boolean;
-  fluid?: boolean;
-  containerStyle?: StyleType;
-  contentStyle?: StyleType;
-  labelStyle?: StyleType;
-  containerClass?: ClassType;
-  contentClass?: ClassType;
-  labelClass?: ClassType;
-}
-
-@Directive({ selector: '[chip-label-slot]', standalone: true })
-export class DasarChipLabelSlot {}
-@Directive({ selector: '[chip-close-slot]', standalone: true })
-export class DasarChipCloseSlot {}
-
-@Component({
-  imports: [CommonModule, DasarIconComponent, DasarButtonComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './dasar-chip.html',
-  styleUrls: ['./dasar-chip.scss'],
-  selector: 'dasar-chip',
-  standalone: true,
-})
-export class DasarChip {
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-  private cdr = inject(ChangeDetectorRef);
-
-  @Input({ alias: 'close-icon-name' }) closeIconName = resolveThemeDefault(
-    'chip',
-    'closeIconName',
-    'x',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() appearance = resolveThemeDefault(
-    'chip',
-    'appearance',
-    'solid',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() variant = resolveThemeDefault(
-    'chip',
-    'variant',
-    'primary',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'icon-name' }) iconName = resolveThemeDefault(
-    'chip',
-    'iconName',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() radius = resolveThemeDefault(
-    'chip',
-    'radius',
-    'md',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault('chip', 'size', 'xs', this.themeProvider, this.themeService);
-  @Input() label = resolveThemeDefault(
-    'chip',
-    'label',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'container-style' }) containerStyle = resolveThemeDefault(
-    'chip',
-    'containerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'content-style' }) contentStyle = resolveThemeDefault(
-    'chip',
-    'contentStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'label-style' }) labelStyle = resolveThemeDefault(
-    'chip',
-    'labelStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'container-class' }) containerClass = resolveThemeDefault(
-    'chip',
-    'containerClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'content-class' }) contentClass = resolveThemeDefault(
-    'chip',
-    'contentClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'label-class' }) labelClass = resolveThemeDefault(
-    'chip',
-    'labelClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) removable = resolveThemeDefault(
-    'chip',
-    'removable',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) disabled = resolveThemeDefault(
-    'chip',
-    'disabled',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) fluid = resolveThemeDefault(
-    'chip',
-    'fluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-
-  @ContentChild(DasarChipLabelSlot) labelSlot?: DasarChipLabelSlot;
-  @ContentChild(DasarChipCloseSlot) closeSlot?: DasarChipCloseSlot;
-
-  @Output() onClick = new EventEmitter<Event>();
-  @Output() onRemove = new EventEmitter<Event>();
-
-  @HostBinding('class.dasar-chip') readonly baseClass = true;
-  @HostListener('click', ['$event'])
-  onHostClick(event: MouseEvent) {
-    // stop the event from bubbling up to parent elements
-    event.stopPropagation();
-    // prevent default anchor/button behavior
-    event.preventDefault();
-  }
-
-  click(event: Event) {
-    if (this.disabled) return;
-    this.onClick.emit(event);
-  }
-
-  remove(event: Event) {
-    event.stopPropagation();
-    if (this.disabled) return;
-    this.onRemove.emit(event);
-  }
-}
-
-export const DasarChipComponent = [DasarChip, DasarChipLabelSlot, DasarChipCloseSlot] as const;

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

@@ -1,102 +0,0 @@
-<div
-  class="dasar-datepicker-container"
-  [class.full-width]="fullWidth"
-  [class.disabled]="disabled"
-  [class.error]="error"
-  [class.fluid]="fluid"
-  [ngClass]="containerClass"
-  [ngStyle]="containerStyle"
->
-  @if (hasLabelRow) {
-    <div
-      class="dasar-datepicker-label-wrapper"
-      [ngClass]="labelWrapperClass"
-      [ngStyle]="labelWrapperStyle"
-    >
-      <div class="dasar-datepicker-label-content">
-        @if (labelSlot) {
-          <ng-content select="[label-slot]"></ng-content>
-        } @else if (label) {
-          {{ label }}
-        }
-      </div>
-      @if (extraLabelSlot) {
-        <div class="dasar-datepicker-extra-label-content">
-          <ng-content select="[extra-label-slot]"></ng-content>
-        </div>
-      }
-    </div>
-  }
-  <div
-    #triggerElement
-    class="dasar-datepicker-wrapper"
-    [ngClass]="wrapperClass"
-    [ngStyle]="wrapperStyle"
-  >
-    <div
-      class="dasar-datepicker-trigger appearance-{{ appearance }} size-{{ size }} radius-{{
-        radius
-      }}"
-      (click)="toggleDropdown($event)"
-      [class.has-value]="!!internalDate"
-      [class.active]="isOpen"
-      [ngClass]="triggerClass"
-      [ngStyle]="triggerStyle"
-      tabindex="0"
-    >
-      <ng-content select="[prefix-slot]"></ng-content>
-      <span class="value-text">{{ internalDate ? formattedDisplay : placeholder }}</span>
-      <div class="datepicker-actions">
-        @if (clearable && internalDate) {
-          <dasar-icon class="clear-icon" name="x" (click)="clearValue($event)"></dasar-icon>
-        }
-        <dasar-icon
-          [name]="type.includes('time') ? 'clock' : 'calendar'"
-          class="calendar-icon"
-        ></dasar-icon>
-      </div>
-    </div>
-    @if (isOpen) {
-      <div
-        #dropdownElement
-        class="dasar-datepicker-dropdown radius-{{ radius }} placement-{{ placement }}"
-        [ngClass]="dropdownClass"
-        [ngStyle]="dropdownStyle"
-      >
-        <dasar-calendar
-          variant="dropdown"
-          (valueChange)="onCalendarSelect($event)"
-          (prevMonth)="onPrevMonthClick.emit()"
-          (nextMonth)="onNextMonthClick.emit()"
-          (prevYear)="onPrevYearClick.emit()"
-          (nextYear)="onNextYearClick.emit()"
-          [value-format]="valueFormat"
-          [(value)]="internalDate"
-          [locale]="locale"
-        >
-          @if (extraFooterSlot) {
-            <ng-content
-              ngProjectAs="[calendar-footer-slot]"
-              select="[extra-footer-slot]"
-            ></ng-content>
-          }
-        </dasar-calendar>
-      </div>
-    }
-  </div>
-  @if (hasHintRow) {
-    <div
-      class="slot-wrapper hint-wrapper"
-      [class.disabled]="disabled"
-      [class.error]="error"
-      [ngClass]="hintWrapperClass"
-      [ngStyle]="hintWrapperStyle"
-    >
-      @if (hintSlot) {
-        <ng-content select="[hint-slot]"></ng-content>
-      } @else if (hint) {
-        {{ hint }}
-      }
-    </div>
-  }
-</div>

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

@@ -1,301 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-datepicker {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-  width: fit-content;
-
-  &.full-width {
-    width: 100%;
-  }
-
-  &.disabled {
-    opacity: var(--datepicker-disabled-opacity, 0.6);
-    cursor: not-allowed;
-
-    .dasar-datepicker-trigger {
-      pointer-events: none;
-      background-color: var(--datepicker-disabled-bg, var(--theme-bg-hover-color));
-    }
-  }
-}
-
-.dasar-datepicker-container {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--datepicker-wrapper-gap, var(--space-1));
-  width: 100%;
-
-  &.fluid {
-    .dasar-datepicker-wrapper,
-    .dasar-datepicker-trigger,
-    .dasar-datepicker-label-wrapper,
-    .hint-wrapper {
-      border: none !important;
-      padding: 0 !important;
-      margin: 0 !important;
-    }
-  }
-
-  &.error {
-    .dasar-datepicker-trigger {
-      border-color: var(--datepicker-error-border, var(--theme-danger-color)) !important;
-
-      &.open,
-      &:focus-within {
-        box-shadow: 0 0 0 3px var(--datepicker-error-focus-ring, var(--theme-danger-surface-color));
-      }
-    }
-  }
-}
-
-.dasar-datepicker-label-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  font-weight: var(--datepicker-label-font-weight, var(--font-weight-medium));
-  color: var(--datepicker-label-color, var(--theme-text-primary-color));
-  margin-bottom: var(--datepicker-label-margin-bottom, var(--space-1));
-  line-height: var(--line-height-tight);
-
-  .dasar-datepicker-label-content {
-    font-size: var(--datepicker-label-font-size, var(--font-size-md));
-  }
-
-  .dasar-datepicker-extra-label-content {
-    font-size: var(--datepicker-label-right-font-size, var(--font-size-sm));
-    font-weight: var(--datepicker-label-right-font-weight, var(--font-weight-regular));
-    color: var(--datepicker-label-right-color, var(--theme-text-secondary-color));
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-  }
-}
-
-.hint-wrapper {
-  font-size: var(--datepicker-hint-font-size, var(--font-size-xs));
-  color: var(--datepicker-hint-color, var(--theme-text-secondary-color));
-  margin-top: calc(var(--space-0-5) * -1);
-  line-height: var(--line-height-normal);
-
-  &.error {
-    color: var(--datepicker-hint-error-color, var(--theme-danger-color));
-  }
-
-  &.disabled {
-    opacity: var(--datepicker-disabled-opacity, 0.6);
-    cursor: not-allowed;
-  }
-}
-
-.dasar-datepicker-wrapper {
-  flex-direction: column;
-  display: flex;
-  position: relative;
-  width: 100%;
-}
-
-.dasar-datepicker-trigger {
-  color: var(--datepicker-trigger-color, var(--theme-text-secondary-color));
-  border-radius: var(--datepicker-radius-sm, var(--radius-sm));
-  gap: var(--datepicker-gap, var(--space-base));
-  justify-content: space-between;
-  box-sizing: border-box;
-  font-family: inherit;
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  outline: none;
-  width: 100%;
-
-  &.has-value {
-    color: var(--datepicker-trigger-value-color, var(--theme-text-primary-color));
-  }
-
-  .value-text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1;
-  }
-
-  .calendar-icon {
-    flex-shrink: 0;
-    color: var(--datepicker-icon-color, var(--theme-text-secondary-color));
-  }
-
-  .datepicker-actions {
-    align-items: center;
-    flex-shrink: 0;
-    display: flex;
-  }
-
-  .clear-icon {
-    color: var(--datepicker-clear-icon-color, var(--theme-text-disabled-color));
-    padding: var(--space-0-5);
-    border-radius: var(--radius-full);
-  }
-
-  &.size-xs {
-    height: var(--datepicker-height-xs, var(--space-6));
-    padding: 0 var(--datepicker-padding-horizontal-xs, var(--space-base));
-    font-size: var(--font-size-xs);
-  }
-
-  &.size-sm {
-    height: var(--datepicker-height-sm, var(--space-8));
-    padding: 0 var(--datepicker-padding-horizontal-sm, var(--space-3));
-    font-size: var(--font-size-sm);
-  }
-
-  &.size-md {
-    height: var(--datepicker-height-md, var(--space-10));
-    padding: 0 var(--datepicker-padding-horizontal-md, var(--space-4));
-    font-size: var(--font-size-base);
-  }
-
-  &.size-lg {
-    height: var(--datepicker-height-lg, var(--space-12));
-    padding: 0 var(--datepicker-padding-horizontal-lg, var(--space-5));
-    font-size: var(--font-size-lg);
-  }
-
-  &.size-xl {
-    height: var(--datepicker-height-xl, var(--space-16));
-    padding: 0 var(--datepicker-padding-horizontal-xl, var(--space-6));
-    font-size: var(--font-size-xl);
-  }
-
-  &.radius-none {
-    border-radius: var(--datepicker-radius-none, var(--radius-none));
-  }
-  &.radius-xs {
-    border-radius: var(--datepicker-radius-xs, var(--radius-xs));
-  }
-  &.radius-sm {
-    border-radius: var(--datepicker-radius-sm, var(--radius-sm));
-  }
-  &.radius-md {
-    border-radius: var(--datepicker-radius-md, var(--radius-md));
-  }
-  &.radius-lg {
-    border-radius: var(--datepicker-radius-lg, var(--radius-lg));
-  }
-  &.radius-xl {
-    border-radius: var(--datepicker-radius-xl, var(--radius-xl));
-  }
-  &.radius-full {
-    border-radius: var(--datepicker-radius-full, var(--radius-full));
-  }
-
-  &.appearance-outline {
-    background-color: var(--datepicker-outline-bg, transparent);
-    border: 1px solid var(--datepicker-outline-border, var(--theme-border-strong-color));
-
-    &:hover {
-      border-color: var(--datepicker-outline-hover-border, var(--theme-primary-color));
-    }
-
-    &.active,
-    &:focus,
-    &.open {
-      border-color: var(--datepicker-outline-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--datepicker-outline-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.appearance-filled {
-    background-color: var(--datepicker-filled-bg, var(--theme-bg-hover-color));
-    border: 1px solid var(--datepicker-filled-border, transparent);
-
-    &:hover {
-      background-color: var(--datepicker-filled-hover-bg, var(--theme-border-subtle-color));
-    }
-
-    &.active,
-    &:focus,
-    &.open {
-      background-color: var(--datepicker-filled-focus-bg, var(--theme-bg-surface-color));
-      border-color: var(--datepicker-filled-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--datepicker-filled-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.appearance-subtle {
-    background-color: var(--datepicker-subtle-bg, transparent);
-    border: 1px solid var(--datepicker-subtle-border, transparent);
-
-    &:hover {
-      background-color: var(--datepicker-subtle-hover-bg, var(--theme-bg-hover-color));
-    }
-
-    &.active,
-    &:focus,
-    &.open {
-      background-color: var(--datepicker-subtle-focus-bg, var(--theme-bg-hover-color));
-    }
-  }
-}
-
-.dasar-datepicker-dropdown {
-  box-shadow: var(
-    --datepicker-dropdown-shadow,
-    0 10px 25px -5px rgba(0, 0, 0, 0.1),
-    0 8px 10px -6px rgba(0, 0, 0, 0.1)
-  );
-  background-color: var(--datepicker-dropdown-bg, var(--theme-bg-default-color));
-  border: 1px solid var(--datepicker-dropdown-border, var(--theme-border-subtle-color));
-  border-radius: var(--datepicker-dropdown-radius, var(--radius-md));
-  position: absolute;
-  z-index: var(--datepicker-dropdown-z-index, 50);
-  width: var(--datepicker-dropdown-width, 280px);
-  animation: dasarFadeInDown 0.15s ease-out forwards;
-
-  &.placement-bottom-start {
-    top: calc(100% + var(--space-1));
-    left: 0;
-    transform-origin: top left;
-  }
-
-  &.placement-bottom-end {
-    top: calc(100% + var(--space-1));
-    right: 0;
-    transform-origin: top right;
-  }
-
-  &.placement-top-start {
-    bottom: calc(100% + var(--space-1));
-    left: 0;
-    transform-origin: bottom left;
-  }
-
-  &.placement-top-end {
-    bottom: calc(100% + var(--space-1));
-    right: 0;
-    transform-origin: bottom right;
-  }
-
-  .dropdown-header-slot {
-    padding-bottom: var(--space-3);
-    margin-bottom: var(--space-3);
-    border-bottom: 1px solid var(--theme-border-subtle-color);
-  }
-
-  .dropdown-footer-slot {
-    padding-top: var(--space-3);
-    margin-top: var(--space-3);
-    border-top: 1px solid var(--theme-border-subtle-color);
-  }
-}
-
-@keyframes dasarFadeInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scaleY(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-  }
-}

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

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