dasar-ui 1.1.0 → 1.3.0

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

@@ -1,154 +0,0 @@
-import {
-  ViewEncapsulation,
-  booleanAttribute,
-  HostBinding,
-  Component,
-  inject,
-  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 { parseClassesToArray, resolveThemeDefault } from '../../utils/common';
-import { DasarThemeService } from '../../services/theme.service';
-
-export type DasarButtonSizeType = Extract<ScaleAttributeType, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
-export type DasarButtonVariantType =
-  'primary' | 'success' | 'warning' | 'danger' | 'secondary' | 'ghost';
-export type DasarButtonAppearanceType = 'solid' | 'subtle' | 'outline';
-export type DasarButtonType = 'button' | 'submit' | 'reset';
-export type DasarButtonRadiusType = ScaleAttributeType;
-
-export interface DasarButtonConfig {
-  appearance?: DasarButtonAppearanceType;
-  variant?: DasarButtonVariantType;
-  radius?: DasarButtonRadiusType;
-  size?: DasarButtonSizeType;
-  buttonStyle?: StyleType;
-  buttonClass?: ClassType;
-  type?: DasarButtonType;
-  fullWidth?: boolean;
-  iconOnly?: boolean;
-  disabled?: boolean;
-  fluid?: boolean;
-}
-
-@Component({
-  encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./dasar-button.scss'],
-  templateUrl: './dasar-button.html',
-  selector: 'dasar-button',
-  imports: [CommonModule],
-})
-export class DasarButton {
-  private themeProvider = inject(DASAR_THEME_PROVIDER, { optional: true });
-  private themeService = inject(DasarThemeService, { optional: true });
-
-  @Input() appearance = resolveThemeDefault(
-    'button',
-    'appearance',
-    'solid',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() variant = resolveThemeDefault(
-    'button',
-    'variant',
-    'primary',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() radius = resolveThemeDefault(
-    'button',
-    'radius',
-    'md',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() size = resolveThemeDefault(
-    'button',
-    'size',
-    'md',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'button-style' }) buttonStyle = resolveThemeDefault(
-    'button',
-    'buttonStyle',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'button-class' }) buttonClass = resolveThemeDefault(
-    'button',
-    'buttonClass',
-    null,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input() type = resolveThemeDefault(
-    'button',
-    'type',
-    'button',
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) disabled = resolveThemeDefault(
-    'button',
-    'iconOnly',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ transform: booleanAttribute }) fluid = resolveThemeDefault(
-    'button',
-    'fluid',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'full-width', transform: booleanAttribute }) fullWidth = resolveThemeDefault(
-    'button',
-    'fullWidth',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-  @Input({ alias: 'icon-only', transform: booleanAttribute }) iconOnly = resolveThemeDefault(
-    'button',
-    'iconOnly',
-    false,
-    this.themeProvider,
-    this.themeService,
-  );
-
-  @HostBinding('class')
-  get hostClasses(): string {
-    const classes = ['dasar-button'];
-    if (this.fullWidth) classes.push('full-width');
-    if (this.disabled) classes.push('disabled');
-    return classes.join(' ');
-  }
-
-  get buttonClasses(): Record<string, boolean> {
-    const overrideClass = parseClassesToArray(this.buttonClass);
-    const baseClass = {
-      [this.appearance]: this.appearance !== 'solid',
-      [`radius-${this.radius}`]: !!this.radius,
-      [`size-${this.size}`]: true,
-      [this.variant]: true,
-      'icon-only': this.iconOnly,
-      fluid: this.fluid,
-    };
-    if (overrideClass && overrideClass?.length > 0) {
-      return {
-        ...baseClass,
-        ...Object.fromEntries(overrideClass.map((name) => [name, true])),
-      };
-    }
-    return baseClass;
-  }
-}
-
-export const DasarButtonComponent = [DasarButton] as const;

package/projects/dasar-ui/src/lib/components/dasar-button-group/dasar-button-group.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/projects/dasar-ui/src/lib/components/dasar-button-group/dasar-button-group.scss

@@ -1,69 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-
-  &.vertical {
-    flex-direction: column;
-  }
-
-  &.attached {
-    &.horizontal {
-      dasar-button {
-        &:not(:first-child) {
-          margin-left: -1px;
-          .dasar-button-native {
-            border-top-left-radius: 0 !important;
-            border-bottom-left-radius: 0 !important;
-          }
-        }
-
-        &:not(:last-child) {
-          .dasar-button-native {
-            border-top-right-radius: 0 !important;
-            border-bottom-right-radius: 0 !important;
-          }
-        }
-
-        &:hover,
-        &:focus-within {
-          position: relative;
-          z-index: 2;
-        }
-      }
-    }
-
-    &.vertical {
-      dasar-button {
-        &:not(:first-child) {
-          margin-top: -1px;
-          .dasar-button-native {
-            border-top-left-radius: 0 !important;
-            border-top-right-radius: 0 !important;
-          }
-        }
-
-        &:not(:last-child) {
-          .dasar-button-native {
-            border-bottom-left-radius: 0 !important;
-            border-bottom-right-radius: 0 !important;
-          }
-        }
-
-        &:hover,
-        &:focus-within {
-          position: relative;
-          z-index: 2;
-        }
-      }
-    }
-  }
-
-  &:not(.attached) {
-    gap: 8px;
-    &.vertical {
-      flex-direction: column;
-    }
-  }
-}

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

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

package/projects/dasar-ui/src/lib/components/dasar-button-group/dasar-button-group.ts

@@ -1,30 +0,0 @@
-import { booleanAttribute, Component, Input, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-export type DasarButtonGroupOrientationType = 'horizontal' | 'vertical';
-
-@Component({
-  styleUrls: ['./dasar-button-group.scss'],
-  templateUrl: './dasar-button-group.html',
-  encapsulation: ViewEncapsulation.None,
-  selector: 'dasar-button-group',
-  imports: [CommonModule],
-  standalone: true,
-//   host: {
-
-//   }
-// //dasar-button-native-group
-})
-export class DasarButtonGroup {
-  @Input() orientation: DasarButtonGroupOrientationType = 'horizontal';
-  @Input({ transform: booleanAttribute }) attached = true;
-
-  get buttonClasses(): Record<string, boolean> {
-    return {
-      'dasar-button-native-group': true,
-      horizontal: this.orientation === "vertical",
-      vertical: this.orientation === "vertical",
-      'attached': this.attached,
-    };
-  }
-}

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

@@ -1,158 +0,0 @@
-<div
-  class="dasar-calendar-container size-{{ size }} appearance-{{ appearance }} radius-{{
-    radius
-  }} variant-{{ variant }} "
-  [ngStyle]="containerStyle"
-  [ngClass]="containerClass"
->
-  @if (!hideHeader) {
-    @if (headerTemplate) {
-      <ng-container
-        *ngTemplateOutlet="headerTemplate.templateRef; context: { $implicit: this }"
-      ></ng-container>
-    } @else {
-      <div class="calendar-header" [ngStyle]="headerStyle" [ngClass]="headerClass">
-        <div
-          class="header-title-wrapper"
-          (click)="variant != 'dashboard' ? toggleViewMode() : null"
-        >
-          <span class="current-month">
-            @if (viewMode === 'days') {
-              {{ currentMonthYear }}
-            } @else if (viewMode === 'months') {
-              {{ currentViewDate.getFullYear() }}
-            } @else {
-              Select Year
-            }
-          </span>
-          @if (variant != 'dashboard') {
-            <dasar-icon
-              [name]="viewMode === 'days' ? 'chevron-down' : 'chevron-up'"
-              class="header-chevron"
-            >
-            </dasar-icon>
-          }
-        </div>
-        @if (viewMode === 'days') {
-          <div class="header-actions">
-            @if (prevYearTemplate && variant === 'dashboard') {
-              <ng-container
-                *ngTemplateOutlet="prevYearTemplate.templateRef; context: { $implicit: this }"
-              ></ng-container>
-            } @else if (variant === 'dashboard') {
-              <dasar-button size="sm" variant="ghost" icon-only (click)="changeYear(-1, $event)">
-                <dasar-icon name="arrow-left"></dasar-icon>
-              </dasar-button>
-            }
-            @if (prevMonthTemplate) {
-              <ng-container
-                *ngTemplateOutlet="prevMonthTemplate.templateRef; context: { $implicit: this }"
-              ></ng-container>
-            } @else {
-              <dasar-button size="sm" variant="ghost" icon-only (click)="changeMonth(-1, $event)">
-                <dasar-icon name="chevron-left"></dasar-icon>
-              </dasar-button>
-            }
-            @if (todayTemplate && variant === 'dashboard') {
-              <ng-container
-                *ngTemplateOutlet="todayTemplate.templateRef; context: { $implicit: this }"
-              ></ng-container>
-            } @else if (variant === 'dashboard') {
-              <dasar-button size="sm" variant="primary" (click)="goToToday($event)"
-                >Today</dasar-button
-              >
-            }
-            @if (nextMonthTemplate) {
-              <ng-container
-                *ngTemplateOutlet="nextMonthTemplate.templateRef; context: { $implicit: this }"
-              ></ng-container>
-            } @else {
-              <dasar-button size="sm" variant="ghost" icon-only (click)="changeMonth(1, $event)">
-                <dasar-icon name="chevron-right"></dasar-icon>
-              </dasar-button>
-            }
-            @if (nextYearTemplate && variant === 'dashboard') {
-              <ng-container
-                *ngTemplateOutlet="nextYearTemplate.templateRef; context: { $implicit: this }"
-              ></ng-container>
-            } @else if (variant === 'dashboard') {
-              <dasar-button size="sm" variant="ghost" icon-only (click)="changeYear(1, $event)">
-                <dasar-icon name="arrow-right"></dasar-icon>
-              </dasar-button>
-            }
-          </div>
-        }
-      </div>
-    }
-  }
-  @if (viewMode === 'days') {
-    <div class="calendar-grid-wrapper radius-{{ radius }}">
-      <div class="calendar-grid">
-        @if (variant === 'dropdown') {
-          @for (wd of localizedDropdownWeekdays; track wd) {
-            <div class="weekday-header">{{ wd }}</div>
-          }
-        }
-        @for (day of calendarDays; track day.date.getTime()) {
-          <div
-            class="day-cell"
-            [class.other-month]="!day.isCurrentMonth"
-            [class.selected]="day.isSelected"
-            (click)="selectDate(day, $event)"
-          >
-            @if (variant === 'dashboard') {
-              <div class="cell-top">
-                <div class="day-number" [class.today]="day.isToday">{{ day.dayNumber }}</div>
-                @if (day.weekdayStr) {
-                  <div class="weekday-label">{{ day.weekdayStr }}</div>
-                }
-              </div>
-              @if (!hideFullDate) {
-                <div class="cell-content">{{ day.fullDateStr }}</div>
-              }
-            } @else {
-              <div class="day-number" [class.today]="day.isToday">
-                {{ day.dayNumber }}
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </div>
-  }
-  @if (viewMode === 'months') {
-    <div class="picker-grid-wrapper radius-{{ radius }}">
-      <div class="picker-grid months-grid">
-        @for (m of monthsList; track m.index) {
-          <button
-            type="button"
-            class="picker-cell"
-            [class.selected]="m.index === currentViewDate.getMonth()"
-            (click)="selectMonth(m.index, $event)"
-          >
-            {{ m.name }}
-          </button>
-        }
-      </div>
-    </div>
-  }
-  @if (viewMode === 'years') {
-    <div class="picker-grid-wrapper radius-{{ radius }}">
-      <div class="picker-grid years-grid">
-        @for (y of yearsList; track y) {
-          <button
-            type="button"
-            class="picker-cell"
-            [class.selected]="y === currentViewDate.getFullYear()"
-            (click)="selectYear(y, $event)"
-          >
-            {{ y }}
-          </button>
-        }
-      </div>
-    </div>
-  }
-  @if (footerSlot) {
-    <ng-content select="[calendar-footer-slot]"></ng-content>
-  }
-</div>