npm package: @k3imagine/media
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.5.
Latest version: 0.0.46

# Media Item Selector

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.5.


To implement the media module into an Angular project, you will need to:


Install:

    To install the package,  run: npm i @k3imagine/media



Setup:

    Include the library in your module

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { MediaModule } from '@k3imagine/media';  // <-- import it
    import { AppComponent } from './app.component';
    
    @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, MediaModule], // <-- and include it
    bootstrap: [AppComponent],
    })
    export class MyAppModule {}



Usage:

     <lib-image-media-item-selector
              [useMockDataWheninDev]="false"
              [isMasterItemId]="true"
              [itemId]="null"
              [preloadImages]="currentState.mediaImages"
              (response)="imageMediaResponse($event)"
            >
    </lib-image-media-item-selector>


    [useMockDataWheninDev] only comes into effect when running in 
    dev mode. If set to 'true', mock data will be used. If its set to 'false',
    then you can use the gateway running locally to return the data.


    [isMasterItemId] The image selector can use masterItemId or ItemId (matrix items)


    [itemId] This can be usefull if you dont know the item id at the point of item creation.
    The module will store the image selections and you can call the update routine directly, or supply
    the itemId which will auto update via the module

    Below we call the 'updateImageList' method once we have an itemId

    constructor(
    private mediaModule: MediaModule,

     private saveImagesFromState(itemId: number): void {
        if (this.itemCreationService.getCurrentState().mediaImages) {
        this.mediaModule.updateImageList(
            this.itemCreationService.getCurrentState().mediaImages,
            itemId,
            true
        );
        }
    }


    [preloadImages] is usefull again when we dont have any images setup yet. We can pass the module the images we want it to display. We
    pass the images as a object array.

    export class MediaImages {
        id?: number;
        itemId: number;
        masterItemId: number;
        sequence: number;
        url: string;
    }


    (response) event will fire everytime an item is updated in the module. We Again this is useful when creating an item and we need to keep track of
    changes that have taken place before updating directly. This will return the object array:

    export class MediaImages {
        id?: number;
        itemId: number;
        masterItemId: number;
        sequence: number;
        url: string;
    }




# Media Library

    It is possible to just show the media library and use for a different scenario other than items.

Usage:

    <lib-image-media-library
        *ngIf="showImageLibrary"
        (response)="popupImageLibraryResponse($event)"
        [hideSearch]="true"
        [hideImageFilter]="true"
        [hideDateFilter]="true"
    ></lib-image-media-library>


    (response) event will fire when you click add via the image library. This will return the object array:
    export class ImageMedia {
        id: number;
        userId: number;
        url: string;
        fileName: string;
        description: string;
        uploadedDate: Date;
        thirdParty: boolean;
    }

    Properties [hideSearch], [hideImageFilter], [hideDateFilter] are not currently implemented, so hide for now.