@foxeltech/angular-ui 0.0.6 → 0.0.7

package/index.d.ts

@@ -86,6 +86,7 @@ declare class FxToastrService {
     private appRef;
     private containerRef?;
     private idCounter;
+    private recentMessages;
     constructor(appRef: ApplicationRef);
     private ensureContainerExists;
     private show;
@@ -387,6 +388,7 @@ declare class AuthStateService {
 
 declare class AuthInterceptor implements HttpInterceptor {
     private authState;
+    private handlingUnauthorized;
     constructor(authState: AuthStateService);
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AuthInterceptor, never>;
@@ -562,6 +564,8 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
         label: string;
         value: string;
     }[]>;
+    /** Emits the current value when the select panel closes (useful for multiple mode). */
+    closed: EventEmitter<string | string[]>;
     searchTerm: string;
     filteredOptions: {
         label: string;
@@ -577,7 +581,7 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     onSelectionChange(value: any): void;
     isSelected(value: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
 }
 
 interface IRadioButton {
@@ -633,6 +637,10 @@ declare class DndUploadComponent {
     accept: string;
     maxSizeMB: number;
     strictSize: boolean;
+    /** Icon name from heroicons (outline). Default: 'arrow-up-tray' */
+    icon: string;
+    /** CSS color value for accent (border, icon, link). Default uses --gradient-primary-start */
+    accentColor: string;
     fileDrop: EventEmitter<File[]>;
     fileClick: EventEmitter<void>;
     uploadComplete: EventEmitter<File[]>;
@@ -642,6 +650,7 @@ declare class DndUploadComponent {
     }>;
     isDragOver: boolean;
     private isOpening;
+    get accentStyle(): Record<string, string>;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;
@@ -651,7 +660,7 @@ declare class DndUploadComponent {
     private onUpload;
     private isAccepted;
     static ɵfac: i0.ɵɵFactoryDeclaration<DndUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DndUploadComponent, "fx-ui-dnd-upload", never, { "multiple": { "alias": "multiple"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxSizeMB": { "alias": "maxSizeMB"; "required": false; }; "strictSize": { "alias": "strictSize"; "required": false; }; }, { "fileDrop": "fileDrop"; "fileClick": "fileClick"; "uploadComplete": "uploadComplete"; "uploadError": "uploadError"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DndUploadComponent, "fx-ui-dnd-upload", never, { "multiple": { "alias": "multiple"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxSizeMB": { "alias": "maxSizeMB"; "required": false; }; "strictSize": { "alias": "strictSize"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "accentColor": { "alias": "accentColor"; "required": false; }; }, { "fileDrop": "fileDrop"; "fileClick": "fileClick"; "uploadComplete": "uploadComplete"; "uploadError": "uploadError"; }, never, never, false, never>;
 }
 
 declare class ButtonComponent {
@@ -802,8 +811,10 @@ declare class TagComponent {
     rounded: boolean;
     icon?: any;
     solid: boolean;
+    click: EventEmitter<void>;
+    onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; }, { "click": "click"; }, never, never, false, never>;
 }
 
 type IChartType = 'bar' | 'pie' | 'line' | 'sunburst' | 'radar' | 'auto';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/foxeltech-angular-ui.mjs",

package/src/lib/styles/theme.css

@@ -3,7 +3,7 @@
   --gradient-primary-end: 4 255 135;
   --bg-primary: 255 255 255;
   --primary: 236 25 56;
-  --success: 18 244 146;
+  --success: 15 140 96;
   --warning: 255 199 0;
   --critical: 254 4 83;
   --danger: 255 122 0;

package/src/lib/ui/components/dnd-upload/dnd-upload.component.html

@@ -1,5 +1,6 @@
 <div
-  class="block w-full"
+  class="dnd-wrapper"
+  [ngStyle]="accentStyle"
   (dragover)="onDragOver($event)"
   (dragleave)="onDragLeave($event)"
   (drop)="onDrop($event)"
@@ -7,25 +8,33 @@
   <div
     role="button"
     tabindex="0"
-    class="flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-gradient-primary-start"
-    [ngClass]="{
-      'border-border-default bg-bg-hover': !isDragOver,
-      'border-gradient-primary-start bg-secondary': isDragOver,
-    }"
+    class="dnd-area"
+    [class.drag-over]="isDragOver"
     (click)="onAreaClick(fileInput, $event)"
     (keydown.enter)="onAreaClick(fileInput, $event)"
   >
-    <div class="text-sm text-text-link font-medium">
-      Click to upload <span class="text-text-secondary opacity-50">or drag and drop</span>
+    <fx-ui-hero-icon
+      [icon]="icon"
+      [size]="40"
+      class="flex dnd-icon"
+    ></fx-ui-hero-icon>
+    <div class="dnd-text">
+      <span class="dnd-link">Click to upload</span>
+      <span class="dnd-or">or drag and drop</span>
     </div>
-    <div class="text-xs text-text-secondary">
-      Allowed: {{ accept || 'any file type' }} (max {{ maxSizeMB }} MB)
+    <div class="dnd-hint">
+      @if (accept) {
+        Accepted: {{ accept }}
+      } @else {
+        Any file type
+      }
+      — Max {{ maxSizeMB }} MB
     </div>
 
     <input
       #fileInput
       type="file"
-      class="hidden"
+      class="dnd-input"
       [attr.multiple]="multiple ? '' : null"
       [attr.accept]="accept"
       (change)="onFileSelected($event)"

package/src/lib/ui/components/tag/tag.component.html

@@ -1,4 +1,5 @@
 <div
+  (click)="onClick()"
   [class]="
     `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`
   "

package/theme.css

@@ -3,7 +3,7 @@
   --gradient-primary-end: 4 255 135;
   --bg-primary: 255 255 255;
   --primary: 236 25 56;
-  --success: 18 244 146;
+  --success: 15 140 96;
   --warning: 255 199 0;
   --critical: 254 4 83;
   --danger: 255 122 0;