@theseam/ui-common 1.0.2-beta.58 → 1.0.2-beta.59

package/signature-input/index.d.ts

@@ -0,0 +1,241 @@
+import * as _almothafar_angular_signature_pad from '@almothafar/angular-signature-pad';
+import { NgSignaturePadOptions } from '@almothafar/angular-signature-pad';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, AfterViewInit } from '@angular/core';
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
+import { FormGroup, FormControl, ControlValueAccessor } from '@angular/forms';
+import { NgxFileDropEntry } from 'ngx-file-drop';
+import * as _angular_cdk_testing from '@angular/cdk/testing';
+import { ComponentHarness, TestElement } from '@angular/cdk/testing';
+
+/**
+ * Options for `szimek/signature_pad` exposed by
+ * `@almothafar/angular-signature-pad`. Re-exported here so consumers don't
+ * have to reach into the third-party module directly.
+ */
+type SignaturePadOptions = NgSignaturePadOptions;
+type SignatureInputOptions = NgSignaturePadOptions;
+interface SignatureInputItem {
+    clear(): void;
+}
+interface SignatureInputContainer {
+    registerInputItem(type: string, item: SignatureInputItem): boolean;
+    unregisterInputItem(type: string, item: SignatureInputItem): boolean;
+}
+type SignatureInputType = 'pen' | 'text' | 'img';
+type SignatureInputResetType = 'delete' | 'cancel';
+type SignatureInputPanelResult = {
+    type: 'submit';
+    value: string;
+} | {
+    type: 'cancel';
+};
+
+declare const THESEAM_SIGNATURE_INPUT_CONTAINER: InjectionToken<SignatureInputContainer>;
+
+interface SignatureInputPanelForm {
+    pen: FormControl<string | null>;
+    text: FormControl<string | null>;
+    img: FormControl<string | null>;
+}
+declare class TheSeamSignatureInputPanelComponent implements SignatureInputContainer {
+    private readonly _layout;
+    private readonly _modalRef;
+    /** Emitted when the panel is submitted or canceled. */
+    readonly result: _angular_core.OutputEmitterRef<SignatureInputPanelResult>;
+    protected readonly _faSignature: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly _faUpload: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly _faKeyboard: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly _activeType: _angular_core.WritableSignal<SignatureInputType>;
+    protected readonly _resetType: _angular_core.Signal<SignatureInputResetType>;
+    readonly _form: FormGroup<SignatureInputPanelForm>;
+    private readonly _registeredInputItems;
+    private readonly _activeControl$;
+    private readonly _activeValue$;
+    private readonly _canSubmit$;
+    protected readonly _value: _angular_core.Signal<string | null>;
+    protected readonly _valueEmpty: _angular_core.Signal<boolean>;
+    protected readonly _canSubmit: _angular_core.Signal<boolean>;
+    protected readonly _isSm: _angular_core.Signal<boolean>;
+    showType(type: SignatureInputType): void;
+    registerInputItem(type: string, item: SignatureInputItem): boolean;
+    unregisterInputItem(type: string, item: SignatureInputItem): boolean;
+    reset(): void;
+    protected _onClearBtnClick(event: Event): void;
+    protected _onCancelBtnClick(event: Event): void;
+    protected _onSubmitBtnClick(event: Event): void;
+    private _emit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TheSeamSignatureInputPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TheSeamSignatureInputPanelComponent, "seam-signature-input-panel", never, {}, { "result": "result"; }, never, never, true, never>;
+}
+
+declare class TheSeamSignatureInputPenComponent implements ControlValueAccessor, SignatureInputItem {
+    private readonly _container;
+    private readonly _destroyRef;
+    readonly options: _angular_core.InputSignalWithTransform<_almothafar_angular_signature_pad.NgSignaturePadOptions, _almothafar_angular_signature_pad.NgSignaturePadOptions>;
+    readonly beginDrawing: _angular_core.OutputEmitterRef<MouseEvent | Touch>;
+    readonly endDrawing: _angular_core.OutputEmitterRef<MouseEvent | Touch>;
+    private readonly _signaturePad;
+    private readonly _value;
+    private readonly _disabled;
+    protected readonly _canvasWidth: _angular_core.Signal<number | undefined>;
+    protected readonly _canvasHeight: _angular_core.Signal<number | undefined>;
+    private _onChange;
+    private _onTouched;
+    constructor();
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    clear(): void;
+    protected _drawStart(event: MouseEvent | Touch): void;
+    protected _drawComplete(event: MouseEvent | Touch): void;
+    private _getDataURL;
+    private _applyValueToPad;
+    private _setValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TheSeamSignatureInputPenComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TheSeamSignatureInputPenComponent, "seam-signature-input-pen", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "beginDrawing": "beginDrawing"; "endDrawing": "endDrawing"; }, never, never, true, never>;
+}
+
+type SignatureFontState = 'loading' | 'inactive' | 'active';
+declare class TheSeamSignatureInputTextComponent implements ControlValueAccessor, SignatureInputItem, AfterViewInit {
+    private readonly _fontLoader;
+    private readonly _container;
+    private readonly _destroyRef;
+    private readonly _typeCanvas;
+    readonly _nameControl: FormControl<string | null>;
+    private readonly _fontState;
+    protected readonly _fontLoading: _angular_core.Signal<boolean>;
+    protected readonly _fontInactive: _angular_core.Signal<boolean>;
+    protected readonly _fontNotActive: _angular_core.Signal<boolean>;
+    private readonly _disabled;
+    protected readonly _disabledOrFontNotActive: _angular_core.Signal<boolean>;
+    protected readonly _canvasWidth = 500;
+    protected readonly _canvasHeight = 127;
+    /** Current form value (rendered bitmap data URL). */
+    private _value;
+    /**
+     * When the user last typed a name (if any) on this instance. `null` means
+     * there is no user-typed signature on this instance — the canvas should
+     * keep whatever image was restored from `_value`.
+     */
+    private _renderedText;
+    private _onChange;
+    private _onTouched;
+    constructor();
+    ngAfterViewInit(): void;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    clear(): void;
+    protected _onKeyDownEnter(): void;
+    protected _onNameInputBlur(): void;
+    /**
+     * Paint the given data URL onto the canvas as an image. Used when the
+     * component mounts with a pre-existing form value — the user's typed name
+     * isn't recoverable from the rendered bitmap, only the bitmap itself.
+     */
+    private _drawImageToCanvas;
+    /**
+     * Render `_nameControl.value` as text onto the canvas and publish the
+     * result as the form value. A null/empty name clears both.
+     */
+    private _drawTextToCanvas;
+    private _clearCanvas;
+    private _setValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TheSeamSignatureInputTextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TheSeamSignatureInputTextComponent, "seam-signature-input-text", never, {}, {}, never, never, true, never>;
+}
+
+declare class TheSeamSignatureInputImgComponent implements ControlValueAccessor, SignatureInputItem {
+    static readonly MAX_FILE_SIZE: number;
+    private readonly _container;
+    private readonly _destroyRef;
+    /**
+     * The File is only needed for validation at selection time. Once it's been
+     * converted to a data URL and stored in the form value, we don't need the
+     * File again — so there's no point trying to round-trip it through
+     * writeValue / form state. The preview renders off the current form value.
+     */
+    protected readonly _fileControl: FormControl<File | null>;
+    private readonly _fileStatus;
+    protected readonly _sizeError: _angular_core.Signal<string | null>;
+    /**
+     * Single source of truth for both the form value and the preview image.
+     * External writes (writeValue) and successful uploads both funnel through
+     * here, so switching tabs and coming back always shows the last committed
+     * signature.
+     */
+    private readonly _value;
+    protected readonly _previewDataUrl: _angular_core.Signal<string | null>;
+    protected readonly _previewBackgroundImage: _angular_core.Signal<string | null>;
+    private _onChange;
+    private _onTouched;
+    constructor();
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    clear(): void;
+    openFileBrowse(): void;
+    protected _onFileDropped(files: NgxFileDropEntry[]): void;
+    private _setValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TheSeamSignatureInputImgComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TheSeamSignatureInputImgComponent, "seam-signature-input-img", never, {}, {}, never, never, true, never>;
+}
+
+declare class TheSeamSignatureInputImgHarness extends ComponentHarness {
+    static hostSelector: string;
+    private readonly _fileDrop;
+    private readonly _sizeError;
+    private readonly _preview;
+    getSizeError(): Promise<string | null>;
+    hasPreview(): Promise<boolean>;
+    getPreviewSrc(): Promise<string | null>;
+    getFileDrop(): Promise<_angular_cdk_testing.TestElement>;
+}
+
+declare class TheSeamSignatureInputPenHarness extends ComponentHarness {
+    static hostSelector: string;
+    private readonly _canvas;
+    getCanvas(): Promise<_angular_cdk_testing.TestElement>;
+    getCanvasWidth(): Promise<number | null>;
+    getCanvasHeight(): Promise<number | null>;
+}
+
+declare class TheSeamSignatureInputTextHarness extends ComponentHarness {
+    static hostSelector: string;
+    private readonly _input;
+    private readonly _canvas;
+    getInput(): Promise<_angular_cdk_testing.TestElement>;
+    enterName(text: string): Promise<void>;
+    getInputValue(): Promise<string>;
+    isInputDisabled(): Promise<boolean>;
+    getCanvas(): Promise<_angular_cdk_testing.TestElement>;
+}
+
+declare class TheSeamSignatureInputPanelHarness extends ComponentHarness {
+    static hostSelector: string;
+    private readonly _drawBtn;
+    private readonly _typeBtn;
+    private readonly _uploadBtn;
+    private readonly _footerBtns;
+    private readonly _penHarness;
+    private readonly _textHarness;
+    private readonly _imgHarness;
+    showType(type: SignatureInputType): Promise<void>;
+    getActiveType(): Promise<SignatureInputType | null>;
+    getPen(): Promise<TheSeamSignatureInputPenHarness | null>;
+    getText(): Promise<TheSeamSignatureInputTextHarness | null>;
+    getImg(): Promise<TheSeamSignatureInputImgHarness | null>;
+    getClearOrDeleteButton(): Promise<TestElement>;
+    getCancelButton(): Promise<TestElement>;
+    getSubmitButton(): Promise<TestElement>;
+    isSubmitDisabled(): Promise<boolean>;
+    cancel(): Promise<void>;
+    submit(): Promise<void>;
+}
+
+export { THESEAM_SIGNATURE_INPUT_CONTAINER, TheSeamSignatureInputImgComponent, TheSeamSignatureInputImgHarness, TheSeamSignatureInputPanelComponent, TheSeamSignatureInputPanelHarness, TheSeamSignatureInputPenComponent, TheSeamSignatureInputPenHarness, TheSeamSignatureInputTextComponent, TheSeamSignatureInputTextHarness };
+export type { SignatureFontState, SignatureInputContainer, SignatureInputItem, SignatureInputOptions, SignatureInputPanelResult, SignatureInputResetType, SignatureInputType, SignaturePadOptions };

package/signature-input/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/theseam-ui-common-signature-input.mjs"
+}

package/story-helpers/index.d.ts

@@ -1,14 +1,14 @@
 import { HandlerFunction } from 'storybook/actions';
 import * as i0 from '@angular/core';
-import { ModuleWithProviders, OnDestroy, Injector, InjectionToken, ComponentRef } from '@angular/core';
-import { ReplaySubject, Observable } from 'rxjs';
+import { ModuleWithProviders, Injector, TemplateRef, InjectionToken, ComponentRef } from '@angular/core';
+import * as i2 from '@angular/common';
+import * as i3 from '@angular/router';
+import * as i4 from '@theseam/ui-common/scrollbar';
 import { ModalConfig } from '@theseam/ui-common/modal';
 import { ComponentType } from '@theseam/ui-common/models';
-import * as i3 from '@angular/common';
-import * as i4 from '@angular/router';
-import * as i5 from '@theseam/ui-common/scrollbar';
+import { Decorator, AngularRenderer } from '@storybook/angular';
+import { Observable } from 'rxjs';
 import { TheSeamPreferencesAccessor } from '@theseam/ui-common/services';
-import { AngularRenderer } from '@storybook/angular';
 import { DecoratorFunction } from 'storybook/internal/csf';
 
 declare type ArgType = any;
@@ -73,28 +73,39 @@ declare class StoryEmptyWithRouteComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<StoryEmptyWithRouteComponent, "ng-component", never, {}, {}, never, never, false, never>;
 }
 
-declare class StoryModalContainerComponent<T, D = any> implements OnDestroy {
-    private _injector;
-    private readonly _ngUnsubscribe;
-    set component(c: ComponentType<T>);
-    set data(d: D);
-    modalConfig?: ModalConfig<D>;
-    _component: ReplaySubject<ComponentType<T>>;
-    _data: ReplaySubject<D>;
-    _outletData$: Observable<{
-        component: ComponentType<T>;
-        injector: Injector;
-    } | null>;
+/**
+ * Renders its content (or an imperatively provided component/template) inside
+ * a stand-in modal frame so stories can preview components that are normally
+ * opened through the modal service.
+ *
+ * Three ways to provide content, checked in order:
+ *  1. `[component]` input — renders via `ngComponentOutlet`. Kept for
+ *     compatibility with existing app stories.
+ *  2. `[template]` input — renders a `TemplateRef` via `ngTemplateOutlet`.
+ *  3. Projected content (`<ng-content>`) — the preferred form for new stories
+ *     because Storybook's default template auto-binds inputs/outputs.
+ */
+declare class StoryModalContainerComponent<T = unknown, D = any> {
+    private readonly _injector;
     constructor(_injector: Injector);
-    ngOnDestroy(): void;
+    set component(c: ComponentType<T> | null | undefined);
+    set data(d: D | null | undefined);
+    set modalConfig(config: ModalConfig<D> | null | undefined);
+    get modalConfig(): ModalConfig<D> | null;
+    template?: TemplateRef<unknown> | null;
+    protected readonly _component: i0.WritableSignal<ComponentType<T> | null>;
+    private readonly _data;
+    private readonly _modalConfig;
+    protected readonly _componentInjector: i0.Signal<Injector>;
+    protected readonly _modalSizeClass: i0.Signal<string>;
     private _createInjector;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoryModalContainerComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StoryModalContainerComponent<any, any>, "story-modal-container-component", never, { "component": { "alias": "component"; "required": false; }; "data": { "alias": "data"; "required": false; }; "modalConfig": { "alias": "modalConfig"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StoryModalContainerComponent<any, any>, "story-modal-container-component", never, { "component": { "alias": "component"; "required": false; }; "data": { "alias": "data"; "required": false; }; "modalConfig": { "alias": "modalConfig"; "required": false; }; "template": { "alias": "template"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class StoryHelperComponentsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StoryHelperComponentsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StoryHelperComponentsModule, [typeof StoryEmptyWithRouteComponent, typeof StoryModalContainerComponent], [typeof i3.CommonModule, typeof i4.RouterModule, typeof i5.TheSeamOverlayScrollbarDirective], [typeof StoryEmptyWithRouteComponent, typeof StoryModalContainerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StoryHelperComponentsModule, [typeof StoryEmptyWithRouteComponent], [typeof i2.CommonModule, typeof i3.RouterModule, typeof i4.TheSeamOverlayScrollbarDirective, typeof StoryModalContainerComponent], [typeof StoryEmptyWithRouteComponent, typeof StoryModalContainerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StoryHelperComponentsModule>;
 }
 
@@ -109,6 +120,32 @@ declare class StoryInitialRouteService {
 
 declare function storyInitialRouteFactory(_storyInitialRouteService: StoryInitialRouteService): () => void;
 
+interface StoryModalDecoratorOptions {
+    /**
+     * Passed through to `StoryModalContainerComponent`'s `modalConfig` input.
+     * Commonly used to opt into a Bootstrap modal size, e.g.
+     * `{ modalSize: 'lg' }`.
+     */
+    modalConfig?: ModalConfig;
+}
+/**
+ * Wraps a story's rendered component in `<story-modal-container-component>`
+ * so it previews inside a stand-in modal frame. Storybook's default template
+ * binds the story's args to the wrapped component, so inputs/outputs (e.g.
+ * for the Actions addon) work without extra wiring.
+ *
+ * Use as an entry in a story's `decorators` array:
+ *
+ * ```ts
+ * const meta: Meta<MyModalComponent> = {
+ *   title: 'Modal/My',
+ *   component: MyModalComponent,
+ *   decorators: [storyModalDecorator({ modalConfig: { modalSize: 'lg' } })],
+ * }
+ * ```
+ */
+declare function storyModalDecorator(options?: StoryModalDecoratorOptions): Decorator;
+
 /**
  * Can be used to trigger an event on a target element when the story component has been bootstrapped.
  *
@@ -157,5 +194,5 @@ declare const INJECTOR_TO_ARGS_PROPERTY_NAME = "__getInjector";
 declare const addInjectorGetterToArgs: (argName?: string) => DecoratorFunction<AngularRenderer>;
 declare const getInjectorFromArgs: (args: any, argName?: string) => Injector;
 
-export { INJECTOR_TO_ARGS_PROPERTY_NAME, STORY_INITIAL_ROUTE_URL, StoryEmptyComponent, StoryEmptyWithRouteComponent, StoryHelperComponentsModule, StoryInitialRouteModule, StoryInitialRouteService, StoryModalContainerComponent, StoryPreferencesAccessorService, addInjectorGetterToArgs, argsToTpl, buttonTypeArgType, getInjectorFromArgs, onStoryBootstrappedTrigger, routeButton, routesArgType, sizeArgType, storyInitialRouteFactory, themeArgType, themeWithOutlineArgType };
-export type { ArgsTplOptions, ArgsTplParts };
+export { INJECTOR_TO_ARGS_PROPERTY_NAME, STORY_INITIAL_ROUTE_URL, StoryEmptyComponent, StoryEmptyWithRouteComponent, StoryHelperComponentsModule, StoryInitialRouteModule, StoryInitialRouteService, StoryModalContainerComponent, StoryPreferencesAccessorService, addInjectorGetterToArgs, argsToTpl, buttonTypeArgType, getInjectorFromArgs, onStoryBootstrappedTrigger, routeButton, routesArgType, sizeArgType, storyInitialRouteFactory, storyModalDecorator, themeArgType, themeWithOutlineArgType };
+export type { ArgsTplOptions, ArgsTplParts, StoryModalDecoratorOptions };