@eagami/ui 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
@@ -36,6 +36,7 @@
       "default": "./fesm2022/eagami-ui.mjs"
     }
   },
+  "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"
   }

package/types/eagami-ui.d.ts

@@ -42,6 +42,11 @@ interface AvatarEditorCropEvent {
     blob: Blob;
     dataUrl: string;
 }
+interface AvatarEditorCropState {
+    zoom: number;
+    offsetX: number;
+    offsetY: number;
+}
 declare class AvatarEditorComponent implements OnDestroy {
     readonly canvasEl: _angular_core.Signal<ElementRef<HTMLCanvasElement> | undefined>;
     readonly fileInputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
@@ -54,9 +59,12 @@ declare class AvatarEditorComponent implements OnDestroy {
     readonly maxZoom: _angular_core.InputSignal<number>;
     readonly exportQuality: _angular_core.InputSignal<number>;
     readonly exportType: _angular_core.InputSignal<string>;
+    readonly cropState: _angular_core.InputSignal<AvatarEditorCropState | null | undefined>;
     readonly cropped: _angular_core.OutputEmitterRef<AvatarEditorCropEvent>;
+    readonly fileSelected: _angular_core.OutputEmitterRef<File>;
     readonly removed: _angular_core.OutputEmitterRef<void>;
     readonly fileError: _angular_core.OutputEmitterRef<string>;
+    readonly cropStateChange: _angular_core.OutputEmitterRef<AvatarEditorCropState>;
     readonly hasImage: _angular_core.WritableSignal<boolean>;
     readonly isDragOver: _angular_core.WritableSignal<boolean>;
     readonly zoom: _angular_core.WritableSignal<number>;
@@ -70,6 +78,7 @@ declare class AvatarEditorComponent implements OnDestroy {
     private hasDragged;
     private initialOffsetX;
     private initialOffsetY;
+    private _suppressCropStateEmit;
     readonly hostClasses: _angular_core.Signal<{
         [x: string]: boolean;
         'ea-avatar-editor--has-image': boolean;
@@ -99,7 +108,7 @@ declare class AvatarEditorComponent implements OnDestroy {
     onZoomInput(event: Event): void;
     removeImage(): void;
     revertImage(): void;
-    exportCrop(): void;
+    exportCrop(): Promise<Blob>;
     private loadFromUrl;
     private loadFile;
     private scheduleDrawAfterRender;
@@ -108,9 +117,10 @@ declare class AvatarEditorComponent implements OnDestroy {
     private getDrawParams;
     private clampOffset;
     private draw;
+    private emitCropStateChange;
     private clearCanvas;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarEditorComponent, "ea-avatar-editor", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": false; "isSignal": true; }; "currentSrc": { "alias": "currentSrc"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "exportQuality": { "alias": "exportQuality"; "required": false; "isSignal": true; }; "exportType": { "alias": "exportType"; "required": false; "isSignal": true; }; }, { "cropped": "cropped"; "removed": "removed"; "fileError": "fileError"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarEditorComponent, "ea-avatar-editor", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": false; "isSignal": true; }; "currentSrc": { "alias": "currentSrc"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "exportQuality": { "alias": "exportQuality"; "required": false; "isSignal": true; }; "exportType": { "alias": "exportType"; "required": false; "isSignal": true; }; "cropState": { "alias": "cropState"; "required": false; "isSignal": true; }; }, { "cropped": "cropped"; "fileSelected": "fileSelected"; "removed": "removed"; "fileError": "fileError"; "cropStateChange": "cropStateChange"; }, never, never, true, never>;
 }
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -467,6 +477,26 @@ declare class InputComponent implements ControlValueAccessor, AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputFocused": "inputFocused"; "inputBlurred": "inputBlurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
 }
 
+type ProgressBarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+declare class ProgressBarComponent {
+    readonly value: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly variant: _angular_core.InputSignal<ProgressBarVariant>;
+    readonly size: _angular_core.InputSignal<ProgressBarSize>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    readonly percentage: _angular_core.Signal<number>;
+    readonly percentageRounded: _angular_core.Signal<number>;
+    readonly hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-progress-bar--indeterminate': boolean;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "ea-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type RadioSize = 'sm' | 'md' | 'lg';
 type RadioOrientation = 'vertical' | 'horizontal';
 declare class RadioGroupComponent implements ControlValueAccessor {
@@ -590,6 +620,23 @@ declare class TabsComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ea-tabs", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "tabChange": "tabChange"; }, never, ["*"], true, never>;
 }
 
+type TagVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type TagSize = 'sm' | 'md' | 'lg';
+declare class TagComponent {
+    readonly variant: _angular_core.InputSignal<TagVariant>;
+    readonly size: _angular_core.InputSignal<TagSize>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly removed: _angular_core.OutputEmitterRef<void>;
+    readonly hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-tag--disabled': boolean;
+    }>;
+    onRemove(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ea-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+}
+
 type TextareaSize = 'sm' | 'md' | 'lg';
 type TextareaStatus = 'default' | 'error' | 'success';
 type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
@@ -686,5 +733,5 @@ declare class TooltipDirective implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[eaTooltip]", never, { "eaTooltip": { "alias": "eaTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CameraIconComponent, CardComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, CodeInputComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, MinusIconComponent, PlusIconComponent, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TabsComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
-export type { AlertVariant, AvatarEditorCropEvent, AvatarEditorShape, AvatarShape, AvatarSize, BadgeSize, BadgeVariant, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, CodeInputSize, CodeInputStatus, DialogSize, DividerOrientation, DropdownOption, DropdownSize, InputSize, InputStatus, InputType, RadioOrientation, RadioSize, SkeletonVariant, SpinnerSize, SwitchSize, TabsSize, TabsVariant, TextareaResize, TextareaSize, TextareaStatus, Toast, ToastOptions, ToastVariant, TooltipPosition };
+export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CameraIconComponent, CardComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, CodeInputComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, MinusIconComponent, PlusIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
+export type { AlertVariant, AvatarEditorCropEvent, AvatarEditorCropState, AvatarEditorShape, AvatarShape, AvatarSize, BadgeSize, BadgeVariant, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, CodeInputSize, CodeInputStatus, DialogSize, DividerOrientation, DropdownOption, DropdownSize, InputSize, InputStatus, InputType, ProgressBarSize, ProgressBarVariant, RadioOrientation, RadioSize, SkeletonVariant, SpinnerSize, SwitchSize, TabsSize, TabsVariant, TagSize, TagVariant, TextareaResize, TextareaSize, TextareaStatus, Toast, ToastOptions, ToastVariant, TooltipPosition };