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
Dependency
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 |