dasar-ui 1.1.0 → 1.3.0

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

@@ -1,41 +0,0 @@
-<div
-  class="dasar-tabs-container appearance-{{ appearance }} size-{{ size }}"
-  [class.fluid]="fluid"
-  [ngClass]="containerClass"
-  [ngStyle]="containerStyle"
->
-  <div class="dasar-tabs-list" [ngClass]="listClass" [ngStyle]="listStyle">
-    @if (items.length > 0) {
-      @for (item of items; track item; let i = $index) {
-        <dasar-button
-          [variant]="activeIndex === i && appearance !== 'outline' ? 'primary' : 'ghost'"
-          [radius]="appearance === 'outline' ? 'none' : radius"
-          [size]="size === 'compact' ? 'sm' : 'md'"
-          [class.active]="activeIndex === i"
-          [fluid]="fluid"
-          (click)="selectTab(i)"
-          class="dasar-tab-trigger-btn"
-        >
-          {{ item }}
-        </dasar-button>
-      }
-    } @else {
-      @for (tabSlotDirective of tabItemSlotDirectives; track tabSlotDirective; let i = $index) {
-        <dasar-button
-          [variant]="activeIndex === i && appearance !== 'outline' ? 'primary' : 'ghost'"
-          [radius]="appearance === 'outline' ? 'none' : radius"
-          [size]="size === 'compact' ? 'sm' : 'md'"
-          [class.active]="activeIndex === i"
-          (click)="selectTab(i)"
-          [fluid]="fluid"
-          class="dasar-tab-trigger-btn"
-        >
-          <ng-container *ngTemplateOutlet="tabSlotDirective.templateRef"></ng-container>
-        </dasar-button>
-      }
-    }
-  </div>
-  <div class="dasar-tabs-content" [ngClass]="contentClass" [ngStyle]="contentStyle">
-    <ng-content></ng-content>
-  </div>
-</div>

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

@@ -1,126 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-tabs {
-  display: block;
-  width: 100%;
-}
-
-.dasar-tabs-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &.fluid {
-    background-color: transparent;
-    border: none;
-    box-shadow: none;
-
-    .dasar-tabs-list {
-      display: flex;
-      background-color: transparent !important;
-      border: none !important;
-      box-shadow: none !important;
-      padding: 0 !important;
-    }
-  }
-}
-
-.dasar-tabs-list {
-  font-size: var(--font-size-base);
-  -ms-overflow-style: none;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  padding: var(--space-1);
-  gap: var(--space-1);
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.dasar-tabs-container.appearance-subtle .dasar-tabs-list {
-  background-color: var(--theme-bg-hover-color);
-  border-radius: var(--radius-md);
-  transition: background-color 0.3s ease;
-}
-
-.dasar-tabs-container.appearance-solid .dasar-tabs-list {
-  background-color: var(--theme-bg-surface-color);
-  border: 1px solid var(--theme-border-strong-color);
-  border-radius: var(--radius-md);
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease;
-}
-
-.dasar-tabs-container.appearance-outline .dasar-tabs-list {
-  border-bottom: 1px solid var(--theme-border-subtle-color);
-  margin-bottom: calc(var(--space-0-5) * -1);
-  background-color: transparent;
-  border-radius: 0;
-  padding: 0;
-  gap: 0;
-}
-
-.dasar-tabs-container.appearance-outline {
-  .dasar-tabs-list {
-    background-color: transparent;
-    box-shadow: inset 0 -1px 0 0 var(--theme-border-subtle-color);
-    border-radius: 0;
-    border: none;
-    padding: 0;
-    gap: 0;
-  }
-
-  .dasar-tab-trigger-btn {
-    border-bottom: none;
-    margin-bottom: 0;
-    transition: box-shadow 0.3s ease-in-out;
-
-    ::ng-deep .dasar-button-native {
-      padding-left: var(--space-4);
-      padding-right: var(--space-4);
-      background-color: transparent !important;
-      border-color: transparent !important;
-      transition:
-        color 0.3s ease-in-out,
-        font-weight 0.3s ease;
-      &:hover {
-        color: var(--theme-primary-color);
-        background-color: var(--theme-bg-hover-color) !important;
-      }
-    }
-
-    &.active {
-      box-shadow: inset 0 -1px 0 0 var(--theme-primary-color);
-      // ::ng-deep .dasar-button-native {
-      //   color: var(--theme-primary-color) !important;
-      //   font-weight: var(--font-weight-semibold);
-      //   background-color: transparent !important;
-      // }
-    }
-  }
-}
-
-.dasar-tabs-content {
-  padding-top: var(--space-4);
-  color: var(--theme-text-primary-color);
-
-  > * {
-    animation: dasarTabFadeIn 0.3s ease-in-out forwards;
-    display: block;
-  }
-}
-
-@keyframes dasarTabFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

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

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

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

@@ -1,72 +0,0 @@
-import {
-  Directive,
-  TemplateRef,
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ContentChildren,
-  QueryList,
-  HostBinding,
-  NgModule,
-  booleanAttribute,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DasarButton } from '../dasar-button/dasar-button';
-
-export type DasarTabsRadiusType = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type DasarTabsAppearanceType = 'solid' | 'subtle' | 'outline';
-export type DasarTabsSizeType = 'compact' | 'normal';
-
-@Directive({
-  selector: '[tab-item-slot]',
-  standalone: true,
-})
-export class DasarTabItemSlotDirective {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-
-@Component({
-  selector: 'dasar-tabs',
-  standalone: true,
-  imports: [CommonModule, DasarButton],
-  templateUrl: './dasar-tabs.html',
-  styleUrls: ['./dasar-tabs.scss'],
-})
-export class DasarTabs {
-  @ContentChildren(DasarTabItemSlotDirective)
-  tabItemSlotDirectives!: QueryList<DasarTabItemSlotDirective>;
-
-  @Input({ transform: booleanAttribute }) fluid: boolean = false;
-  @Input() appearance: DasarTabsAppearanceType = 'subtle';
-  @Input() radius: DasarTabsRadiusType = 'md';
-  @Input() size: DasarTabsSizeType = 'normal';
-  @Input() activeIndex: number = 0;
-  @Input() items: string[] = [];
-
-  @Input() containerStyle: Record<string, any> | null = null;
-  @Input() contentStyle: Record<string, any> | null = null;
-  @Input() listStyle: Record<string, any> | null = null;
-  @Input() containerClass: string = '';
-  @Input() contentClass: string = '';
-  @Input() listClass: string = '';
-
-  @Output() tabsChanged = new EventEmitter<number>();
-  @Output() tabsClicked = new EventEmitter<number>();
-
-  @HostBinding('class.dasar-tabs') readonly baseClass = true;
-
-  selectTab(index: number) {
-    this.activeIndex = index;
-    this.tabsClicked.emit(index);
-    this.tabsChanged.emit(index);
-  }
-}
-
-@NgModule({
-  imports: [DasarTabItemSlotDirective, DasarTabs],
-  exports: [DasarTabItemSlotDirective, DasarTabs],
-})
-export class DasarTabsModule {}
-
-export const DasarTabsComponent = [DasarTabs, DasarTabItemSlotDirective] as const;

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

@@ -1,43 +0,0 @@
-<div class="dasar-textarea-wrapper">
-  @if (label || extraLabelSlot) {
-    <div class="dasar-textarea-label-row">
-      @if (label) {
-        <label class="dasar-textarea-label">{{ label }}</label>
-      } @else {
-        <ng-content select="[label-slot]"></ng-content>
-      }
-      @if (extraLabelSlot) {
-        <ng-content select="[extra-label-slot]"></ng-content>
-      } @else if (labelRight) {
-        <span class="dasar-textarea-label-right">{{ labelRight }}</span>
-      }
-    </div>
-  }
-  <div
-    class="dasar-textarea-container appearance-{{ appearance }} size-{{ size }} radius-{{ radius }}"
-    [class.full-width]="fullWidth"
-    [class.disabled]="disabled"
-    [class.error]="error"
-    [ngClass]="containerClass"
-    [ngStyle]="containerStyle"
-  >
-    <textarea
-      [placeholder]="placeholder"
-      [disabled]="disabled"
-      [readonly]="readonly"
-      [rows]="rows"
-      [cols]="cols"
-      [ngClass]="textareaClass"
-      [ngStyle]="textareaStyle"
-      [value]="_value"
-      (input)="onInput($event)"
-      (blur)="onBlur()"
-      class="dasar-textarea-native"
-    ></textarea>
-  </div>
-  @if (hint) {
-    <div class="dasar-textarea-hint" [class.error]="error" [class.disabled]="disabled">
-      {{ hint }}
-    </div>
-  }
-</div>

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

@@ -1,189 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-textarea {
-  display: inline-flex;
-  flex-direction: column;
-
-  &.full-width {
-    width: 100%;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.dasar-textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--textarea-wrapper-gap, var(--space-1));
-}
-
-.dasar-textarea-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--textarea-label-font-size, var(--font-size-md));
-  font-weight: var(--textarea-label-font-weight, var(--font-weight-medium));
-  color: var(--textarea-label-color, var(--theme-text-primary-color));
-  line-height: var(--line-height-tight);
-
-  .dasar-textarea-label-right {
-    color: var(--textarea-label-right-color, var(--theme-text-secondary-color));
-    font-size: var(--textarea-label-right-font-size, var(--font-size-sm));
-    gap: var(--textarea-label-right-gap, var(--space-1));
-    display: inline-flex;
-    align-items: center;
-  }
-}
-
-.dasar-textarea-container {
-  background-color: var(--textarea-background, var(--theme-bg-hover-color));
-  padding: var(--textarea-padding, var(--space-base));
-  font-family: inherit;
-  display: inline-flex;
-  align-items: flex-start;
-  border-radius: var(--textarea-radius-sm, var(--radius-sm));
-  width: auto;
-  gap: var(--textarea-gap, var(--space-base));
-
-  &.appearance-outline {
-    border: 1px solid var(--textarea-outline-border, var(--theme-border-strong-color));
-    background-color: var(--textarea-outline-background, transparent);
-
-    &:hover:not(.disabled) {
-      border-color: var(--textarea-outline-hover-border, var(--theme-primary-color));
-    }
-
-    &:focus-within {
-      border-color: var(--textarea-outline-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--textarea-outline-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.appearance-filled {
-    border: 1px solid var(--textarea-filled-border, transparent);
-
-    &:hover:not(.disabled) {
-      background-color: var(--textarea-filled-hover-background, var(--theme-border-subtle-color));
-    }
-
-    &:focus-within {
-      background-color: var(--textarea-filled-focus-background, var(--theme-bg-surface-color));
-      border-color: var(--textarea-filled-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--textarea-filled-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.error {
-    border-color: var(--textarea-error-border, var(--theme-danger-color)) !important;
-
-    &:focus-within {
-      box-shadow: 0 0 0 3px var(--textarea-error-focus-ring, var(--theme-danger-surface-color));
-    }
-  }
-
-  &.disabled {
-    background-color: var(--textarea-disabled-background, var(--theme-bg-hover-color)) !important;
-    border-color: var(--textarea-disabled-border, transparent) !important;
-    cursor: not-allowed;
-    opacity: var(--textarea-disabled-opacity, 0.7);
-  }
-
-  &.size-sm {
-    padding: var(--textarea-padding-sm, var(--space-1));
-    font-size: var(--textarea-font-size-sm, var(--font-size-sm));
-
-    .dasar-textarea-native {
-      font-size: var(--textarea-font-size-sm, var(--font-size-sm));
-    }
-  }
-
-  &.size-md {
-    padding: var(--textarea-padding-md, var(--space-base));
-    font-size: var(--textarea-font-size-md, var(--font-size-base));
-
-    .dasar-textarea-native {
-      font-size: var(--textarea-font-size-md, var(--font-size-base));
-    }
-  }
-
-  &.size-lg {
-    padding: var(--textarea-padding-lg, var(--space-3));
-    font-size: var(--textarea-font-size-lg, var(--font-size-lg));
-
-    .dasar-textarea-native {
-      font-size: var(--textarea-font-size-lg, var(--font-size-lg));
-    }
-  }
-
-  &.radius-none {
-    border-radius: var(--textarea-radius-none, var(--radius-none));
-  }
-  &.radius-xs {
-    border-radius: var(--textarea-radius-xs, var(--radius-xs));
-  }
-  &.radius-sm {
-    border-radius: var(--textarea-radius-sm, var(--radius-sm));
-  }
-  &.radius-md {
-    border-radius: var(--textarea-radius-md, var(--radius-md));
-  }
-  &.radius-lg {
-    border-radius: var(--textarea-radius-lg, var(--radius-lg));
-  }
-  &.radius-xl {
-    border-radius: var(--textarea-radius-xl, var(--radius-xl));
-  }
-  &.radius-full {
-    border-radius: var(--textarea-radius-full, var(--radius-full));
-  }
-}
-
-.dasar-textarea-native {
-  flex: 1;
-  width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: inherit;
-  color: var(--textarea-color, var(--theme-text-primary-color));
-  padding: 0;
-  resize: vertical;
-
-  &::placeholder {
-    color: var(--textarea-placeholder-color, var(--theme-text-secondary-color));
-  }
-
-  &:disabled {
-    color: var(--textarea-disabled-color, var(--theme-text-disabled-color));
-    cursor: not-allowed;
-  }
-
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0 30px
-      var(--textarea-autofill-background, var(--theme-bg-default-color)) inset !important;
-    -webkit-text-fill-color: var(
-      --textarea-autofill-color,
-      var(--theme-text-primary-color)
-    ) !important;
-  }
-}
-
-.dasar-textarea-hint {
-  font-size: var(--textarea-hint-font-size, var(--font-size-sm));
-  color: var(--textarea-hint-color, var(--theme-text-secondary-color));
-  line-height: var(--line-height-normal);
-  margin-top: calc(var(--space-0-5) * -1);
-
-  &.error {
-    color: var(--textarea-hint-error-color, var(--theme-danger-color));
-  }
-
-  &.disabled {
-    opacity: var(--textarea-disabled-opacity, 0.7);
-    cursor: not-allowed;
-  }
-}

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

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

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

@@ -1,139 +0,0 @@
-import {
-  booleanAttribute,
-  Component,
-  HostBinding,
-  Input,
-  Output,
-  EventEmitter,
-  forwardRef,
-  ViewEncapsulation,
-  TemplateRef,
-  ChangeDetectorRef,
-  inject,
-  Directive,
-  ContentChild,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ScaleAttributeType } from '@models/type.model';
-
-export type DasarTextareaSizeType = Extract<ScaleAttributeType, 'sm' | 'md' | 'lg'>;
-export type DasarTextareaAppearanceType = 'outline' | 'filled';
-export type DasarTextareaRadiusType = ScaleAttributeType;
-
-@Directive({ selector: '[label-slot]', standalone: true })
-export class DasarTextareaLabelSlot {}
-@Directive({ selector: '[extra-label-slot]', standalone: true })
-export class DasarTextareaExtraLabelSlot {}
-
-@Component({
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DasarTextarea),
-      multi: true,
-    },
-  ],
-  encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, FormsModule],
-  styleUrls: ['./dasar-textarea.scss'],
-  templateUrl: './dasar-textarea.html',
-  selector: 'dasar-textarea',
-  standalone: true,
-})
-export class DasarTextarea implements ControlValueAccessor {
-  @ContentChild(DasarTextareaExtraLabelSlot) extraLabelSlot?: DasarTextareaExtraLabelSlot;
-  @ContentChild(DasarTextareaLabelSlot) labelSlot?: DasarTextareaLabelSlot;
-
-  @Input() appearance: DasarTextareaAppearanceType = 'outline';
-  @Input() labelRight?: string | TemplateRef<any>;
-  @Input() size: DasarTextareaSizeType = 'md';
-  @Input() radius: DasarTextareaRadiusType = 'md';
-  @Input() hint: string = '';
-  @Input() placeholder = '';
-  @Input() label?: string;
-  @Input() rows: number = 4;
-  @Input() cols: number = 20;
-  @Input({ transform: booleanAttribute }) fullWidth = false;
-  @Input({ transform: booleanAttribute }) disabled = false;
-  @Input({ transform: booleanAttribute }) readonly = false;
-  @Input({ transform: booleanAttribute }) error = false;
-
-  @Input() containerClass: string | string[] | Set<string> | { [klass: string]: any } = '';
-  @Input() textareaClass: string | string[] | Set<string> | { [klass: string]: any } = '';
-  @Input() hostClass: string | string[] | Set<string> | { [klass: string]: any } = '';
-  @Input() containerStyle: Record<string, any> | null = null;
-  @Input() textareaStyle: Record<string, any> | null = null;
-  @Input() hostStyle: Record<string, any> | null = null;
-
-  private cdr = inject(ChangeDetectorRef);
-  _value: any = '';
-
-  @Input()
-  get value(): any {
-    return this._value;
-  }
-  set value(val: any) {
-    if (this._value !== val) {
-      this._value = val ?? '';
-      this.cdr.markForCheck();
-    }
-  }
-
-  @Output() valueChange = new EventEmitter<any>();
-
-  @HostBinding('class.dasar-textarea') readonly baseClass = true;
-
-  @HostBinding('class.full-width')
-  get hasFullWidth(): boolean {
-    return this.fullWidth;
-  }
-
-  @HostBinding('class.disabled')
-  get isDisabled(): boolean {
-    return this.disabled;
-  }
-
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  writeValue(val: any): void {
-    this._value = val !== null && val !== undefined ? String(val) : '';
-    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();
-  }
-
-  onInput(event: Event): void {
-    const target = event.target as HTMLTextAreaElement;
-    const val = target.value;
-    this._value = val;
-    this.onChange(val);
-    this.valueChange.emit(val);
-  }
-
-  onBlur(): void {
-    this.onTouched();
-  }
-
-  isTemplate(value: any): boolean {
-    return value instanceof TemplateRef;
-  }
-}
-
-export const DasarTextareaComponent = [
-  DasarTextareaExtraLabelSlot,
-  DasarTextareaLabelSlot,
-  DasarTextarea,
-] as const;