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

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