@obliczeniowo/elementary v1.9.13

Author

Krzysztof Zajączkowski

Home page: https://www.obliczeniowo.com.pl

Live example of components:

• modeller space component https://www.obliczeniowo.com.pl/1352
• circles categories tree component https://www.obliczeniowo.com.pl/1351
• categories relations component https://www.obliczeniowo.com.pl/1350
• year picker component https://www.obliczeniowo.com.pl/1348
• month picker component https://www.obliczeniowo.com.pl/1347
• value picker component https://www.obliczeniowo.com.pl/1346
• daily statistics component https://www.obliczeniowo.com.pl/1342
• html line component https://www.obliczeniowo.com.pl/1338
• sejm component https://www.obliczeniowo.com.pl/1334
• slide view component https://www.obliczeniowo.com.pl/1297
• rating component https://www.obliczeniowo.com.pl/1297
• array to table component https://www.obliczeniowo.com.pl/1296
• spinner component https://www.obliczeniowo.com.pl/1295
• dialogs components https://www.obliczeniowo.com.pl/1294
• circle tree component https://www.obliczeniowo.com.pl/1293
• perspective slider component https://www.obliczeniowo.com.pl/1291
• circle menu component https://www.obliczeniowo.com.pl/1290
• perceptron component https://www.obliczeniowo.com.pl/1289
• stepper component https://www.obliczeniowo.com.pl/1349
• progress stepper component https://www.obliczeniowo.com.pl/1288
• matrix combination component https://www.obliczeniowo.com.pl/1287
• combine categories component https://www.obliczeniowo.com.pl/1286
• tree component https://www.obliczeniowo.com.pl/1249
• dropdown components https://www.obliczeniowo.com.pl/1248
• time component https://www.obliczeniowo.com.pl/1247
• sounds related components https://www.obliczeniowo.com.pl/1246
• chess component https://www.obliczeniowo.com.pl/1150
• digital component https://www.obliczeniowo.com.pl/1243
• diagram 3d svg: https://www.obliczeniowo.com.pl/1241
• pie diagram https://www.obliczeniowo.com.pl/1244
• linear diagram https://www.obliczeniowo.com.pl/1239
• pie component https://www.obliczeniowo.com.pl/1245
• progress bar https://www.obliczeniowo.com.pl/1242
• calendar https://www.obliczeniowo.com.pl/1143

1.9.0 Angular 17 - here you are

30-11-2023 1.9.13 fix problem with updating get request

28-11-2023 1.9.12 add new modeller option for sending get request

17-11-2023 1.9.10 add edit icon

13-11-2023 1.9.8 close modal on destroy

12-11-2023 1.9.7 add data to dialogs open options to let pass some additional info to dialog object

12-11-2023 1.9.6 add logout icon

11-11-2023 1.9.3 add equal validators

11-11-2023 1.9.2 emit closed when dialog wrapper is closing

10-11-2023 1.9.1 update of dropdowns

09-11-2023 1.9.0 update to Angular 17

1.8.0 Angular 16 - new adventure

03-11-2023 1.8.97 use isValid to display errors

03-11-2023 1.8.96 add errors to input wrapper

03-11-2023 1.8.95 fix login validator

02-11-2023 1.8.94 add documentation and validators of: login, uLogin, noWhiteSpace

02-11-2023 1.8.93 add some basic validators to library like: email, NIP, PESEL, REGON validators

30-10-2023 1.8.92 oblButton directive block loading and add option to enable button on loading if someone need that

30-10-2023 1.8.91 wrap buttons for input wrapper of file type

24-10-2023 1.8.90 update packages

23-09-2023 1.8.89 obl-modeller - extend possibility of calculate formula by adding if-else statement, let calculate formula without parameters input

17-09-2023 1.8.88 obl-modeller - formula example fix

17-09-2023 1.8.87 obl-modeller - add json option to const or variable box

17-09-2023 1.8.85 obl-modeller - initial position of box in place of click button for opening menu

16-09-2023 1.8.84 obl-modeller - add text variable option for cont or variable box

16-09-2023 1.8.83 obl-modeller - add move when user create connector and move cursor over edge of view

16-09-2023 1.8.82 obl-modeller - cancel create connector when dragging box

16-09-2023 1.8.81 obl-modeller - display as red connectors that are connected

16-09-2023 1.8.80 obl-modeller - detect broken connector and remove it on click

16-09-2023 1.8.79 obl-modeller - formula modeller box that give you possibility to calculate mathematical formula by using mathematical functions and input variables connected by user.

Example ["sin", "get", "variable-name"] is like sin(variable-name).

You can put down there array of numbers or number.

available operations

get - to get value of variable name "get", "name"

multiply - to multiply two values ["multiply", "get", "variable-name", 10]

divide - to divide

add - to add

subtract - to subtract

mod - to calculate modulo

exp - to calculate power of e

pow - to powering

sin - to calculate sinus

cos - to calculate cosinus

tan - to calculate tangens

asin - to calculate arc sinus

acos - to calculate arc cosinus

atan - to calculate arc tangens,

sinh - to calculate hyperbolic sinus

cosh - to calculate hyperbolic cosinus

tanh - to calculate hyperbolic tangens

or

and

not

== - equal

!= - not equal

<, >, <=, >= - less then, greater then, less or equal, more or equal

toRadians - change value from degrees to radians

toDegrees - change value from radians to degrees

pi - return pi "pi"

e - return e "e"

goldenRatio - return golden ration "goldenRatio"

15-09-2023 1.8.77 obl-modeller - add json option to const or variable box

15-09-2023 1.8.78 obl-modeller - emit output

15-09-2023 1.8.77 obl-modeller - add more constants

13-09-2023 1.8.76 obl-modeller - add concat array box

13-09-2023 1.8.75 obl-modeller - translations in menu

12-09-2023 1.8.74 obl-modeller - refactor modeller section

12-09-2023 1.8.73 obl-modeller - fix removing fields

12-09-2023 1.8.72 obl-modeller - translations

11-09-2023 1.8.71 obl-modeller - add generate option to generate array of numbers

10-09-2023 1.8.70 obl-modeller - improve set options

10-09-2023 1.8.69 obl-modeller - retrieve options model for input/output

10-09-2023 1.8.68 obl-modeller - split input box

10-09-2023 1.8.67 obl-modeller - restore connectors after remove dynamic added field

10-09-2023 1.8.66 obl-modeller - add join array to object modeller option

09-09-2023 1.8.65 obl-modeller - fix box items emits problem

09-09-2023 1.8.64 obl-modeller - fix issue with not clear connector when remove on some cases

09-09-2023 1.8.63 obl-modeller - split object can split array of objects

07-09-2023 1.8.62 obl-modeller - create extended version of BehaviorSubject and EventEmitter to make easy way to unsubscribe all subscriptions

05-09-2023 1.8.61 obl-modeller - extend math-operators to work with numbers and arrays of numbers (arrays should have the same length)

03-09-2023 1.8.60 obl-modeller - fix unsubscribe case, add optionsChanged, fix detect changes for math operators, set translations in output

29-08-2023 1.8.58 obl-modeller - translations - fix translations

29-08-2023 1.8.57 obl-modeller - translations - change way of set and add rest of them

28-08-2023 1.8.56 obl-modeller - translations

27-08-2023 1.8.55 obl-modeller - set headers for math operators arguments

27-08-2023 1.8.54 obl-modeller - fix model options set

27-08-2023 1.8.53 obl-modeller - add some constants

27-08-2023 1.8.52 obl-modeller - add mathematical operators box option

27-08-2023 1.8.51 obl-switcher - fade in animation and color of disabled text

20-08-2023 1.8.50 obl-switcher - support different color for off and animation interpolation of color;

20-08-2023 1.8.49 obl-switcher - add animation on icons

20-08-2023 1.8.48 obl-switcher - add icons on on/off by icon name or TemplateRef

20-08-2023 1.8.47 obl-switcher - fix not set value in form issue and add a bit of description

19-08-2023 1.8.46 obl-switcher - form control accessor

19-08-2023 1.8.45 obl-switcher - add loading state that disable component and display spinner inside of it

19-08-2023 1.8.44 obl-switcher - small animation for on/off input text

19-08-2023 1.8.43 obl-switcher - add disabled mode

19-08-2023 1.8.42 obl-switcher - display on/off state.

19-08-2023 1.8.41 obl-switcher - brand brand new component
obl-split-box - brand new option for modeller

19-07-2023 1.8.40 obl-calendar - fix problem with locales

16-07-2023 1.8.39 obl-modeller - connector displaying when create - add better shape

16-07-2023 1.8.38 obl-modeller - fix issue with loosing connection when add output new field or remove field

11-07-2023 1.8.37 obl-modeller not fully implemented yet, have some detected issues to resolve

24-06-2023 1.8.36 obl-relation-categories - disable menu when disabled

18-06-2023 1.8.34 obl-circle-categories-tree-relations - fix bug for version without reactive form

18-06-2023 1.8.33 obl-circle-categories-tree-relations - add context menu on click on connector

18-06-2023 1.8.32 obl-circle-categories-tree-relations - context menu on click on item category text

18-06-2023 1.8.31 obl-relation-categories - block menu when no connectors for clicked category exist

18-06-2023 1.8.30 obl-relation-categories, obl-menu add translations and fix menu issues

18-06-2023 1.8.29 obl-relation-categories add menu things by set reference to menu component

17-06-2023 1.8.28 obl-menu fix issue with not set properly position of background, prepare to add menu to relations-components (not yet fully covered)

17-06-2023 1.8.27 obl-menu add disabled option per items

17-06-2023 1.8.26 obl-menu basic stuff for context menu (on right click one)

05-06-2023 1.8.25 obl-circle-categories-tree-relations add value accessor to let use it with reactive form

04-06-2023 1.8.24 obl-circle-categories-tree-relations interactive mode when disable input is undefined or false

04-06-2023 1.8.23 obl-circle-categories-tree-relations highlight connectors

04-06_2023 1.8.22 obl-circle-categories-tree-relations emit on connector click

04-06-2023 1.8.21 obl-circle-categories-tree-relations emit on item click

04-06-2023 1.8.20 obl-circle-categories-tree-relations make connectors less overlapping and a bit of optimization

04-06-2023 1.8.19 obl-circle-categories-tree add dots and simplify/optimize displaying items

03-06-2023 1.8.18 obl-circle-categories-tree fix text angle issue

03-06-2023 1.8.17 obl-circle-categories-tree add a bit of distance between grouped one

03-06-2023 1.8.16 obl-circle-categories-tree-relations add a bit of distances between grouped one

03-06-2023 1.8.15 obl-circle-categories-tree-relations - sounds lame but I added dot to make it a bit more cute

03-06-2023 1.8.14 obl-circle-categories-tree-relations component (still work in progress but in general can display a things, very exciting time on this library, very exciting time)

28-05-2023 1.8.13 gobl-relation-connector - move to separated module

28-05-2023 1.8.12 gobl-directional-component - move to separated module

27-05-2023 1.8.11 obl-circle-categories-tree component - add reactive form to this things

27-05-2023 1.8.10 obl-circle-categories-tree component - emit value when element is clicked

27-05-2023 1.8.9 obl-circle-categories-tree component - improve shape of branches and display header

27-05-2023 1.8.8 obl-circle-categories-tree component - change shape of branches

27-05-2023 1.8.7 obl-circle-categories-tree component

27-05-2023 1.8.6 obl-categories-relations make starting shape more cute ant add some extra styles for it (final tuning)

26-05-2023 1.8.5 obl-categories-relations add connecting points

25-05-2023 1.8.4 obl-categories-relations fix shape of connector issue

25-05-2023 1.8.3 obl-categories-relations set position when hover over item

23-05-2023 1.8.2 obl-categories-relations sort when add one

21-05-2023 1.8.1 add interactive mode to obl-categories-relations component

1.7.0 Angular 15 - list of changes

20-05-2023 1.7.104 obl-categories-relations component - add reactive part

20-05-2023 1.7.103 obl-categories-relations component - highlight on hover over category text

20-05-2023 1.7.102 obl-categories-relations component basic implementation

08-05-2023 1.7.101 fix black pawn not change into quine in obl-chess component for ChessPieceMoveModel

08-05-2023 1.7.99 fix gobl-menu-item with showing item text when should hide

04-05-2023 1.7.98 fix obl-circle-progress-stepper for initial state to render properly steps

21-04-2023 1.7.97 fix bug regarding styles inside obl-marks-displayer component

15-04-2023 1.7.96 fix bug related to date formatting

11-04-2023 1.7.95 add link and target option to button directive

09-04-2023 1.7.94 fix issue with day count connected to change time zone

08-04-2023 1.7.91 split text by math operators function in TextTransform class

08-04-2023 1.7.90 fix timezone issue connected to calculation of days between dates

07-04-2023 1.7.89 obl-sejm-picker add value accessor, mapbox service - override more roads layers

06-04-2023 1.7.88 mapbox - group MultiLineString, obl-color-picker add value accessor

05-04-2023 1.7.87 add TextTransform class and use it in obl-page-tree and mapbox service

04-04-2023 1.7.86 obl-daily-statistics component add weakDayOffset to start weak from Monday not by Sunday

03-04-2023 1.7.85 obl-json-def-table component to load data from object or json file definition of table

02-04-2023 1.7.84 export mapbox to svg with font size set from layer options

02-04-2023 1.7.83 group exported layers and add proper size of map exported area, fix one issue with mapbox like interface

01-04-2023 1.7.82 add obl-mapbox service with one method to export mapbox to SVG

01-04-2023 1.7.81 add method to save svg text and add option for settings svg styles by options key style

31-03-2023 1.7.80 obl-horizontal-progress-bar - add value accessor

30-03-2023 1.7.79 obl-marks-displayer - add value accessor

30-03-2023 1.7.78 obl-arch-progress - add value accessor

29-03-2023 1.7.77 obl-pie-progress - rename input from writeValue to write
add value accessor for reactive form and form control

29-03-2023 1.7.76 obl-two-arch-progress - add value accessor for reactive form and form control

28-03-2023 1.7.75 obl-equalizer - add value accessor for reactive form and form control too

28-03-2023 1.7.74 obl-channel-volume - add value accessor for reactive form and form control too

27-03-2023 1.7.72 obl-statistics-diagram add value accessor for reactive lovely form

27-03-2023 1.7.71 oblButton directive issue with icon solved

27-03-2023 1.7.70 obl-ball-progress-bar - add value accessor to support reactive forms

26-03-2023 1.7.69 obl-vertical-stepper - add iconTemplate input to handle displaying of icons in vertical stepper

26-03-2023 1.7.68 obl-stepper - add iconTemplate input to handle displaying of icons in stepper

26-03-2023 1.7.67 obl-vertical-stepper - add stepTemplate input to handle displaying of description and name fo step

26-03-2023 1.7.66 obl-stepper - add stepTemplate input to handle displaying content of description and name of step

26-03-2023 1.7.65 obl-vertical-stepper, obl-stepper - add css variables to control icons size and thickness of line

25-03-2023 1.7.64 obl-vertical-stepper add value accessor

25-03-2023 1.7.63 add obl-vertical-stepper

25-03-2023 1.7.62 fix style issue overridden locally by global style

25-03-2023 1.7.61 add Value_Accessor to obl-stepper to make magic happen thru form

25-03-2023 1.7.60 export Step

25-03-2023 1.7.59 obl-progress-stepper change interface name from Step to ProgressStep
obl-stepper new step component

25-03-2023 1.7.58 obl-input-wrapper add emitter for files list change and documentation

25-03-2023 1.7.57 obl-input-wrapper add use case for inputtype=file

23-03-2023 1.7.56 oblButton directive add toggle / select options to make button switchable

19-03-2023 1.7.55 oblButton directive add icon input to set icon inside the button, if loading is set to true icon is removed and added one loading is set to false. Of course icon = 'name of icon', if no icon name set then no icon is displayed

19-03-2023 1.7.54 oblButton directive add loading input to disable button with spinner inside

18-03-2023 1.7.53 obl-daily-statistics add option to set year picker range by settings

18-03-2023 1.7.52 obl-daily-statistics change styling of component and value-picker related

16-03-2023 1.7.51 fix bugs in obl-daily-statistics connected to change date ranges
add new option to display year picker inside of obl-daily-statistics

16-03-2023 1.7.50 obl-value-picker create dynamic model class to let make call to API, can't use streams there

13-03-2023 1.7.49 obl-year-picker, obl-month-picker, obl-value-picker add display option to control displaying next/previous buttons

12-03-2023 1.7.48 obl-year-picker add value accessor

12-03-2023 1.7.47 obl-year-picker and make more flexible obl-value-picker by using model input

12-03-2023 1.7.46 obl-month-picker, obl-value-picker add placeholder

12-03-2023 1.7.45 obl-month-picker based on obl-value-picker

12-03-2023 1.7.44 obl-value-picker add value accessor to support reactive forms

11-03-2023 1.7.43 obl-value-picker add templates way to change displaying items things

11-03-2023 1.7.42 add obl-value-picker component

11-03-2023 1.7.41 add getImageFromUrl method to oblFile service

06-03-2023 1.7.40 obl-clock-time display pre selected pointers on mouse over selecting area section

06-03-2023 1.7.39 obl-clock-time emit value on date change in interactive mode

05-03-2023 1.7.38 obl-time-picker component and extends obl-click-time with interactive mode

04-03-2023 1.7.37 obl-statistic-diagram component

03-03-2023 1.7.36 obl-daily-statistics border for selected one

02-03-2023 1.7.35 obl-spinner to change size use:

obl-spinner {
    &.size-100 {
        width: 100px;
    }

    &.size-75 {
        --obl-spinner-width: 75px;
    }
}

obl-daily-statistics add spinner when loading ext data

01-03-2023 1.7.34 display day statistic on hover over day in obl-daily-statistics

28-02-2023 1.7.33 align days headers in obl-daily-statistics

28-02-2023 1.7.32 display total/selected information in obl-daily-statistics component

26-02-2023 1.7.31 add obl-daily-statistics component to display counted statistics

11-02-2023 1.7.30 action directive for buttons

05-02-2023 1.7.29 export mark service

05-02-2023 1.7.28 add marks service to handle marks registration

31-01-2023 1.7.27 obl-mark component - add more marks

30-01-2023 1.7.26 obl-html-lines and obl-html-line set on push strategy

30-01-2023 1.7.25 obl-html-lines to draw more complex multiple polylines

24-01-2023 1.7.24 obl-html-line fix some problems with thickness of line

23-01-2023 1.7.23 obl-html-line component that let you draw line in clear HTML stuff (tell me how cool is that)

22-01-2023 1.7.22 obl-mark-displayer add digits numbers

16-01-2023 1.7.21 obl-marks-displayer component

16-01-2023 1.7.20 obl-mark-displayer component

08-01-2023 1.7.17 style for max size of sejm component

08-01-2023 1.7.16 add legend option to sejm component

08-01-2023 1.7.15 add obl-color-key-legend component

07-01-2023 1.7.14 some spelling stuff. The most important one in input wrapper prefix as name of select for ngProjectAs was changed. For rest ide should give you friendly hand

07-01-2023 1.7.13 add SejmComponent

27-12-2022 1.7.12 add SlideViewComponent

29-11-2022 1.7.9 add percentagesByAbsMax and percentagesByMax to ElementaryMath

29-11-2022 1.7.8 add percentagesByPosition and percentagesBySum to ElementaryMath

27-11-2022 1.7.7 add countUnique static method for ElementaryMath
change static method of ElementaryMath name from middle to average

27-11-2022 1.7.6 create PageLinearTree component

25-11-2022 1.7.5 control colors of PagesCircleTree component by using css classes

25-11-2022 1.7.4 spelling for css variables

25-11-2022 1.7.3 change naming convention to TemperatureModule & TemperatureComponent as well

25-11-2022 1.7.2 create basic pages-circle-tree component

23-11-2022 1.7.1 update rxjs

from 1.6.0 Angular 14 - list of changes

20-11-2022 1.6.112 refactoring of Point2D moved completely to classes and added new method setLength,
move ColorType to classes as well

02-11-2022 1.6.111 clear cache repaired

30-10-2022 1.6.110 add options to clear cache list when request is done and (what is most cool thing I guess) retrigger one just by give list of keys. Retriggering/cleaning will happen only when request not fail. And you should be carefully with this one, you can create retriggering loop. I guess it can be usefully for update list when put/post/patch/delete request related to list is done

add(user: User): Observable<User> {
    return this.http.post('http://localhost:3000/users', user, {
        cache: {
            retrigger: ['get:users'] // yep that's it and it will retrigger last call if key exist in cache of course! I think I don't have to tell you how cool is that
        }
    })
}

29-10-2022 1.6.109 add subjects to cache service that will emit values when cache with name is change or cleared, prevent strict access to cache Map object

29-10-2022 1.6.108 add more cache information about url & method
cache key as method:name (example: get:yourNameOfCache)
add option withCacheKey that will force to return response with CacheItem object

24-10-2022 1.6.107 cache extended option

22-10-2022 1.6.106 change cache model a bit so now:

export interface User {
    id: number;
    name: string;
    email: string;
    gender: 'female' | 'male';
    status: 'active' | 'inactive';
    date: Date;
}

@Injectable({
    providedIn: 'root'
})
    export class UsersService {

    constructor(protected http: HttpCacheService) { }

    get(reload?: true): Observable<User[]> {
        return this.http.get('https://gorest.co.in/public/v2/users', {
        cache: {
            name: 'users',
            type: reload && 'reload',
            convert: (data: User[]) => data.map(user => (user.date = new Date(), user)),
            reloadOn: (data: CacheItem<User[]>) => data.triggeredAt.getTime() + 5000 < (new Date().getTime())
        }
        })
    }
}

22-10-2022 1.6.105 create cache interceptor, cache service and http-cache service to handle globally caching of response. Simple example:

export interface User {
    id: number;
    name: string;
    email: string;
    gender: 'female' | 'male';
    status: 'active' | 'inactive';
    date: Date;
}

@Injectable({
providedIn: 'root'
})
export class UsersService {

    constructor(protected http: HttpCacheService) { }

    get(reload?: true): Observable<User[]> {
        return this.http.get('https://gorest.co.in/public/v2/users', {
        cache: {
            /** name of cache key (must be unique) */
            name: 'users',
            /** to override cache anyway */
            type: reload && 'reload',
            /** to cache transformed model */
            convert: (data: User[]) => data.map(user => (user.date = new Date(), user)),
            /** to let send request after 5000 [ms] */
            reloadOn: (data: User[]) => !!data.length && data[0].date.getTime() + 5000 < (new Date().getTime())
        }
        })
    }
}

and loading:

load(reload?: true) {
    this.users.get(reload).pipe(
    tap(users => console.log(users))
    ).subscribe(users => this.usersTable = users);
}

of course cache interceptor must exist on providers:

providers: [
    {
    provide: HTTP_INTERCEPTORS,
    useClass: CacheInterceptorService,
    multi: true
    },
],

15-10-2022 1.6.104 obl-perspective-slider component change transparency on animation move

14-10-2022 1.6.103 obl-perspective-slider component basic stuff

08-10-2022 1.6.102 obl-circle-menu add external data field per item and add parent to emitted item

08-10-2022 1.6.101 obl-circle-menu - add option for closing on click
move menu text when nr of parent items < 6

07-10-2022 1.6.100 obl-circle-menu - change model of CircleExtendedMenuItem and CircleMenuItem and emit only id and text field

07-10-2022 1.6.99 obl-circle-menu - revers direction of drawing menu pos arch

06-10-2022 1.6.98 obl-circle-menu - set color with css variable

06-10-2022 1.6.97 obl-circle-menu - add progress for circle menu when number of positions is more then 6

06-10-2022 1.6.96 obl-circle-menu - add animation for beggaring of displaying of circle menu

05-10-2022 1.6.95 obl-circle-menu - add animation for extended elements of circle menu

04-10-2022 1.6.94 obl-circle-menu - resolve FireFox issue

03-10-2022 1.6.93 obl-circle-menu - extending menu on hover

02-10-2022 1.6.92 obl-circle-menu - rotate buttons and add refactor code

02-10-2022 1.6.91 obl-circle-menu - resolve partially FireFox issue

02-10-2022 1.6.90 basic obl-circle-menu component with issue on FireFox to resolve and yep not finished yet.
@todo resolve problem on FF
@todo add extended menu on hover
@todo add animation when move menu up/down

28-09-2022 1.6.89 add disabled option to obl-hex-extended-button component

25-09-2022 1.6.88 add obl-hex-extended-button component

23-09-2022 1.6.87 add possibility to change buttons radius and padding from any place of scss/css component file by using css variables

18-09-2022 1.6.84 click outside of modal and select-dropdown fix problem

18-09-2022 1.6.83 add input that control border style of input control inside of obl-color

17-09-2022 1.6.82 add double border for color mark on obl-color and change name of component from obl-color-component to obl-color

17-09-2022 1.6.81 selecting color for obl-hex-color fix bug

17-09-2022 1.6.80 colorFn for obl-pie-progress component

17-09-2022 1.6.79 input color for obl-hex-color that let select palette color if given color in format of #ffaabb match one from palette

17-09-2022 1.6.78 create obl-hex-colors component as hex palette of colors

15-09-2022 1.6.77 obl-color emit value

15-09-2022 1.6.76 obl-color-picker component repair change detection error in console

13-09-2022 1.6.75 arrayToXlsx add options that let you set maxRows and headers

12-09-2022 1.6.74 arrayToXlsx function that let you save array as xlsx by using xlsx library

11-09-2022 1.6.73 option for download as csv or json file in obl-array-to-table component
add toJson method in Csv class

11-09-2022 1.6.72 add display option that take over option index of obl-array-to-table

11-09-2022 1.6.71 add template for caption of obl-array-to-table

10-09-2022 1.6.70 add display index option to obl-array-to-table

10-09-2022 1.6.69 optimize obl-array-to-table and obl-scroller-nav

10-09-2022 1.6.67 add editable mode for obl-from-array that let you edit single ceil of it
input-wrapper - new mode without border
add tdobl-editable-ceil

08-09-2022 1.6.66 add header to obl-from-array
add headers to fromArray static constructor

06-09-2022 1.6.65 add fromArray static method for Csv class add download as csv button to obl-array-to-table component

06-09-2022 1.6.64 add getRawRow and getJsonRow methods to Csv class

05-09-2022 1.6.62 repair style for obl-progress-stepper

05-09-2022 1.6.61 add interactive mode for obl-pie-progress
add more documentation for obl-array-to-table
type for table restricted to (string|number)[] or (string|number) for obl-array-to-table

03-09-2022 1.6.60 resolve problem with overlay cdk connected to style

03-09-2022 1.6.59 add obl-pie to obl-scroller-nav

03-09-2022 1.6.58 obl-array-to-table fix bug with obl-scroller-nav not showing

03-09-2022 1.6.57 obl-scroller-nav component
obl-array-to-table - use scroller

03-09-2022 1.6.56 add obl-array-to-table object
add new set of icons display perceptron data in obl-array-to-table components

02-09-2022 1.6.55 add errors to perceptron and obl-perceptron component

30-08-2022 1.6.54 add predicted values to diagram of obl-perceptron component

30-08-2022 1.6.53 add Perceptron class and obl-perceptron simple model component

27-08-2022 1.6.52 add obl-jumper component that emit value of step every 100 ms (by default)

26-08-2022 1.6.51 add prepare method for CSV
add prepare reverse parsing method for columns and global fix bug in parsing CSV file

25-08-2022 1.6.50 add parsing string default method to override in Csv class
add set of parsing method for remove pair of quotes from beginning and end of string
drag-and-drop directive a bit more documentation

22-08-2022 1.6.49 add parsing and throwing errors for CSV file

21-08-2022 1.6.48 add Csv parse class

19-08-2022 1.6.47 step for slider

19-08-2022 1.6.46 add min/max for slider component
add gradientUnits in gobl-svg-linear-gradient to control space coordinates
add gradientUnits in obl-simple-diagram2-d

15-08-2022 1.6.45 add obl-circle-progress-stepper basic functionality

13-08-2022 1.6.44 repair position of gradient

13-08-2022 1.6.43 add gobl-svg-linear-gradient component to replace section related to gradient inside obl-single-diagram2-d component

10-08-2022 1.6.42 obl-simple-diagram2-d add interpolation method

10-08-2022 1.6.41 obl-simple-diagram2-d correct recalculation

10-08-2022 1.6.39 obl-simple-diagram2-d add bottom diagram offset, emitter when recalculation is required, input for height, width proportions. Resolve problem with deformation of draw thru ng-content objects

10-08-2022 1.6.38 obl-simple-diagram2-d add diagram bottom padding input

10-08-2022 1.6.37 obl-simple-diagram2-d add transform function, add padding, move ng-content after draw diagram

09-08-2022 1.6.36 obl-simple-diagram2-d reverse diagram

09-08-2022 1.6.35 obl-simple-diagram2-d created

09-08-2022 1.6.34 obl-ball-progress change size by css

08-08-2022 1.6.33 obl-ball-progress finally work on firefox properly

08-08-2022 1.6.32 fix issue inside obl-pie-progress

08-08-2022 1.6.31 obl-progress-vertical-stepper done

06-08-2022 1.6.29 display statuses on progress stepper diagram in obl-progress-stepper

06-08-2022 1.6.28 add obl-loading-state & use it in obl-progress-stepper component

06-08-2022 1.6.27 obl-progress-stepper component basic done

05-08-2022 1.6.26 gradients on FF for obl-combine-categories components

01-08-2022 1.6.24 optimization of scss for combinations components

31-07-2022 1.6.23 move mixin from local to global

31-07-2022 1.6.22 move styles to mixin in global.scss now you can override default one in styles.scss of your project:

$obl-half-matrix-colors-category: (
  red,
  green,
  blue,
  orange,
  purple,
  #999900,
  magenta,
);

@include half-matrix($obl-half-matrix-colors-category);

31-07-2022 1.6.20-21 fix categories not showing on when using formGroup stuff set

30-07-2022 1.6.19 add disable chosen one combination on obl-half-matrix-combine-categories

30-07-2022 1.6.18 fix adapter for id and combine id and name

30-07-2022 1.6.17 repair styles in obl-half-matrix-combine-categories

30-07-2022 1.6.15 add new component obl-half-matrix-combine-categories that let you choose combinations of 2 to 7 different categories.

26-07-2022 1.6.12 add single option to display list of single, move mixin as global to let user override default one in style.scss:

@import "node_modules/@obliczeniowo/elementary/styles/global.scss";

$obl-color-category: (
1: #8a2c2c,
2: #864702,
3: #5a6801,
4: #015b6d,
5: #54018b,
6: #8a044b,
);

@include categories-colors($obl-color-category);

26-07-2022 1.6.10-11 repair switch all by category header when some is disabled partially

26-07-2022 1.6.9 add selective disabling category option by using disable=[{ name: 'Category 1' }, { name: 'Category 2' }] (depends on adapter you are using)

24-07-2022 1.6.8 add CombineIdAdapter

24-07-2022 1.6.7 value input

24-07-2022 1.6.6 add brand, brand new CombineNameAndIndexAdapter for obl-combine-categories component

24-07-2022 1.6.5 bugfix connected to set input for adapter

24-07-2022 1.6.4:

• Add abstract model to control input & output format of obl-combine-categories &component outside of component;
• Pointer on hover over clickable element

23-07-2022 1.6.3 Add toggle whole categories by click on category header in obl-combine-categories component

23-07-2022 1.6.2 Add ControlValueAccessor to obl-combine-categories

23-07-2022 1.6.1 Add basic obl-combine-categories component that let you combine categories

link to page with showcase: https://obliczeniowo.com.pl/1286

1.6.0 Update Angular to 14

from 1.5.1 version some component required to copy assets folder

You can add npm command:

"copy-assets": "node ./node_modules/@obliczeniowo/elementary/assets/scripts/copy.js ./src/assets/",

and than run it in console:

npm run copy-assets

or add command:

"serve": "npm run copy-assets && ng serve",

and run with copy of assets:

npm run serve

it will copy obl-icons folder to your assets folder and run project locally

From 1.3.24 version some components required include global style

In styles.scss import style file:

@import "node_modules/@obliczeniowo/elementary/styles/global.scss";

and from 1.3.25 theming is available by using for example in global styles.scss:

.dark-theme {
    --default-border-color: white;
    --default-border-outline-color: white;
    --default-focus-color: white;
    --default-border-outline-color: white;
    --default-disabled-color: #6e6e6e;
    --default-text-color: white;
    --default-background-color: #313131;
    --default-hover-color: #3b3b3b;

    --disabled-color: #9b9b9b;

    background: #242424;
    color: white;

    --select-item-background-color: #555555;
    --select-item-text-color: white;

    --default-checkbox-color: #1477c9;
    --default-radio-color: #1477c9;

    --digit-fill-color: #535353;
    --digit-lighted-color: #cccccc;

    --temperature-text-color: white;
    --temperature-path-stroke-color: white;

    --post-diagram-scale-line-color: #7a7a7a;
}

.light-theme {
    --default-border-outline-color: #dfdfdf;
    --default-hover-color: #eeeeee;
    --default-background-color: white;
    --default-text-color: #303030;
}

WARNING! Switching theme class must be assigned to body element of dom. Because popup elements are added on top level so call outside of the box so you can't wrap them properly from component level

You can use this piece of code to switch this one correctly:

toggleStyle() {
    const body = document.body;
    if (body.classList.contains('dark-theme')) {
        body.classList.add('light-theme');
        body.classList.remove('dark-theme');
    } else {
        body.classList.add('dark-theme');
        body.classList.remove('light-theme');
    }
}

History of changes

02-02-2022 - v1.5.20 repair base path for icons & dropdown style

25-01-2022 - v1.5.16 repair downloading file method

25-01-2022 - v1.5.15 add global style for cdk

24-01-2022 - v1.5.14 add file service

23-01-2022 - v1.5.13 add Drawable interface & draw method to drawing context object

23-01-2022 - v1.5.12 add ResizeWindowService to react on windows size changes

22-01-2022 - v1.5.11 add clear rect for canvas interface

22-01-2022 - v1.5.10 add closing polyline option to drawing interface function

22-01-2022 - v1.5.9 add DrawingCanvasInterface

20-01-2022 - v1.5.8 add oblTextArea directive

17-01-2022 - v1.5.7 add obl-message-dialog component to make life more simple for simple message dialogs at least

16-01-2022 - v1.5.6 it's time to change way of dealing with the oblButton directive. Now it's control colors by class and guess what? You can set own by your self and use mixin to create new set of style for buttons theme.

15-01-2022 - v1.5.4 finally add some basic modal things

06-01-2022 - v1.5.1 add icons module with obl-icon component and IconResourceService

02-01-2022 - v1.4.23 search mode loop icon in input wrapper

30-12-2021 - v1.4.22 add cancel button on input-wrapper

30-12-2021 - v1.4.20 create AbstractSearchDomain & change way of handling DropdownSelect component by model to give you control over source of data

29-12-2021 - v1.4.15 remove materials components from color picker component

29-12-2021 - v1.4.14 add outline/underline mode for input wrapper

28-12-2021 - v1.4.13 remove ugly text and add icons on input wrapper button of number type input

28-12-2021 - v1.4.12 add buttons for number input in input wrapper

28-12-2021 - v1.4.11 add spinner on tree component

28-12-2021 - v1.4.10 add obl-spinner component

28-12-2021 - v1.4.8 add obl-star-rating component

27-12-2021 - v1.4.6 add labels to selects elements

27-12-2021 - v1.4.5 add label to input wrapper

27-12-2021 - v1.4.3 add tree component

26-12-2021 - v1.4.2 update angular to 13.1.1. and material too

25-12-2021 - v1.4.1 no more lib- prefix from now on only obl- one is used

25-12-2021 - v1.3.28 add button theming directive

25-12-2021 - v1.3.27 a little bit theming for post diagram component

24-12-2021 - v1.3.26 add colors theming control for temperature component

24-12-2021 - v1.3.25 prepare to theming the library stuff outside of the lib

22-12-2021 - v1.3.24 add obl-input directive & obl-input-wrapper component

19-12-2021 - v1.3.23 add obl-group-select component

19-12-2021 - v1.3.22 add obl-radio-group & obl-radio component

19-12-2021 - v1.3.21 add validators

18-12-2021 - v1.3.19 add obl-dropdown-multi-select component

18-12-2021 - v1.3.18 add obl-checkbox component

18-12-2021 - v1.3.16 add templateSuffix & templatePrefix to obl-dropdown-select

17-12-2021 - v1.3.14 add obl-dropdown-select component with draggable dropdown

15-12-2021 - v1.3.13 add dropdown button component

14-12-2021 - v1.3.12 use cdk in obl-color-picker component

13-12-2021 - v1.3.8 update material to 13.1.0

13-12-2021 - v1.3.7 play basic model

11-12-2021 - v1.3.6 remove drag & drop emitters and use ChessAbstractModel

11-12-2021 - v1.3.5 chess component add some extra classes for pieces

10-12-2021 - v1.3.3 reverse columns on chess component fix

10-12-2021 - v1.3.2 - lit-clock-time date input as Date | number, number, number

9-12-2021 - v1.3.1 remove lib part from library paths

9-12-2021 - v1.2.22 add obl-channel-volume component

9-12-2021 - v1.2.21 add obl-equalizer component

8-12-2021 - v1.2.19 add reverse method to obl-chess that let you change board position of white pawns fields

8-12-2021 - v1.2.18 add couple of new options to control obl-clock-time & obl-pie-progress controls

7-12-2021 - v1.2.17 add obl-clock-time component

5-12-2021 - v1.2.16 move DrawingPdfInterface to separated endpoint

4-12-2021 - v1.2.15 create obl-two-arch-progress component

4-12-2021 - v1.2.14 create obl-arch-progress component

4-12-2021 - v1.2.13 create obl-pie-progress component

4-12-2021 - v1.2.12 create obl-temperature component

2-12-2021 - v1.2.11 add event emitters for chess component on drag and drop and blocking default set chess on drop to handle it by your self

1-12-2021 - v1.2.10 add chess component

20-11-2021 - v1.2.8 add color function for formatting colors

20-11-2021 - v1.2.7 add text formatting input function for pie diagram

19-11-2021 - v1.2.5 add export to pdf file button for pie diagram

19-11-2021 - v1.2.4 fix problem with small pie values displaying on flat pie diagram

18-11-2021 - v1.2.3 add obl-flat-pie-diagram component

12-11.2021 - v1.2.2 event emit when calendar position was clicked

11-11-2021 - v1.2.1 upgrade to Angular 13!

11-11-2021 - v1.1.42 add basic calendar component with events to display on it

09-11-2021 - v1.1.41 add minus digit

08-11-2021 - v1.1.40 add digit module with digits components

07-11-2021 - v1.1.39 more flexible horizontal progress bar implementation

05-11-2021 - v1.1.38 auto recalculate dx & dy greed for 3D diagram component

05-11-2021 - v1.1.37 add export button to pdf for 3D diagram component

05-11-2021 - v1.1.36 a basic stuff of drawing 3D diagram

30-10-2021 - v1.1.35 add template to hover element

30-10-2021 - v1.1.34 repair bug connected to positioning pdf export button and tooltip

30-10-2021 - v1.1.33 add component DiagramPointHoverComponent that connect thru ng-content to LinerDiagram2DComponent and display point info on hover for vectors with displaying point option

30-10-2021 - v1.1.(31-32) add option to turn on cursor on diagram

29-10-2021 - v 1.1.30 add option to control align text of Y axis (and move y axis to right or left side of diagram)

27-10-2021 - v 1.1.29 yFormatter function

27-10-2021 - v 1.1.28 fix problem for negative value diagram

26-10-2021 - v 1.1.27 add x/y precision option

26-10-2021 - v 1.1.26 correct default drawing point fu

26-10-2021 - v 1.1.25 add possibility to draw points in your own way

23-10-2021 - v 1.1.24 add drawing legend option

21-10-2021 - v 1.1.23 fix align text problem in export to pdf

21-10-2021 - v 1.1.22 add clipping rec to svg and jspdf interface on grouping stuff!!!

20-10-2021 - v 1.1.21 group different parts of svg diagram using g element

19-10-2021 - v 1.1.20 add disable option to obl-slider component

19-10-2021 - v 1.1.19 add SliderModule with obl-slider component

18-10-2021 - v 1.1.18

18-10-2021 - v 1.1.16 correct min max settings

17-10-2021 - v 1.1.15 remove unnecessary classes

17-10-2021 - v 1.1.14 move classes to separated folder

17-10-2021 - v 1.1.13 move math class

17-10-2021 - v 1.1.12

17-10-2021 - v 1.1.11 move colors classes to separated lib folder call classes

17-10-2021 - v 1.1.10 change name obl-status-bar to obl-ball-progress-bar and move it to separated module

16-10-2021 - v 1.1.9 add autoIncreaseDecrease option for x & y axis

16-10-2021 - v 1.1.8 add dp option for scale x and y

16-10-2021 - v 1.1.7 disable option for drawing line

16-10-2021 - v 1.1.6 add possibility of displaying points on diagram

15-10-2021 - v 1.1.5 add more then one setting for vector of points styles

15-10-2021 - v 1.1.4 add button for downloading diagram as PDF in obl-linear-diagram-2d

14-10-2021 - v 1.1.3 add possibility of add more then one vector of points for obl-linear-diagram-2d

Upgrade to Angular 12!

Components inside lib

Inside library You can find components:

from DropdownButtonModule

obl-dropdown-button

from PostDiagramModule

obl-post-diagram

from BallProgressBarModule

obl-flat-pie-diagram

obl-ball-progress-bar

from PieProgressModule

obl-pie-progress

from ArchProgressModule

obl-arch-progress

obl-two-arch-progress

from ColorPickerModule

obl-color-picker-control

obl-color-component

from HorizontalProgressBarModule

obl-horizontal-progress-bar

from LinearDiagramModule

obl-linear-diagram-2d

obl-diagram-point-hover

from Diagram3DModule

obl-diagram3-d

from SliderModule

obl-slider

from DigitalModule

obl-digit

obl-digits

obl-digital-timer

from DateModule

obl-calendar

obl-calendar-event

obl-month-control

from ChessModule

obl-chess

from CheckboxModule

obl-checkbox

from TemperatureModule

obl-temperature

from TimeModule

obl-clock-time

from ChannelVolumeModule

obl-equalizer

obl-channel-volume

from DropdownModule

obl-dropdown-select

from DropdownMultiSelectModule

obl-dropdown-multi-select

from RadioModule

obl-radio-group

obl-radio

from TreeModule

obl-tree

from RatingModule

obl-star-rating

from LoadingModule

obl-spinner obl-loading-state

from IconsModule

obl-icon

from PasswordModule

obl-password-strength

from CategoriesModule

obl-half-matrix-combine-categories

obl-combine-categories

obl-single-combination

from StepperModule

obl-progress-stepper obl-progress-vertical-stepper

Using obl-diagram

Install package:

npm i @obliczeniowo/elementary

Import module:

import { PostDiagramModule } from '@obliczeniowo/elementary/post-diagram';

...

  imports: [
    BrowserModule,
    AppRoutingModule,
    PostDiagramModule // here is import
  ],

Inside of your own component:

import { Component } from '@angular/core';
import { ColorHSV, ColorRGB } from '@obliczeniowo/elementary';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Diagram';
  xLabel = 'xLabel';
  yLabel = 'yLabel';

  diagramData: { [key: string]: number } = {
    'key 1': 100,
    'key 2': 200,
    'key 3': 1500,
    'key 4': 1,
    'key 5': 2,
    'key 6': 145,
    'key 7': 200,
    'key 8': 340,
    'key 9': 885,
    'key 10': 1234,
    'key 11': 450,
    'key 12': 800,
    'key 13': 3900,
    'key 14': 1300,
    'key 15': 1200,
    'key 16': 2500,
    'key 17': 1300,
    'key 18': 1200,
    'key 19': 2500,
  };

  colorFunction = (
    index: number,
    dataLength: number,
    value: number,
    max: number
  ): ColorRGB => {
    return ColorHSV.createColorHSV(
      180 - (180 * value) / max,
      0.5,
      255
    ).convertToRGB();
  }
}

In HTML:

<obl-post-diagram
    [diagramData]="diagramData"
    [diagramTitle]="title"
    [xLabel]="xLabel"
    [yLabel]="yLabel"
    [colorFunction]="colorFunction"
>
</obl-post-diagram>

Live example of working component is on my page: https://obliczeniowo.com.pl/1142

Using obl-flat-pie-diagram

In HTML:

<obl-flat-pie-diagram [data]="diagramData"></obl-flat-pie-diagram>

in ts:

diagramData: { [key: string]: number } = {
    'key 1': 100,
    'key 2': 200,
    'key 3': 1500,
    'key 4': 1,
    'key 5': 2,
    'key 6': 145,
    'key 7': 200,
    'key 8': 340,
    'key 9': 885,
    'key 10': 1234,
    'key 11': 450,
    'key 12': 800,
    'key 13': 3900,
    'key 14': 1300,
    'key 15': 1200,
    'key 16': 2500,
    'key 17': 1300,
    'key 18': 150,
    'key 19': 2500,
};

Live component: https://obliczeniowo.com.pl/1244

Using obl-status-bar

Example of use in html without 3d effect:

<obl-ball-progress-bar [value]="20" [effect3d]="false"></obl-ball-progress-bar>

Example of use in html with 3d effect

<obl-ball-progress-bar [value]="20"></obl-ball-progress-bar>

WARNING! On Firefox component not working correctly

Live example of working component is on my page: https://obliczeniowo.com.pl/1144

Using obl-color-picker-control and obl-color-component

Example of use in html for color picker with button:

<obl-color-picker-control></obl-color-picker-control>

Example of use in html for color component without button:

<obl-color-component></obl-color-component>

Using obl-pie-progress

<obl-pie-progress [value]="progress" [size]="100"></obl-pie-progress>

Live example https://obliczeniowo.com.pl/1244

Using obl-arch-progress

<obl-arch-progress [value]="progress" [size]="50"></obl-arch-progress>

Live example https://obliczeniowo.com.pl/1244

Using obl-two-arch-progress

<obl-two-arch-progress [first]="progress" [second]="progress / 2" [size]="150"></obl-two-arch-progress>

Live example https://obliczeniowo.com.pl/1244

Using obl-horizontal-progress-bar

Example of use in html for horizontal progress bar:

<obl-horizontal-progress-bar [value]="value" class="black"><obl-horizontal-progress-bar>

To change default colors use SCSS mixin:

@mixin vertical-progress-bar($class, $value-color, $background-color, $value-background-color, $frame-color) {
    ::ng-deep .#{$class} {
        #value {
            fill: $value-color !important;
        }

        #background-pattern {
            fill: $background-color !important;
        }

        #value-pattern {
            fill: $value-background-color !important;
        }

        #border-rect {
            stroke: $frame-color !important;
        }
    }
}

and make some kind of include stuff:

@include vertical-progress-bar('black', white, #bebebe, black, #bebebe);

More on my home page: https://www.obliczeniowo.com.pl/1241

Using obl-linear-diagram-2d

In html

<obl-linear-diagram-2d [points]="points" [labels]="{ x: xLabel, y: yLabel, title: title }">
</obl-linear-diagram-2d>

in ts file of component:

points: Point2D[] = []; // imported from import { Point2D } from '@obliczeniowo/elementary/linear-diagram';

constructor() {
  for (let i = 0; i < 100; i++) {
    this.points.push(
        new Point2D(i, Math.random() * 100)
    );
  }
}

Example with changing settings of vector points line color and drawing points:

<obl-linear-diagram-2d
    [points]="points"
    [labels]="{ x: xLabel, y: yLabel, title: title }"
    [options]="{
        set: [{
            color: '#ffaa00',
            stroke: 1,
            linePattern: LinePattern.NONE,
            drawPoint: PointType.CIRCLE
        },
        {
            color: '#aaff00',
            stroke: 2,
            linePattern: LinePattern.NONE,
            drawPoint: PointType.X
        },
        {
            color: '#aa00ff',
            stroke: 2,
            linePattern: LinePattern.NONE,
            drawPoint: PointType.STAR
        },
        {
            color: '#aabbff',
            stroke: 1,
            linePattern: LinePattern.DISABLED,
            drawPoint: PointType.STAR
        }]
    }"
    >
</obl-linear-diagram-2d>

Where LinePattern need to be imported in ts component file:

import { LinePattern } from 'dist/components/linear-diagram';

and then in component class:

LinePattern = LinePattern;

You can override more options just using interface:

export interface LinearDiagram2DOptions {
    xAxis?: AxisOptions;
    yAxis?: AxisOptions;
    xMinMax?: MinMax;
    yMinMax?: MinMax;
    greed?: GridOptions;
    set?: BaseDrawingOptions[];
}

You can see live example on my home page: https://obliczeniowo.com.pl/1239

Using obl-diagram3-d

In ts file generate a table of z values:

zValues: number[][] = [];

for (let x = 0; x < 20; x++) {
  const v = [];
  for (let y = 0; y < 20; y++) {
    v.push((Math.sin(x / 4) + Math.cos(y / 4)) * 50 - x * x / 10);
  }
  this.zValues.push(v);
}

in html:

<obl-diagram3-d [zValues]="zValues" [latitude]="latitude" [longitude]="longitude">
</obl-diagram3-d>

Live working diagram showcase can be see here: https://obliczeniowo.com.pl/1241

Example of use obl-slider component

Import:

import { SliderModule } from '@obliczeniowo/elementary/slider';

in html:

<obl-slider [value]="30" (valueChanged)="changed($event)"></obl-slider>

or

<form [formGroup]="form">
    <obl-slider formControlName="valueControl" [value]="30"></obl-slider>
</form>

{{ form.getRawValue() | json }}

in component.ts for forms:

form = this.fb.group({
    valueControl: [60]
});

...

constructor(private fb: FormBuilder) {
    ...

Digital module

Example of use obl-digit

Code bellow display single digital number:

<obl-digit digit="0"></obl-digit>

Example of use obl-digits

Code bellow display integer number or string containing number

<obl-digits [integer]="1234567890"></obl-digits>

Example of use obl-digit-timer

Code bellow display digital timer:

<obl-digital-timer></obl-digital-timer>

Live working example

Live working diagram showcase can be see here: https://obliczeniowo.com.pl/1243

Example of use obl-calendar component with obl-mont-control & obl-calendar-event

In html file:

<obl-month-control #monthControl></obl-month-control>

<obl-calendar
[monthControl]="monthControl"
[eventsList]="eventsList || null"
></obl-calendar>

<obl-events-list #eventsList>
<obl-calendar-event
    *ngFor="let event of eventsListData"
    [eventSettings]="event"
    ngProjectAs="evangelist"
>
    <h3
    ngProjectAs="title"
    [style.backgroundColor]="event.color"
    class='event-title'
    >
    {{ event.title }}
    </h3>
    <div ngProjectAs="body" class="event-body">
    {{ event.body }}
    </div>
</obl-calendar-event>
</obl-events-list>

in css or scss:

h3.event-title {
    display: flex;
    margin: 0;
    padding: 5px;
    font-size: 22px;
}

.event-body {
    padding: 30px 5px 5px 5px;
    display: flex;
}

obl-month-control {
    width: 320px;
}

in ts file:

export interface EventData extends EventSettings {
    title: string;
    body: string;
}

...

@Component(
    ...

    eventsListData: EventData[] = [];

    ...

    constructor() {
        const date = new Date();

        this.eventsListData.push({
        day: new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-14'),
        color: '#ffcc00',
        body: 'Some text for 14 day of ' + (date.getMonth() + 1) + 'th month',
        title: '14 day of ' + (date.getMonth() + 1) + ' th month'
        });

        this.eventsListData.push({
        day: new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-28'),
        color: '#189a18',
        body: 'Some text for 28 day of ' + (date.getMonth() + 1) + ' th month',
        title: '28 day of ' + (date.getMonth() + 1) + ' th month'
        });
    }

Live working example

Life example: https://www.obliczeniowo.com.pl/1143

Example of use obl-chess component

In HTML:

<obl-chess [chessPawnsMap]="chessPawns"></obl-chess>

In ts file constructor of component:

chessPawns: Map<string, ChessEnum> = new Map<string, ChessEnum>();

constructor() {
    this.chessPawns.set('a1', ChessEnum.whiteRook);
    this.chessPawns.set('h1', ChessEnum.whiteRook);

    this.chessPawns.set('a8', ChessEnum.blackRook);
    this.chessPawns.set('h8', ChessEnum.blackRook);

    this.chessPawns.set('b1', ChessEnum.whiteKnight);
    this.chessPawns.set('g1', ChessEnum.whiteKnight);

    this.chessPawns.set('b8', ChessEnum.blackKnight);
    this.chessPawns.set('g8', ChessEnum.blackKnight);

    this.chessPawns.set('c1', ChessEnum.whiteBishop);
    this.chessPawns.set('f1', ChessEnum.whiteBishop);

    this.chessPawns.set('c8', ChessEnum.blackBishop);
    this.chessPawns.set('f8', ChessEnum.blackBishop);

    this.chessPawns.set('d1', ChessEnum.whiteQueen);
    this.chessPawns.set('e1', ChessEnum.whiteKing);

    this.chessPawns.set('d8', ChessEnum.blackQueen);
    this.chessPawns.set('e8', ChessEnum.blackKing);

    for (const i of ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']) {
        this.chessPawns.set(i + 2, ChessEnum.whitePawn);
        this.chessPawns.set(i + 7, ChessEnum.blackPawn);
    }
}

Live example of component: https://obliczeniowo.com.pl/1150

Example of use obl-temperature

<obl-temperature [value]="20" [max]="100" [min]="-10"></obl-temperature>

Live example https://obliczeniowo.com.pl/1244

Example of use obl-clock-time component

<obl-clock-time [size]="250" [display]="{ time: false, seconds: true }" [date]="date"></obl-clock-time>

Example of use obl-equalizer component

In html file:

<div class="equalizer"><obl-equalizer [data]="equalizer"></obl-equalizer></div>

In scss/css file:

.equalizer {
    background-color: #3b3b3b;
}

In ts file:

equalizer = new Array<number>(20).fill(0);
timer: any;

...

ngAfterViewInit(): void {
    let dt = 0;
    this.timer = setInterval(() => {
        dt ++;

        this.equalizer = this.equalizer.map((value, index) => 0.5 * Math.sin(Math.PI / 10 * (index + dt)) + 0.5);
    }, 100);
}

add channel volume

In html file:

<div class="volume-channel">
    <obl-channel-volume [volumeLeft]=".5" [volumeRight]="0.9"></obl-channel-volume>
</div>

In scss/css file:

.volume-channel {
    background-color: #3b3b3b;
}

example of using obl-dropdown-button component

In HTML:

<obl-dropdown-button [buttons]="buttons" [templateRef]="icon"></obl-dropdown-button>
<ng-template #icon let-button>
    <mat-icon [svgIcon]="button.svgIcon || ''">{{ button.matIcon }}</mat-icon>
</ng-template>

In ts file:

buttons: DropdownButton[] = [
    {
        matIcon: 'cancel',
        cb: () => console.log('message 1')
    },
    {
        matIcon: 'delete',
        cb: () => console.log('message 2')
    },
    {
    matIcon: 'download',
        cb: () => console.log('message 3')
    }
];

example of using obl-dropdown-select

In HTML:

<form [formGroup]="form">
    <obl-dropdown-select formControlName="item" [model]="model"></obl-dropdown-select>
</form>

<div>{{ form.getRawValue() | json }}</div>

In ts file:

model!: DefaultSearchDomain<DropdownSelectItem<{ icon: string; value: number }>>;

...

constructor(private fb: FormBuilder) {
    const items: DropdownSelectItem[] = []
    for(let i = 0; i < 50; i++) {
        items.push(
            {
            id: i,
            text: `item ${i + 1}`,
            }
        );
    }

    this.model = new DefaultSearchModel<DropdownSelectItem<any>>(items);

    form = this.fb.group({
        item: [5]
    });

    ...

example of using obl-dropdown-multi-select

In HTML:

<form [formGroup]="form">
    <obl-dropdown-multi-select formControlName="item" [items]="items"></obl-dropdown-multi-select>
</form>

<div>{{ form.getRawValue() | json }}</div>

In ts file:

items: DropdownSelectItems[] = [];

...

constructor(private fb: FormBuilder) {
    for(let i = 0; i < 50; i++) {
        this.items.push(
            {
            id: i,
            text: `item ${i + 1}`,
            }
        );
    }

    form = this.fb.group({
        item: [[5, 2]]
    });

    ...

example of using obl-checkbox

In ts file:

form: FormGroup;

...

constructor(private fb: FormBuilder) {
    form = this.fb.group({
        valueControl: [60],
        item: [5],
        check1: [true],
        check2: [false]
    });

    ...

In html:

<form [formGroup]="form">
    <obl-checkbox formControlName="check1">Checkbox 1</obl-checkbox>
    <obl-checkbox formControlName="check2">Checkbox 2</obl-checkbox>
    </div>
</form>

<div>{{ form.getRawValue() | json }}</div>

Example of using obl-radio-group & obl-radio

In ts:

form: FormGroup;

options: RadioItem[] = [];

...

constructor(private fb: FormBuilder) {

    for (let i = 0; i < 10; i++) {
        this.options.push({ id: i, text: `item ${i}` });
    }

    this.form = this.fb.group({
        itemMultiple: [{ value: [] }, MultiSelectValidators.min(1)]
    });

In html:

<form [formGroup]="form">
    <obl-radio-group [options]="options" formControlName="radioItems"></obl-radio-group>

    <button mat-button (click)="form.markAllAsTouched()">submit</button>
</form>

Basic example of using obl-group-select

In ts:

itemsGroup: DropdownGroupSelectItem<any>[] = [
    {
    id: 'direction',
    title: 'Sort',
    value: 1,
    options: [
        {
        id: 1,
        text: 'Decreasing'
        },
        {
        id: 2,
        text: 'Increasing'
        }
    ]
    },
    {
    id: 'by',
    title: 'By',
    value: 1,
    options: [
        {
        id: 1,
        text: 'Name'
        },
        {
        id: 2,
        text: 'Date'
        },
        {
        id: 3,
        text: 'Country'
        }
    ]
    },
    {
    id: 'display',
    title: 'View',
    value: 1,
    options: [
        {
        id: 1,
        text: 'Basic'
        },
        {
        id: 2,
        text: 'Full'
        }
    ]
    }
];

constructor(private fb: FormBuilder) {
    form = this.fb.group({
        itemsGroup: [{value: { direction: 1, by: 2, display: 2}, disabled: false}]
    });

In html:

<form [formGroup]="form">
    <obl-dropdown-group-select
        [items]="itemsGroup"
        formContro