dasar-ui 1.1.0 → 1.3.0

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

@@ -1,24 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-:host {
-  justify-content: center;
-  vertical-align: middle;
-  display: inline-flex;
-  align-items: center;
-  line-height: 0;
-}
-.dasar-icon {
-  justify-content: center;
-  display: inline-flex;
-  align-items: center;
-  line-height: 0;
-  svg {
-    display: block;
-    flex-shrink: 0;
-  }
-  &.fluid {
-    height: fit-content;
-    width: fit-content;
-    padding: none;
-  }
-}

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

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

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

@@ -1,97 +0,0 @@
-import {
-  ViewEncapsulation,
-  ChangeDetectorRef,
-  booleanAttribute,
-  HostBinding,
-  Component,
-  inject,
-  OnInit,
-  Input,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-
-import { DASAR_THEME_PROVIDER } from '../dasar-theme-provider/dasar-theme-provider';
-import { DasarThemeService } from '../../services/theme.service';
-import { ScaleAttributeType } from '../../models/type.model';
-import { resolveThemeDefault } from '../../utils/common';
-import { ICON_REGISTRY } from './dasar-icon.registry';
-
-export type DasarIconSizeType = ScaleAttributeType | number;
-
-export interface DasarIconConfig {
-  size?: DasarIconSizeType;
-  stroke?: number;
-  fluid?: boolean;
-  color?: string;
-  name?: string;
-}
-
-@Component({
-  encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./dasar-icon.scss'],
-  templateUrl: './dasar-icon.html',
-  imports: [CommonModule],
-  selector: 'dasar-icon',
-  standalone: true,
-})
-export class DasarIcon implements OnInit {
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-  private readonly cdr = inject(ChangeDetectorRef);
-  private sanitizer = inject(DomSanitizer);
-
-  @Input({ transform: booleanAttribute }) fluid = resolveThemeDefault(
-    'icon',
-    'fluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault('icon', 'size', 'md', this.themeProvider, this.themeService);
-  @Input() color = resolveThemeDefault(
-    'icon',
-    'color',
-    'currentColor',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() stroke = resolveThemeDefault('icon', 'stroke', 2, this.themeProvider, this.themeService);
-  @Input() name = resolveThemeDefault('icon', 'name', '', this.themeProvider, this.themeService);
-
-  @HostBinding('class')
-  get hostClasses(): string {
-    return `dasar-icon size-${this.size}`;
-  }
-  get computedSize(): string | number {
-    switch (this.size) {
-      case 'md':
-        return 24;
-      case 'lg':
-        return 32;
-      case 'xl':
-        return 40;
-      default:
-        return typeof this.size === 'number' ? this.size : 16; // sm and xs
-    }
-  }
-  get svgContent(): SafeHtml {
-    const registry = ICON_REGISTRY;
-    const nodes = registry[this.name];
-    if (!nodes) return '';
-    const inner = nodes
-      .map(([tag, attrs]) => {
-        const attrsStr = Object.entries(attrs)
-          .map(([k, v]) => `${k}="${v}"`)
-          .join(' ');
-        return `<${tag} ${attrsStr}/>`;
-      })
-      .join('');
-
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${this.computedSize}" height="${+this.computedSize - 4}" viewBox="0 0 24 24" fill="none" stroke="${this.color}" stroke-width="${this.stroke}" stroke-linecap="round" stroke-linejoin="round">${inner}</svg>`;
-    return this.sanitizer.bypassSecurityTrustHtml(svg);
-  }
-  ngOnInit(): void {}
-}
-
-export const DasarIconComponent = [DasarIcon] as const;

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

@@ -1,54 +0,0 @@
-<div class="dasar-input-wrapper" [ngClass]="hostClass" [ngStyle]="hostStyle">
-  @if (label || labelRight) {
-    <div class="dasar-input-label-row">
-      @if (label) {
-        <label class="dasar-input-label">{{ label }}</label>
-      }
-      @if (labelRight || extraLabelSlot) {
-        <div class="dasar-input-label-right">
-          @if (extraLabelSlot) {
-            <ng-content select="[extra-label-slot]"></ng-content>
-          } @else {
-            <span>{{ labelRight }}</span>
-          }
-        </div>
-      }
-    </div>
-  }
-  <div
-    class="dasar-input-container appearance-{{ appearance }} size-{{ size }} radius-{{ radius }}"
-    [class.hide-overflow]="hideOverflow"
-    [class.full-width]="fullWidth"
-    [class.disabled]="disabled"
-    [class.fluid]="fluid"
-    [class.error]="error"
-    [ngClass]="containerClass"
-    [ngStyle]="containerStyle"
-  >
-    <ng-content select="[prefix-slot]"></ng-content>
-    <input
-      [placeholder]="placeholder"
-      [ngClass]="inputClass"
-      [ngStyle]="inputStyle"
-      [disabled]="disabled"
-      [readonly]="readonly"
-      [value]="value"
-      [type]="type"
-      (input)="onInput($event)"
-      (blur)="onBlur()"
-      class="dasar-input-native"
-    />
-    <ng-content select="[suffix-slot]"></ng-content>
-  </div>
-  @if (hint) {
-    <div
-      class="dasar-input-hint"
-      [class.disabled]="disabled"
-      [class.error]="error"
-      [ngClass]="hintClass"
-      [ngStyle]="hintStyle"
-    >
-      {{ hint }}
-    </div>
-  }
-</div>

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

@@ -1,281 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-input {
-  display: inline-flex;
-  flex-direction: column;
-  position: relative;
-  width: fit-content;
-
-  &.full-width {
-    width: 100%;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.dasar-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--input-wrapper-gap, var(--space-1));
-  position: relative;
-}
-
-.dasar-input-label-row {
-  font-weight: var(--input-label-font-weight, var(--font-weight-medium));
-  color: var(--input-label-color, var(--theme-text-primary-color));
-  line-height: var(--line-height-tight);
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-
-  .dasar-input-label {
-    font-size: var(--input-label-font-size, var(--font-size-md));
-  }
-
-  .dasar-input-label-right {
-    color: var(--input-label-right-color, var(--theme-text-secondary-color));
-    font-size: var(--input-label-right-font-size, var(--font-size-sm));
-    font-weight: var(--font-weight-regular);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-  }
-}
-
-.dasar-input-container {
-  box-sizing: border-box;
-  font-family: inherit;
-  display: inline-flex;
-  align-items: center;
-  width: auto;
-  gap: var(--input-gap, var(--space-base));
-  color: var(--input-color, var(--theme-text-primary-color));
-  border-radius: var(--input-radius-sm, var(--radius-sm));
-
-  &.hide-overflow {
-    overflow: hidden;
-  }
-
-  &.size-xs {
-    padding: 0 var(--input-padding-horizontal-xs, var(--space-base));
-    height: var(--input-height-xs, var(--space-6));
-    font-size: var(--font-size-xs);
-
-    &:has([prefix-slot]) {
-      padding-left: 0;
-      // .dasar-input-native {
-      //   padding-left: var(--input-padding-horizontal-xs, var(--space-base));
-      // }
-    }
-
-    &:has([suffix-slot]) {
-      padding-right: 0;
-      // .dasar-input-native {
-      //   padding-right: var(--input-padding-horizontal-xs, var(--space-base));
-      // }
-    }
-  }
-
-  &.size-sm {
-    padding: 0 var(--input-padding-horizontal-sm, var(--space-3));
-    height: var(--input-height-sm, var(--space-8));
-    font-size: var(--font-size-sm);
-
-    &:has([prefix-slot]) {
-      padding-left: 0;
-      // .dasar-input-native {
-      //   padding-left: var(--input-padding-horizontal-sm, var(--space-3));
-      // }
-    }
-
-    &:has([suffix-slot]) {
-      padding-right: 0;
-      // .dasar-input-native {
-      //   padding-right: var(--input-padding-horizontal-sm, var(--space-3));
-      // }
-    }
-  }
-
-  &.size-md {
-    padding: 0 var(--input-padding-horizontal-md, var(--space-4));
-    height: var(--input-height-md, var(--space-10));
-    font-size: var(--font-size-base);
-
-    &:has([prefix-slot]) {
-      padding-left: 0;
-      // .dasar-input-native {
-      //   padding-left: var(--input-padding-horizontal-md, var(--space-4));
-      // }
-    }
-
-    &:has([suffix-slot]) {
-      padding-right: 0;
-      // .dasar-input-native {
-      //   padding-right: var(--input-padding-horizontal-md, var(--space-4));
-      // }
-    }
-  }
-
-  &.size-lg {
-    padding: 0 var(--input-padding-horizontal-lg, var(--space-5));
-    height: var(--input-height-lg, var(--space-12));
-    font-size: var(--font-size-lg);
-
-    &:has([prefix-slot]) {
-      padding-left: 0;
-      // .dasar-input-native {
-      //   padding-left: var(--input-padding-horizontal-lg, var(--space-5));
-      // }
-    }
-
-    &:has([suffix-slot]) {
-      padding-right: 0;
-      // .dasar-input-native {
-      //   padding-right: var(--input-padding-horizontal-lg, var(--space-5));
-      // }
-    }
-  }
-
-  &.size-xl {
-    padding: 0 var(--input-padding-horizontal-xl, var(--space-6));
-    height: var(--input-height-xl, var(--space-16));
-    font-size: var(--font-size-xl);
-
-    &:has([prefix-slot]) {
-      padding-left: 0;
-      // .dasar-input-native {
-      //   padding-left: var(--input-padding-horizontal-xl, var(--space-6));
-      // }
-    }
-
-    &:has([suffix-slot]) {
-      padding-right: 0;
-      // .dasar-input-native {
-      //   padding-right: var(--input-padding-horizontal-xl, var(--space-6));
-      // }
-    }
-  }
-
-  &.radius-none {
-    border-radius: var(--input-radius-none, var(--radius-none));
-  }
-  &.radius-xs {
-    border-radius: var(--input-radius-xs, var(--radius-xs));
-  }
-  &.radius-sm {
-    border-radius: var(--input-radius-sm, var(--radius-sm));
-  }
-  &.radius-md {
-    border-radius: var(--input-radius-md, var(--radius-md));
-  }
-  &.radius-lg {
-    border-radius: var(--input-radius-lg, var(--radius-lg));
-  }
-  &.radius-xl {
-    border-radius: var(--input-radius-xl, var(--radius-xl));
-  }
-  &.radius-full {
-    border-radius: var(--input-radius-full, var(--radius-full));
-  }
-
-  &.appearance-outline {
-    background-color: var(--input-outline-bg, transparent);
-    border: 1px solid var(--input-outline-border, var(--theme-border-strong-color));
-
-    &:hover:not(.disabled) {
-      border-color: var(--input-outline-hover-border, var(--theme-primary-color));
-    }
-
-    &:focus-within {
-      border-color: var(--input-outline-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--input-outline-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.appearance-filled {
-    background-color: var(--input-filled-bg, var(--theme-bg-hover-color));
-    border: 1px solid var(--input-filled-border, transparent);
-
-    &:hover:not(.disabled) {
-      background-color: var(--input-filled-hover-bg, var(--theme-border-subtle-color));
-    }
-
-    &:focus-within {
-      background-color: var(--input-filled-focus-bg, var(--theme-bg-surface-color));
-      border-color: var(--input-filled-focus-border, var(--theme-primary-color));
-      box-shadow: 0 0 0 3px var(--input-filled-focus-ring, var(--theme-primary-surface-color));
-    }
-  }
-
-  &.error {
-    border-color: var(--input-error-border, var(--theme-danger-color)) !important;
-
-    &:focus-within {
-      box-shadow: 0 0 0 3px var(--input-error-focus-ring, var(--theme-danger-surface-color));
-    }
-  }
-
-  &.disabled {
-    background-color: var(--input-disabled-bg, var(--theme-bg-hover-color)) !important;
-    border-color: var(--input-disabled-border, transparent) !important;
-    cursor: not-allowed;
-    opacity: var(--input-disabled-opacity, 0.6);
-    pointer-events: none;
-  }
-
-  &.fluid {
-    padding: 0;
-  }
-
-  &:has([suffix]) {
-    padding-right: 0;
-  }
-
-  &:has([prefix]) {
-    padding-left: 0;
-  }
-}
-
-.dasar-input-native {
-  flex: 1;
-  width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  padding: 0;
-
-  &::placeholder {
-    color: var(--input-placeholder-color, var(--theme-text-secondary-color));
-  }
-
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0 30px var(--input-autofill-bg, var(--theme-bg-default-color)) inset !important;
-    -webkit-text-fill-color: var(
-      --input-autofill-color,
-      var(--theme-text-primary-color)
-    ) !important;
-  }
-}
-
-.dasar-input-hint {
-  font-size: var(--input-hint-font-size, var(--font-size-xs));
-  color: var(--input-hint-color, var(--theme-text-secondary-color));
-  line-height: var(--line-height-normal);
-  margin-top: calc(var(--space-0-5) * -1);
-
-  &.error {
-    color: var(--input-hint-error-color, var(--theme-danger-color));
-  }
-
-  &.disabled {
-    opacity: var(--input-disabled-opacity, 0.6);
-    cursor: not-allowed;
-  }
-}

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

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