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

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

compack-date-picker-range

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 <compack-date-picker-range></compack-date-picker-range> in code Example:

<compack-date-picker-range [locale]="'en'" (selectLastDateEvent)="selectLastDateEventRange($event)">
</compack-date-picker-range>

<input placeholder="click me" compackDatePickerRangeHost [locale]="'en'"
  (selectLastDateEvent)="selectLastDateEventRange($event)" [disabled]="false" [formatOutputDate]="'dd-mm-yyyy'" />

<div compackDatePickerRangeHost (selectLastDateEvent)="selectLastDateEventRange($event)" [relativeDateModel]="[]">
  click me
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" compackDatePickerRangeHost [locale]="localeRange"
  (selectLastDateEvent)="selectLastDateEventRange($event)" [disabled]="disabledRange"
  [formatOutputDate]="formatOutputDateRange" [relativeDateModel]="relativeDateModel">
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    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" />
</svg>

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<string[]> | event after select date |

CompackRelativeDateModel

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:

      {
        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))
      },

compack-date-picker

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 <compack-date-picker></compack-date-picker> in code Example:

<svg compackDatePickerHost class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" [locale]="'en'"
  [type]="'icon'" [maxChoseDay]="5" [max]="max" [min]="min" (selectLastDateEvent)="selectLastDateEvent($event)">
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    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" />
</svg>

<compack-date-picker [locale]="'en'" [type]="'icon'" [maxChoseDay]="5" [max]="max" [min]="min">
</compack-date-picker>

<compack-date-picker [type]="'line'" [maxChoseDay]="5" [max]="max" [min]="min">
</compack-date-picker>

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<string[]> | event after select date |

compack-banner

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 |

compack-toast

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 |