ngx-compack

Introduction

This library is used in the author's personal works, but if someone likes the implementation and wants to use it too, I will only be glad.
This project was generated with Angular CLI version 14.0.0.
Supported 9/10/11+.

You can view live example

![License]()

Table of contents

- Introduction
- Table of contents
- Dependency
- Components
- compack-date-picker-range
- Import in project
- Using
- Properties
- Events
- CompackRelativeDateModel
- compack-date-picker
- Import in project
- Using
- Properties
- Events:
- compack-banner
- DisplayMessageConfig
- TypePositions
- TypeBanner
- Import in project
- Using
- Using api
- compack-toast
- ToastConfig
- TypeToast
- Import in project
- Using
- Using api

Dependency

BrowserAnimationsModule

Components

$3

#### Import in project

import { CompackDatepickerModule } from 'ngx-compack';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
...
imports: [
BrowserAnimationsModule,
CompackDatepickerModule
...
})
export class AppModule { }

#### Using

add compackDatePickerRangeHost directive to element
or create in code
Example:

``html



(selectLastDateEvent)="selectLastDateEventRange($event)" [disabled]="false" [formatOutputDate]="'dd-mm-yyyy'" />

(selectLastDateEvent)="selectLastDateEventRange($event)" [disabled]="disabledRange"
[formatOutputDate]="formatOutputDateRange" [relativeDateModel]="relativeDateModel">

d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />

`

#### Properties

parameters with which there is changed data-picker-range behavior

| Name | Default | Description |
| -------------------------------------------- | --------- | ----------------------------------------------------------- |
| @Input()
locale: string | 'en' | Intl.Locale |
| @Input()
disabled: boolean | false | disabled state |
| @Input()
formatOutputDate: string|'dd.mm.yyyy' | after accept date will convert to this format |
| @Input()
relativeDateModel: CompackRelativeDateModel[] | undefined | relative date in left side picker|

#### Events

Events generated from date-picker-range

| Name | Default | Description |
| ---------------------------------------------------------- | ------------ | ----------------- |
| @Output()
selectLastDateEvent | EventEmitter | event after select date |

#### CompackRelativeDateModel





`javascript
export interface CompackRelativeDateModel {
title: string;
dateStartFunc: () => Date;
dateEndFunc: () => Date
}
`

| field | descrption |
| ------------ | ------------ |
| title | displayed name for period in calendar |
| dateStartFunc | func returned start date |
| dateEndFunc | func returned end date |

example:

`javascript
{
title: 'last 7 day',
dateStartFunc: () => {
const date = new Date(new Date().setHours(0, 0, 0, 0));
date.setDate(date.getDate() - 7);
return date;
},
dateEndFunc: () => new Date(new Date().setHours(0, 0, 0, 0))
},
`

$3






#### Import in project

import { CompackDatepickerModule } from 'ngx-compack';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
...
imports: [
BrowserAnimationsModule,
CompackDatepickerModule
...
})
export class AppModule { }

#### Using

add compackDatePickerHost directive to element
or create in code
Example:

`html
[type]="'icon'" [maxChoseDay]="5" [max]="max" [min]="min" (selectLastDateEvent)="selectLastDateEvent($event)">

d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />




`

#### Properties

parameters with which there is changed data-picker behavior

| Name | Default | Description|
| -------------------------------------------- | --------- | ----------------------------------------------------------- |
| @Input()
locale: string | 'en' | Intl.Locale |
| @Input()
disabled: boolean | false | disabled state |
| @Input()
rangeMode: boolean | false | select one date or range |
| @Input()
viewFieldSelectedDate: boolean | false | display field with selected date |
| @Input()
useTime: boolean | false | add time field or not |
| @Input()
autoSelect: boolean | false | auto select date after choose
only without useTime |
| @Input()
maxChoseDay: number | undefined | maximum range for selection |
| @Input()
max: Date | undefined | date limit from below |
| @Input()
min: Date | undefined | date cut from above |
| @Input()
formatOutputDate: string|'dd.mm.yyyy' | after accept date will convert to this format |

#### Events:

Events generated from date picker

| Name | Default | Description |
| ---------------------------------------------------------- | ------------ | ----------------- |
| @Output()
selectLastDateEvent | EventEmitter | event after select date |

$3

is the message hanging in the foreground.

#### DisplayMessageConfig
export class DisplayMessageConfig {
public title?: string;
public message: string;
public intervalView?: number;
public typeMessage: TypeMessage;
public position: TypePositionMessage;

constructor() {
this.title = undefined;
this.message = '';
this.intervalView = undefined;
this.typeMessage = 0;
this.position = 0;
}
}

#### TypePositions

export enum TypePositionMessage {
Top = 0,
TopLeft = 1,
TopRight = 2,
Middle = 3,
Bottom = 4,
BottomLeft = 5,
BottomRight = 6
}

#### TypeBanner

export enum TypeMessage {
Info = 0,
Error = 1
}

#### Import in project

import { CompackBannerModule } from 'ngx-compack';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
...
imports: [
CompackBannerModule,
BrowserAnimationsModule
...
})
export class AppModule { }

#### Using

For view banner need call method viewBanner() in Injected service Compackbannerservice

public viewBanner(typeMessage: TypeMessage, position: TypePositionMessage, message: string, title?: string, intervalView?: number)

import { Component, OnInit } from '@angular/core';
import { TypeMessage, TypePositionMessage } from 'ngx-compack';
import { CompackBannerService, DisplayMessageConfig } from 'ngx-compack';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

constructor(private cbs: CompackBannerService ) { }

ngOnInit() {
this.cbs.setInfoColor('#000');
this.cbs.setErrorColor('#fff');
setTimeout(() => this.cbs.viewBanner(TypeMessage.Info, TypePositionMessage.TopRight, 'asdas'), 0);
}
}

#### Using api

add CompackBannerService from DI in constructor.

| Method | Description |
| -------------------------------- | ------------------------------------ |
| viewBanner(typeMessage: TypeMessage, position: TypePositionMessage, message: string, title?: string, intervalView?: number) | add new banner |
| removeBanner() | remove last banner |
| setInfoColor(color: string) | set back color for info type banner |
| setErrorColor(color: string) | set back color for error type banner |

$3

#### ToastConfig

export class ToastConfig {
public title: string;
public type: TypeToast;
public message?: string;

constructor() {
this.title = '';
this.type = TypeToast.Error
}
}

#### TypeToast

export declare enum TypeToast {
Error = 0,
Info = 1,
Success = 2
}

#### Import in project

import { CompackToastModule } from 'ngx-compack';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
...
imports: [
CompackToastModule,
BrowserAnimationsModule
...
})
export class AppModule { }

#### Using

For view toast message need call method emitNotife() in Injected service CompackToastService`

public emitNotife(type: TypeToast, title: string, message?: string);

import { Component, OnInit } from '@angular/core';
import { CompackToastService, TypeToast } from 'ngx-compack';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

constructor(private cts: CompackToastService) { }

ngOnInit() {
this.cts.emitNotife(TypeToast.Error, 'Error Error ErrorError ErrorErrorErrorErrorError vErrorError Error Error');
this.cts.emitNotife(TypeToast.Info, 'Info');
}
}

#### Using api

add CompackToastService from DI in constructor.

| Method | Description |
| ------------------------------------------------------------ | --------------------------------------- |
| emitNotife(type: TypeToast, title: string, message?: string) | add new message |
| setInfoColor(color: string) | set back color for info type message |
| setErrorColor(color: string) | set back color for error type message |
| setSuccessColor(color: string) | set back color for success type message |
| setTimeToAutoRemove(time: number) | set time to auto remove message |