dasar-ui 1.1.0 → 1.3.0

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

@@ -1,184 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-card {
-  display: block;
-
-  &.full-width {
-    display: flex;
-    width: 100%;
-  }
-}
-
-.dasar-card-container {
-  background-color: var(--card-background, var(--theme-bg-surface-color));
-  flex-direction: column;
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-
-  &.hide-overflow {
-    overflow: hidden;
-  }
-
-  &.size-xs {
-    font-size: var(--card-font-size-xs, var(--font-size-xs));
-  }
-  &.size-sm {
-    font-size: var(--card-font-size-sm, var(--font-size-sm));
-  }
-  &.size-md {
-    font-size: var(--card-font-size-md, var(--font-size-base));
-  }
-  &.size-lg {
-    font-size: var(--card-font-size-lg, var(--font-size-lg));
-  }
-  &.size-xl {
-    font-size: var(--card-font-size-xl, var(--font-size-xl));
-  }
-
-  &.appearance-outline {
-    border: 1px solid var(--card-outline-border, var(--theme-border-strong-color));
-  }
-
-  &.appearance-borderless {
-    border: none;
-  }
-
-  &.appearance-elevated {
-    border: 1px solid var(--card-elevated-border, var(--theme-border-strong-color));
-    box-shadow: var(
-      --card-elevated-shadow,
-      0 10px 15px -3px rgba(0, 0, 0, 0.05),
-      0 4px 6px -4px rgba(0, 0, 0, 0.03)
-    );
-  }
-
-  &.radius-none {
-    border-radius: var(--card-radius-none, var(--radius-none));
-  }
-  &.radius-xs {
-    border-radius: var(--card-radius-xs, var(--radius-xs));
-  }
-  &.radius-sm {
-    border-radius: var(--card-radius-sm, var(--radius-sm));
-  }
-  &.radius-md {
-    border-radius: var(--card-radius-md, var(--radius-md));
-  }
-  &.radius-lg {
-    border-radius: var(--card-radius-lg, var(--radius-lg));
-  }
-  &.radius-xl {
-    border-radius: var(--card-radius-xl, var(--radius-xl));
-  }
-  &.radius-full {
-    border-radius: var(--card-radius-full, var(--radius-full));
-  }
-
-  &.spacing-normal {
-    .dasar-card-header {
-      padding: var(--card-normal-header-padding-vertical, var(--space-base))
-        var(--card-normal-header-padding-horizontal, var(--space-4));
-    }
-    .dasar-card-body {
-      padding: var(--card-normal-body-padding-vertical, var(--space-4))
-        var(--card-normal-body-padding-horizontal, var(--space-4));
-    }
-    .dasar-card-actions {
-      padding: var(--card-normal-actions-padding, var(--space-4));
-    }
-  }
-
-  &.spacing-compact {
-    .dasar-card-header {
-      padding: var(--card-compact-header-padding, var(--space-base));
-    }
-    .dasar-card-body {
-      padding: var(--card-compact-body-padding, var(--space-base));
-    }
-    .dasar-card-actions {
-      padding: var(--card-compact-actions-padding, var(--space-base));
-    }
-  }
-
-  &.fluid {
-    .dasar-card-header,
-    .dasar-card-body,
-    .dasar-card-caption,
-    .dasar-card-actions {
-      padding: 0 !important;
-      margin: 0 !important;
-    }
-  }
-}
-
-.dasar-card-header {
-  border-bottom: 1px solid var(--card-header-border, var(--theme-border-strong-color));
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-
-  .dasar-card-title {
-    color: var(--card-title-color, var(--theme-text-primary-color));
-    font-weight: var(--card-title-font-weight, var(--font-weight-semibold));
-    font-size: inherit;
-    margin: 0;
-  }
-
-  .dasar-card-header-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .dasar-card-extra-header,
-  .dasar-card-close-wrapper {
-    flex-shrink: 0;
-  }
-
-  .appearance-borderless & {
-    border: none;
-  }
-
-  &.fluid {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-}
-
-.dasar-card-body {
-  color: var(--card-body-color, var(--theme-text-primary-color));
-  line-height: var(--line-height-normal);
-  flex: 1;
-
-  &.fluid {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-}
-
-.dasar-card-caption {
-  color: var(--card-caption-color, var(--theme-text-secondary-color));
-  font-size: var(--card-caption-font-size, var(--font-size-xs));
-
-  &.fluid {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-}
-
-.dasar-card-actions {
-  background-color: var(--card-actions-background, transparent);
-  align-items: center;
-  border-top: none;
-  display: flex;
-  gap: var(--card-actions-gap, 12px);
-
-  &.fluid {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  > * {
-    flex: 1;
-  }
-}

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

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

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

@@ -1,294 +0,0 @@
-import {
-  booleanAttribute,
-  ViewEncapsulation,
-  ChangeDetectorRef,
-  EventEmitter,
-  ContentChild,
-  HostBinding,
-  Component,
-  Directive,
-  Output,
-  inject,
-  signal,
-  Input,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { DASAR_THEME_PROVIDER } from '../dasar-theme-provider/dasar-theme-provider';
-import { ClassType, ScaleAttributeType, StyleType } 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 DasarCardSize = Extract<ScaleAttributeType, 'sm' | 'md' | 'lg'>;
-export type DasarCardAppearance = 'outline' | 'borderless' | 'elevated';
-export type DasarCardSpacing = 'normal' | 'compact';
-export type DasarCardRadius = ScaleAttributeType;
-
-export interface DasarCardConfig {
-  appearance?: 'outline' | 'borderless' | 'elevated';
-  spacing?: 'normal' | 'compact';
-  radius?: ScaleAttributeType; // Or DasarCardRadius
-  size?: Extract<ScaleAttributeType, 'sm' | 'md' | 'lg'>; // Or DasarCardSize
-  label?: string;
-  contentHeaderStyle?: StyleType;
-  extraHeaderStyle?: StyleType;
-  containerStyle?: StyleType;
-  captionStyle?: StyleType;
-  headerStyle?: StyleType;
-  actionStyle?: StyleType;
-  bodyStyle?: StyleType;
-  contentHeaderClass?: ClassType;
-  extraHeaderClass?: ClassType;
-  containerClass?: ClassType;
-  captionClass?: ClassType;
-  actionClass?: ClassType;
-  headerClass?: ClassType;
-  bodyClass?: ClassType;
-  captionFluid?: boolean;
-  hideOverflow?: boolean;
-  headerFluid?: boolean;
-  actionFluid?: boolean;
-  bodyFluid?: boolean;
-  fullWidth?: boolean;
-  closable?: boolean;
-  fluid?: boolean;
-}
-
-@Directive({ selector: '[extra-header-slot]', standalone: true })
-export class DasarCardExtraHeaderSlot {}
-@Directive({ selector: '[caption-slot]', standalone: true })
-export class DasarCardCaptionSlot {}
-@Directive({ selector: '[header-slot]', standalone: true })
-export class DasarCardHeaderSlot {}
-@Directive({ selector: '[action-slot]', standalone: true })
-export class DasarCardActionSlot {}
-
-@Component({
-  imports: [CommonModule, DasarButton, DasarIcon],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './dasar-card.html',
-  styleUrls: ['./dasar-card.scss'],
-  selector: 'dasar-card',
-  standalone: true,
-})
-export class DasarCard {
-  @ContentChild(DasarCardExtraHeaderSlot) providedExtraHeader?: DasarCardExtraHeaderSlot;
-  @ContentChild(DasarCardCaptionSlot) providedCaption?: DasarCardCaptionSlot;
-  @ContentChild(DasarCardHeaderSlot) providedHeader?: DasarCardHeaderSlot;
-  @ContentChild(DasarCardActionSlot) providedAction?: DasarCardActionSlot;
-
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-
-  private cdr = inject(ChangeDetectorRef);
-  isClosed = signal<boolean>(false);
-
-  @Input() appearance = resolveThemeDefault(
-    'card',
-    'appearance',
-    'elevated',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() spacing = resolveThemeDefault(
-    'card',
-    'spacing',
-    'normal',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() radius = resolveThemeDefault(
-    'card',
-    'radius',
-    'lg',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault('card', 'size', 'md', this.themeProvider, this.themeService);
-  @Input() label = resolveThemeDefault(
-    'card',
-    'label',
-    undefined,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'content-header-style' }) contentHeaderStyle = resolveThemeDefault(
-    'card',
-    'contentHeaderStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'extra-header-style' }) extraHeaderStyle = resolveThemeDefault(
-    'card',
-    'extraHeaderStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'container-style' }) containerStyle = resolveThemeDefault(
-    'card',
-    'containerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'caption-style' }) captionStyle = resolveThemeDefault(
-    'card',
-    'captionStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'header-style' }) headerStyle = resolveThemeDefault(
-    'card',
-    'headerStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'action-style' }) actionStyle = resolveThemeDefault(
-    'card',
-    'actionStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'body-style' }) bodyStyle = resolveThemeDefault(
-    'card',
-    'bodyStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'content-header-class' }) contentHeaderClass = resolveThemeDefault(
-    'card',
-    'contentHeaderClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'extra-header-class' }) extraHeaderClass = resolveThemeDefault(
-    'card',
-    'extraHeaderClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'container-class' }) containerClass = resolveThemeDefault(
-    'card',
-    'containerClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'caption-class' }) captionClass = resolveThemeDefault(
-    'card',
-    'captionClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'action-class' }) actionClass = resolveThemeDefault(
-    'card',
-    'actionClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'header-class' }) headerClass = resolveThemeDefault(
-    'card',
-    'headerClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'body-class' }) bodyClass = resolveThemeDefault(
-    'card',
-    'bodyClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) closable = resolveThemeDefault(
-    'card',
-    'closable',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) fluid = resolveThemeDefault(
-    'card',
-    'fluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'header-fluid', transform: booleanAttribute }) headerFluid = resolveThemeDefault(
-    'card',
-    'headerFluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'action-fluid', transform: booleanAttribute }) actionFluid = resolveThemeDefault(
-    'card',
-    'actionFluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'body-fluid', transform: booleanAttribute }) bodyFluid = resolveThemeDefault(
-    'card',
-    'bodyFluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'full-width', transform: booleanAttribute }) fullWidth = resolveThemeDefault(
-    'card',
-    'fullWidth',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'caption-fluid', transform: booleanAttribute }) captionFluid =
-    resolveThemeDefault('card', 'captionFluid', false, this.themeProvider, this.themeService);
-  @Input({ alias: 'hide-overflow', transform: booleanAttribute }) hideOverflow =
-    resolveThemeDefault('card', 'hideOverflow', false, this.themeProvider, this.themeService);
-
-  @Output() onClose = new EventEmitter<void>();
-
-  @HostBinding('class.dasar-card') readonly baseClass = true;
-  @HostBinding('class.full-width') get hasFullWidth(): boolean {
-    return this.fullWidth;
-  }
-
-  get hasExtraHeader(): boolean {
-    return !!this.providedExtraHeader;
-  }
-  get hasHeader(): boolean {
-    return !!this.providedHeader;
-  }
-  get hasCaption(): boolean {
-    return !!this.providedCaption;
-  }
-  get hasAction(): boolean {
-    return !!this.providedAction;
-  }
-
-  closeCard(): void {
-    this.isClosed.set(true);
-    this.onClose.emit();
-  }
-}
-
-export const DasarCardComponent = [
-  DasarCardExtraHeaderSlot,
-  DasarCardCaptionSlot,
-  DasarCardHeaderSlot,
-  DasarCardActionSlot,
-  DasarCard,
-] as const;

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

@@ -1,42 +0,0 @@
-<dasar-button
-  [ngStyle]="containerStyle"
-  [ngClass]="containerClass"
-  [appearance]="appearance"
-  [disabled]="disabled"
-  [variant]="variant"
-  [radius]="radius"
-  [fluid]="fluid"
-  [size]="size"
-  (click)="click($event)"
-  class="dasar-chip-container"
->
-  <span class="chip-inner-content" [ngStyle]="contentStyle" [ngClass]="contentClass">
-    @if (iconName) {
-      <dasar-icon proje prefix-slot [name]="iconName" class="chip-icon" size="xs"></dasar-icon>
-    }
-    <span class="chip-label-wrapper" [ngStyle]="labelStyle" [ngClass]="labelClass">
-      @if (label) {
-        {{ label }}
-      } @else if (labelSlot) {
-        <ng-content select="[chip-label-slot]"></ng-content>
-      } @else {
-        <ng-content></ng-content>
-      }
-    </span>
-    @if (removable) {
-      <span
-        suffix-slot
-        (click)="remove($event)"
-        class="chip-close-wrapper"
-        aria-label="Remove"
-        role="button"
-      >
-        @if (closeSlot) {
-          <ng-content select="[chip-close-slot]"></ng-content>
-        } @else {
-          <dasar-icon [name]="closeIconName" class="chip-close-icon" size="xs" fluid></dasar-icon>
-        }
-      </span>
-    }
-  </span>
-</dasar-button>

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

@@ -1,38 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-chip {
-  display: inline-flex;
-
-  .chip-inner-content {
-    gap: var(--chip-inner-gap, var(--space-1));
-    justify-content: space-between;
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .chip-label-wrapper {
-    text-overflow: ellipsis;
-    display: inline-flex;
-    white-space: nowrap;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  .chip-close-wrapper {
-    margin-right: var(--chip-close-margin-right, -6px);
-    margin-left: var(--chip-close-margin-left, 2px);
-    transition: background-color 0.15s ease;
-    padding: var(--chip-close-padding, 0);
-    border-radius: var(--radius-full);
-    justify-content: center;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-}
-
-:host-context(.appearance-filled) .chip-close-wrapper:hover,
-.dasar-chip-container[ng-reflect-appearance='filled'] .chip-close-wrapper:hover {
-  background-color: var(--chip-close-hover-bg, rgba(255, 255, 255, 0.2));
-}