@obliczeniowo/elementary
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.87 • Public • Published

    Author

    Krzysztof Zajączkowski

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

    Intro

    I'm the king of my own Angular land
    Facing tempests of ideas, I'll fight until the end
    Components of my dreams, raise up and dance with me
    Now and forever
    I'm their king

    from 1.6.0 Angular 14 - list of changes

    23-09-2022 1.6.87 add posibility 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 inpit 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 oprion 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 oprion to obl-array-to-table

    10-09-2022 1.6.69 optimalize 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 td[obl-editable-ceil]

    08-09-2022 1.6.66 add header to obl-from-array
    add ehaders 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 metod for columns and global fix bug in parsing CSV file

    25-08-2022 1.6.50 add parsing string default method to overide in Csv class
    add set of parsing method for remove pair of quotes from begining 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 g[obl-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 funtionality

    13-08-2022 1.6.44 rapair position of gradient

    13-08-2022 1.6.43 add g[obl-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 drawed 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 drawed 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

    obl-half-matrix-combine-categories

    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 choosen 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 differents categories.

    obl-half-matrix-combine-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 CombineIdAdappter

    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;
    
        --tempeture-text-color: white;
        --tempeture-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 obeject

    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 DrowdownSelect 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- preffix 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 themming for post diagram component

    24-12-2021 - v1.3.26 add colors theming control for tempeture 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 & templatePreffix to obl-dropdown-select

    17-12-2021 - v1.3.14 add obl-dopdown-select component with dragable 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 emiters 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 chenge 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 DraingPdfInterface 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-tempeture component

    2-12-2021 - v1.2.11 add event emmitters 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 defautl drawing point fu

    26-10-2021 - v 1.1.25 add posibility 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 unnecesary 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 scrale x and y

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

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

    15-10-2021 - v 1.1.5 add more then one settins 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 posibility 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 TempetureModule

    obl-tempeture

    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 } = {
        klucz1: 100,
        'klucz 2': 200,
        'klucz 3': 1500,
        'klucz 4': 1,
        'klucz 5': 2,
        'klucz 6': 145,
        'klucz 7': 200,
        'klucz 8': 340,
        'klucz 9': 885,
        'klucz 10': 1234,
        'klucz 11': 450,
        'klucz 12': 800,
        'klucz 13': 3900,
        'klucz 14': 1300,
        'klucz 15': 1200,
        'klucz 16': 2500,
        'klucz 17': 1300,
        'klucz 18': 150,
        'klucz 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 withour 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" [lattitude]="lattitude" [longditude]="longditude">
    </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-contro & 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="eventslist"
    >
        <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-tempeture

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

    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-dopdown-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-dopdown-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: 'Sortuj',
        value: 1,
        options: [
            {
            id: 1,
            text: 'Malejąco'
            },
            {
            id: 2,
            text: 'Rosnąco'
            }
        ]
        },
        {
        id: 'by',
        title: 'Według',
        value: 1,
        options: [
            {
            id: 1,
            text: 'Nazwy'
            },
            {
            id: 2,
            text: 'Daty'
            },
            {
            id: 3,
            text: 'Kraju'
            }
        ]
        },
        {
        id: 'display',
        title: 'Widok',
        value: 1,
        options: [
            {
            id: 1,
            text: 'Podstawowy'
            },
            {
            id: 2,
            text: 'Pełny'
            }
        ]
        }
    ];
    
    contructor(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"
            formControlName="itemsGroup"
        ></obl-dropdown-group-select>
    </form>
    
    <div>
        {{ form.getRawValue() | json }}
    </div>
    

    Usage of obl-button directive:

    You can use default styling of button by simple adding the directive:

    <button (click)="toggleStyle()" libButton>change theme</button>
    

    Will use by default the variables:

    --obl-button-background-color: #d4d4d4;
    --obl-button-background-hover-color: #e6e6e6;
    --obl-button-text-color: black;
    --obl-button-text-disabled-color: gray;
    --obl-button-background-disabled-color: transparent;
    

    You can override them in styles.scss or create own one. For example:

    :root {
        --obl-button-background-color-red: rgb(204, 93, 93);
        --obl-button-background-hover-color-red: red;
        --obl-button-text-color-red: white;
        --obl-button-text-disabled-color-red: gray;
    }
    

    And then:

    <button (click)="toggleStyle()" libButton="red">change theme</button>
    

    And yeep from now on it will use suffixed one!

    Usage of tree component

    In HTML:

    <obl-tree [items]="itemsTree" (itemExpand)="itemExpand($event)" (itemClicked)="itemClicked($event)"></obl-tree>
    

    In ts file:

    itemsTree: TreeItem[] = [];
    
    constructor() {
        for (let i = 0; i < 10; i++) {
            this.itemsTree.push(
                {
                id: i,
                title: 'title ' + i,
                subItems: true,
                items: []
                });
        }
    }
    
    itemExpand(itemExpand: TreeExpandEvent): void {
        const items: TreeItem[] = [];
        for (let i = 0; i < Math.ceil(Math.random() * 10); i++) {
            items.push({ id: itemExpand.item.id + ' ' + i, title: `${itemExpand.item.title} ${i}`, subItems: true, items: [] });
        }
        itemExpand.cb(items);
    }
    
    itemClicked(treeItem: TreeItem): void {
        console.log(treeItem);
    }
    

    Using example of obl-star-rating

    In HTML:

    <obl-star-rating [nrOfStars]="7" [size]="30"></obl-star-rating>
    

    Install

    npm i @obliczeniowo/elementary

    DownloadsWeekly Downloads

    1,268

    Version

    1.6.87

    License

    ISC

    Unpacked Size

    8.85 MB

    Total Files

    825

    Last publish

    Collaborators

    • obliczeniowo