@haloduck/ui 2.0.10 → 2.0.12

package/index.d.ts

@@ -615,6 +615,35 @@ declare class TabsComponent implements OnChanges, AfterViewInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "haloduck-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "labelWidth": { "alias": "labelWidth"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; }, never, ["[slot=label]"], true, never>;
 }
 
+declare class TagInputComponent implements ControlValueAccessor, AfterViewInit {
+    label: ElementRef;
+    inputEl: ElementRef<HTMLInputElement>;
+    placeholder: string;
+    disabled: boolean;
+    allowDuplicates: boolean;
+    set value(tags: string[] | null);
+    valueChange: EventEmitter<string[]>;
+    tags: string[];
+    inputValue: string;
+    onChange: (value: any) => void;
+    onTouched: () => void;
+    writeValue(value: string[] | null): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    ngAfterViewInit(): void;
+    focus(): void;
+    onInput(event: Event): void;
+    onBlur(): void;
+    onKeydown(event: KeyboardEvent): void;
+    removeTag(index: number): void;
+    private commitCurrentInput;
+    private addTag;
+    private emitChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagInputComponent, "haloduck-tag-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
+}
+
 declare class BreadcrumbComponent implements OnInit {
     private readonly breadcrumbService;
     listBreadcrumb: {
@@ -686,5 +715,5 @@ declare const provideHaloduckTransloco: () => {
     multi: boolean;
 }[];
 
-export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, ToggleComponent, dateToString, google, provideHaloduckTransloco };
+export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, TagInputComponent, ToggleComponent, dateToString, google, provideHaloduckTransloco };
 export type { ButtonVariant, CalendarDate, DateRange, DateRangeDropdown, FileEx, Location, Notification, NotificationType, Option, TabItem, TableColumn, TableRow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haloduck/ui",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "HaloDuck UI Library - Angular",
   "keywords": [
     "angular",

package/src/tailwind.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -7,9 +7,16 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -21,12 +28,15 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-2xl: 1rem;
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
@@ -306,12 +316,18 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
   .mt-2\.5 {
     margin-top: calc(var(--spacing) * 2.5);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -327,6 +343,12 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -354,6 +376,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -423,6 +448,12 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -450,6 +481,9 @@
   .min-w-96 {
     min-width: calc(var(--spacing) * 96);
   }
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -483,12 +517,12 @@
     --tw-scale-z: 150%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -534,6 +568,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .gap-\[1px\] {
     gap: 1px;
   }
@@ -590,6 +627,10 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
   .rounded-l-full {
     border-top-left-radius: calc(infinity * 1px);
     border-bottom-left-radius: calc(infinity * 1px);
@@ -630,10 +671,17 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
   .border-light-inactive {
     border-color: var(--color-light-inactive);
   }
@@ -646,12 +694,18 @@
   .border-light-on-background {
     border-color: var(--color-light-on-background);
   }
+  .border-light-primary {
+    border-color: var(--color-light-primary);
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
@@ -676,12 +730,6 @@
   .bg-light-inactive {
     background-color: var(--color-light-inactive);
   }
-  .bg-light-inactive\/20 {
-    background-color: color-mix(in srgb, #d4c9be 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-light-inactive) 20%, transparent);
-    }
-  }
   .bg-light-inactive\/50 {
     background-color: color-mix(in srgb, #d4c9be 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -700,6 +748,12 @@
   .bg-light-secondary {
     background-color: var(--color-light-secondary);
   }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -715,6 +769,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -775,6 +832,13 @@
   .text-right {
     text-align: right;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -828,6 +892,9 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
   .text-light-danger {
     color: var(--color-light-danger);
   }
@@ -840,6 +907,12 @@
   .text-light-on-background {
     color: var(--color-light-on-background);
   }
+  .text-light-on-background\/70 {
+    color: color-mix(in srgb, #091057 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-light-on-background) 70%, transparent);
+    }
+  }
   .text-light-on-control {
     color: var(--color-light-on-control);
   }
@@ -897,6 +970,15 @@
   .text-light-secondary {
     color: var(--color-light-secondary);
   }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -971,6 +1053,10 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1089,6 +1175,13 @@
       }
     }
   }
+  .hover\:text-light-on-secondary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-light-on-secondary);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1227,6 +1320,11 @@
       border-color: var(--color-dark-on-background);
     }
   }
+  .dark\:border-dark-primary {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-dark-primary);
+    }
+  }
   .dark\:border-dark-secondary {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-dark-secondary);
@@ -1265,14 +1363,6 @@
       background-color: var(--color-dark-inactive);
     }
   }
-  .dark\:bg-dark-inactive\/20 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, #958d85 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-dark-inactive) 20%, transparent);
-      }
-    }
-  }
   .dark\:bg-dark-inactive\/50 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, #958d85 50%, transparent);
@@ -1326,6 +1416,14 @@
       color: var(--color-dark-on-background);
     }
   }
+  .dark\:text-dark-on-background\/70 {
+    @media (prefers-color-scheme: dark) {
+      color: color-mix(in srgb, #d7d9f0 70%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-dark-on-background) 70%, transparent);
+      }
+    }
+  }
   .dark\:text-dark-on-control {
     @media (prefers-color-scheme: dark) {
       color: var(--color-dark-on-control);
@@ -1497,6 +1595,15 @@
       }
     }
   }
+  .dark\:hover\:text-dark-on-secondary {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-dark-on-secondary);
+        }
+      }
+    }
+  }
   .dark\:focus\:outline-dark-primary {
     @media (prefers-color-scheme: dark) {
       &:focus {
@@ -1587,26 +1694,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1753,6 +1840,11 @@
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -1774,11 +1866,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;