dasar-ui 1.1.0 → 1.3.0

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

@@ -1,323 +0,0 @@
-import {
-  booleanAttribute,
-  Component,
-  HostBinding,
-  Input,
-  forwardRef,
-  ViewEncapsulation,
-  TemplateRef,
-  EventEmitter,
-  Output,
-  inject,
-  ChangeDetectorRef,
-  Directive,
-  ContentChild,
-} 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 { resolveThemeDefault } from '../../utils/common';
-
-export type DasarInputType = 'text' | 'password' | 'email' | 'number' | 'search' | 'url' | 'tel';
-export type DasarInputMaskType = 'thousand' | 'date' | 'decimal' | ((val: string) => string);
-export type DasarInputSizeType = Extract<ScaleAttributeType, 'sm' | 'md' | 'lg'>;
-export type DasarInputAppearanceType = 'outline' | 'filled';
-export type DasarInputRadiusType = ScaleAttributeType;
-
-export interface DasarInputConfig {
-  appearance?: DasarInputAppearanceType;
-  labelRight?: string;
-  radius?: DasarInputRadiusType;
-  size?: DasarInputSizeType;
-  type?: DasarInputType;
-  mask?: DasarInputMaskType;
-  hint?: string;
-  placeholder?: string;
-  label?: string;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  fluid?: boolean;
-  error?: boolean;
-  containerClass?: ClassType;
-  inputClass?: ClassType;
-  hostClass?: ClassType;
-  hintClass?: ClassType;
-  containerStyle?: StyleType;
-  inputStyle?: StyleType;
-  hostStyle?: StyleType;
-  hintStyle?: StyleType;
-  hideOverflow?: boolean;
-}
-
-@Directive({ selector: '[extra-label-slot]', standalone: true })
-export class DasarInputExtraLabelSlot {}
-@Directive({ selector: '[prefix-slot]', standalone: true })
-export class DasarInputPrefixSlot {}
-@Directive({ selector: '[suffix-slot]', standalone: true })
-export class DasarInputSuffixSlot {}
-
-@Component({
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DasarInput),
-      multi: true,
-    },
-  ],
-  encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, FormsModule],
-  templateUrl: './dasar-input.html',
-  styleUrls: ['./dasar-input.scss'],
-  selector: 'dasar-input',
-  standalone: true,
-})
-export class DasarInput implements ControlValueAccessor {
-  @ContentChild(DasarInputExtraLabelSlot) extraLabelSlot?: DasarInputExtraLabelSlot;
-
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-  private cdr = inject(ChangeDetectorRef);
-
-  @Input() appearance: DasarInputAppearanceType = resolveThemeDefault(
-    'input',
-    'appearance',
-    'outline',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'label-right' }) labelRight = resolveThemeDefault(
-    'input',
-    'labelRight',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() radius = resolveThemeDefault(
-    'input',
-    'radius',
-    'md',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault('input', 'size', 'md', this.themeProvider, this.themeService);
-  @Input() type = resolveThemeDefault(
-    'input',
-    'type',
-    'text',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() mask = resolveThemeDefault(
-    'input',
-    'mask',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() hint = resolveThemeDefault('input', 'hint', '', this.themeProvider, this.themeService);
-  @Input() placeholder = resolveThemeDefault(
-    'input',
-    'placeholder',
-    '',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() label = resolveThemeDefault(
-    'input',
-    'label',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'full-width', transform: booleanAttribute }) fullWidth = resolveThemeDefault(
-    'input',
-    'fullWidth',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) disabled = resolveThemeDefault(
-    'input',
-    'disabled',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) readonly = resolveThemeDefault(
-    'input',
-    'readonly',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) fluid = resolveThemeDefault(
-    'input',
-    'fluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) error = resolveThemeDefault(
-    'input',
-    'error',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'container-class' }) containerClass = resolveThemeDefault(
-    'input',
-    'containerClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'input-class' }) inputClass = resolveThemeDefault(
-    'input',
-    'inputClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'host-class' }) hostClass = resolveThemeDefault(
-    'input',
-    'hostClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'hint-class' }) hintClass = resolveThemeDefault(
-    'input',
-    'hintClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'container-style' }) containerStyle = resolveThemeDefault(
-    'input',
-    'containerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'input-style' }) inputStyle = resolveThemeDefault(
-    'input',
-    'inputStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'host-style' }) hostStyle = resolveThemeDefault(
-    'input',
-    'hostStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'hint-style' }) hintStyle = resolveThemeDefault(
-    'input',
-    'hintStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'hide-overflow', transform: booleanAttribute }) hideOverflow =
-    resolveThemeDefault('card', 'hideOverflow', false, this.themeProvider, this.themeService);
-
-  onTouched: any = () => {};
-  onChange: any = () => {};
-  private _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')
-  get hostClasses(): string {
-    const classes = ['dasar-input'];
-    if (this.fullWidth) classes.push('full-width');
-    if (this.disabled) classes.push('disabled');
-    return classes.join(' ');
-  }
-
-  private formatValue(val: string): string {
-    if (!this.mask || val === null || val === undefined) {
-      return val;
-    }
-    const stringVal = String(val);
-    if (typeof this.mask === 'function') {
-      return this.mask(stringVal);
-    }
-    if (this.mask === 'thousand') {
-      const digits = stringVal.replace(/\D/g, '');
-      return digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-    }
-    if (this.mask === 'decimal') {
-      let clean = stringVal.replace(/[^0-9,]/g, '');
-      const parts = clean.split(',');
-      let integerPart = parts[0];
-      let decimalPart = parts.length > 1 ? ',' + parts[1].substring(0, 5) : '';
-      if (integerPart) {
-        integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-      }
-      return integerPart + decimalPart;
-    }
-    if (this.mask === 'date') {
-      const digits = stringVal.replace(/\D/g, '').substring(0, 8);
-      if (digits.length >= 5) {
-        return `${digits.substring(0, 2)}/${digits.substring(2, 4)}/${digits.substring(4)}`;
-      } else if (digits.length >= 3) {
-        return `${digits.substring(0, 2)}/${digits.substring(2)}`;
-      }
-      return digits;
-    }
-    return stringVal;
-  }
-  writeValue(value: any): void {
-    // this.value = value ?? '';
-    const rawString = value !== null && value !== undefined ? String(value) : '';
-    this._value = this.formatValue(rawString);
-    this.cdr.markForCheck();
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-  onInput(event: Event): void {
-    // const val = (event.target as HTMLInputElement).value;
-    // this.value = val;
-    // this.onChange(val);
-    const inputEl = event.target as HTMLInputElement;
-    const formattedVal = this.formatValue(inputEl.value);
-    inputEl.value = formattedVal;
-    this._value = formattedVal;
-    this.onChange(formattedVal);
-    this.valueChange.emit(formattedVal);
-  }
-  onBlur(): void {
-    this.onTouched();
-  }
-}
-
-export const DasarInputComponent = [
-  DasarInput,
-  DasarInputExtraLabelSlot,
-  DasarInputPrefixSlot,
-  DasarInputSuffixSlot,
-] as const;

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

@@ -1,63 +0,0 @@
-<div
-  class="dasar-menu-wrapper"
-  [ngClass]="containerClass"
-  [ngStyle]="containerStyle"
-  [class.fluid]="fluid"
->
-  <div
-    class="appearance-{{ appearance }} size-{{ size }} radius-{{ radius }}"
-    (click)="toggle($event)"
-    [class.dasar-menu-trigger]="true"
-    [class.disabled]="disabled"
-    [class.fluid]="fluid"
-  >
-    <ng-content select="[prefix-slot]"></ng-content>
-    <div class="dasar-menu-label-container">
-      @if (hasMenuLabel) {
-        <ng-content select="[menu-label-slot]"></ng-content>
-      } @else if (label) {
-        <span class="dasar-menu-text-label">{{ label }}</span>
-      } @else {
-        <ng-content></ng-content>
-      }
-    </div>
-    <ng-content select="[suffix-slot]"></ng-content>
-  </div>
-  @if (isOpen() && !disabled) {
-    <div
-      class="dasar-menu-panel placement-{{ placement }}"
-      [ngClass]="panelClass"
-      [ngStyle]="panelStyle"
-    >
-      @for (item of items; track item.value; let i = $index) {
-        @if (item.divider) {
-          <div class="dasar-menu-divider"></div>
-        } @else {
-          <div
-            class="dasar-menu-item"
-            [class.disabled]="item.disabled"
-            [ngClass]="itemClass"
-            (click)="onItemSelect(item, $event)"
-          >
-            @if (hasMenuItem) {
-              <!-- <ng-container
-                *ngTemplateOutlet="providedMenuItem; context: { $implicit: item,  index: i }"
-              ></ng-container> -->
-              <ng-container
-                *ngTemplateOutlet="
-                  providedMenuItem!.templateRef;
-                  context: { $implicit: item, index: i }
-                "
-              ></ng-container>
-            } @else {
-              @if (item.iconName) {
-                <dasar-icon [name]="item.iconName" size="sm"></dasar-icon>
-              }
-              <span class="dasar-menu-item-label">{{ item.label }}</span>
-            }
-          </div>
-        }
-      }
-    </div>
-  }
-</div>

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

@@ -1,195 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-menu {
-  display: inline-flex;
-  position: relative;
-}
-
-.dasar-menu-wrapper {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.dasar-menu-trigger {
-  padding: 0 var(--menu-trigger-padding-horizontal, var(--space-base));
-  display: inline-flex;
-  align-items: center;
-  gap: var(--menu-trigger-gap, var(--space-base));
-  cursor: pointer;
-  user-select: none;
-
-  &.appearance-outline {
-    border: 1px solid var(--menu-outline-border, var(--theme-border-strong-color));
-    background-color: var(--menu-outline-background, transparent);
-
-    &:hover:not(.disabled) {
-      border-color: var(--menu-outline-hover-border, var(--theme-primary-color));
-    }
-
-    &.open,
-    &:focus-within {
-      border-color: var(--menu-outline-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--menu-outline-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.appearance-filled {
-    border: 1px solid var(--menu-filled-border, transparent);
-    background-color: var(--menu-filled-background, var(--theme-bg-hover-color));
-
-    &:hover:not(.disabled) {
-      background-color: var(--menu-filled-hover-background, var(--theme-border-subtle-color));
-    }
-
-    &.open,
-    &:focus-within {
-      background-color: var(--menu-filled-focus-background, var(--theme-bg-surface-color));
-      border-color: var(--menu-filled-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--menu-filled-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.disabled {
-    opacity: var(--menu-disabled-opacity, 0.6);
-    cursor: not-allowed;
-  }
-
-  &.size-xs {
-    height: var(--select-height-xs, var(--space-6));
-    font-size: var(--font-size-xs);
-  }
-  &.size-sm {
-    height: var(--menu-height-sm, var(--space-8));
-    font-size: var(--menu-font-size-sm, var(--font-size-sm));
-  }
-  &.size-md {
-    height: var(--menu-height-md, var(--space-10));
-    font-size: var(--menu-font-size-md, var(--font-size-base));
-  }
-  &.size-lg {
-    height: var(--menu-height-lg, var(--space-12));
-    font-size: var(--menu-font-size-lg, var(--font-size-lg));
-  }
-  &.size-xl {
-    height: var(--select-height-xl, var(--space-16));
-  }
-
-  &.radius-none {
-    border-radius: var(--menu-radius-none, var(--radius-none));
-  }
-  &.radius-xs {
-    border-radius: var(--menu-radius-xs, var(--radius-xs));
-  }
-  &.radius-sm {
-    border-radius: var(--menu-radius-sm, var(--radius-sm));
-  }
-  &.radius-md {
-    border-radius: var(--menu-radius-md, var(--radius-md));
-  }
-  &.radius-lg {
-    border-radius: var(--menu-radius-lg, var(--radius-lg));
-  }
-  &.radius-xl {
-    border-radius: var(--menu-radius-xl, var(--radius-xl));
-  }
-  &.radius-full {
-    border-radius: var(--menu-radius-full, var(--radius-full));
-  }
-
-  &.fluid {
-    padding: 0 !important;
-    margin: 0 !important;
-    gap: 0 !important;
-  }
-}
-
-.dasar-menu-panel {
-  background-color: var(--menu-panel-background, var(--theme-bg-surface-color));
-  border: 1px solid var(--menu-panel-border, var(--theme-border-subtle-color));
-  border-radius: var(--menu-panel-radius, var(--radius-md));
-  min-width: var(--menu-panel-min-width, 180px);
-  position: absolute;
-  box-shadow: var(
-    --menu-panel-shadow,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1)
-  );
-  padding: var(--menu-panel-padding, var(--space-1));
-  z-index: var(--menu-panel-z-index, 100);
-  display: flex;
-  flex-direction: column;
-  animation: fadeIn 0.15s ease-out forwards;
-
-  &.placement-bottom-start {
-    top: calc(100% + var(--menu-panel-offset, 6px));
-    left: 0;
-  }
-  &.placement-bottom-end {
-    top: calc(100% + var(--menu-panel-offset, 6px));
-    right: 0;
-  }
-  &.placement-top-start {
-    bottom: calc(100% + var(--menu-panel-offset, 6px));
-    left: 0;
-  }
-  &.placement-top-end {
-    bottom: calc(100% + var(--menu-panel-offset, 6px));
-    right: 0;
-  }
-}
-
-.dasar-menu-item {
-  padding: var(--menu-item-padding-vertical, var(--space-base))
-    var(--menu-item-padding-horizontal, var(--space-3));
-  color: var(--menu-item-color, var(--theme-text-primary-color));
-  border-radius: var(--menu-item-radius, var(--radius-xs));
-  gap: var(--menu-item-gap, var(--space-base));
-  transition: background-color 0.15s ease;
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-
-  .size-xs & {
-    font-size: var(--font-size-xs);
-  }
-  .size-sm & {
-    font-size: var(--font-size-sm);
-  }
-  .size-md & {
-    font-size: var(--font-size-base);
-  }
-  .size-lg & {
-    font-size: var(--font-size-lg);
-  }
-  .size-xl & {
-    font-size: var(--font-size-xl);
-  }
-
-  &:hover:not(.disabled) {
-    background-color: var(--menu-item-hover-background, var(--theme-bg-hover-color));
-    color: var(--menu-item-hover-color, var(--theme-text-primary-color));
-  }
-
-  &.disabled {
-    color: var(--menu-item-disabled-color, var(--theme-text-disabled-color));
-    cursor: not-allowed;
-  }
-}
-
-.dasar-menu-divider {
-  height: var(--menu-divider-height, 1px);
-  background-color: var(--menu-divider-background, var(--theme-border-subtle-color));
-  margin: var(--menu-divider-margin-vertical, var(--space-1)) 0;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

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

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