Ngx-sfc-components NPM

ngx-sfc-components

This library contains components for Street Football Club (SFC) project.

Get started

Run npm install ngx-sfc-components or ng add ngx-sfc-components.

Import NgxSfcCommonModule into a module where you intend to use components and directives:

import { NgxSfcComponentsModule } from 'ngx-sfc-components';
@NgModule({
  imports: [ NgxSfcComponentsModule ]
})
export class SomeModule { }

Components

Avatar `<sfc-avatar>`

Component display player/user rounded photo image with progress bar and information. Allowed to add player rating as stars view and add badges for additional info.

<sfc-avatar [radius]="160" [stroke]="1" [progress]="50" [progressModel]="progressColor" [stars]="true" [starsValue]="2.15" [data]="dataImage">
               <sfc-avatar-badge [position]="AvatarBadgePosition.Right" [background]="'#8CC152'">
                   <fa-icon [icon]="faCopyright"></fa-icon>
               </sfc-avatar-badge>
</sfc-avatar>

Parameters: 1. [radius] - define avatar size (component size must be used with relevance to this value) 2. [stroke] - size of avatar progress circle 3. [progress] - set value for avatar's progress line 4. [progressModel] - model that define color for progress line

export interface IAvatarProgressModel {
    color?: string;
    filledColor?: string;
}

[data] - provide information about player/user

export interface IAvatarDataModel {
    firstName?: string;
    lastName?: string;
    image?: string;
    title?: string;
}

[stars] - show/hide stars as player raiting
[starsValue] - value for stars

Avatar's badge has two parameters: 1. [background] - background color 2. [position] - static position of badge

export enum AvatarBadgePosition {
    Top = 'top',
    RightTop = 'right-top',
    Right = 'right',
    RightBottom = 'right-bottom',
    Bottom = 'bottom',
    LeftTop = 'left-top',
    Left = 'left',
    LeftBottom = 'left-bottom',
}

Chart `<sfc-chart>`

It's a component wrapper on chart.js library with extra logic for theming and displaying charts.

<sfc-chart [theme]="theme" [type]="chartType" [options]="verticalChartOptions" [chartOptions]="chartOptions" [data]="getData()"
          [datasets]="datasets" [labels]="labels" [plugins]="plugins">
</sfc-chart>

Parameters: 1. [type] - chart type (line, bar, pie, doughnut, radar and polar) 2. [theme] - support two themes (default and dark)

export enum Theme {
    Default = 'sfc-default-theme',
    Dark = 'sfc-dark-theme'
}

[options] - chart.js options
[chartOptions] - options for setting frequently used chart.js options

export interface ChartOptionModel {
    legend?: boolean;
    gridLines?: boolean;
    xAxe?:boolean;
    yAxe?:boolean;
    tooltip?: boolean;
    ticks?: boolean;
    defaultColors?: boolean;
}

[data] - chart.js data
[plugins] - chart.js plugins
[datasets] - chart.js datasets
[labels] - chart.js labels

Menus

Several types of menus:

Side `<sfc-side-menu>`

Side menu that can be expanded to the right and can have sub-menus.

<sfc-side-menu [model]="MENU_MODEL_3" (selected)="onSelect($event)"></sfc-side-menu>

Parameters: 1. [model] - model for menu, contains info about constructed items of menu

export interface ISideMenuModel {
    open: boolean; // expanded or not
    items: ISideMenuItemModel[];
}

export interface ISideMenuItemModel {
    active: boolean; // selected or not
    label: string;
    icon: string;
    type: SideMenuItemType;
    items?: ISideMenuItemModel[]; // if not empty - has sub-menu items
}

export enum SideMenuItemType {
    Item = 'item', 
    Title = 'title' // not selected
}

(selected) - emit handler for selecting menu items

Dropdown `<sfc-dropdown-menu>`

Component allow to define context menu.

<sfc-dropdown-menu [items]="MODEL" [icon]="faStar" label="Test label" [hideOnClick]="false"
                  [hideOnClickOutside]="false" [bordered]="true" [position]="Position.Right"
                  [open]="false">
</sfc-dropdown-menu>

Parameters: 1. [items] - menu items

export interface IDropdownMenuItemModel {
    label: string;
    icon?: string;
    delimeter?: boolean; // add dlimeter after menu item
    click?: (item: IDropdownMenuItemModel) => void; // click handler
}

[icon] - icon for menu item
[label] - menu item label
[hideOnClick] - if true, on item click - menu will be hidden
[hideOnClickOutside] - if true, when click outside menu - hide menu
[bordered] - add border to menu dots
[position] - define where menu wil be appear

export enum Position {
    Top = 'top',
    Bottom = 'bottom',
    Left = 'left',
    Right = 'right',
    Center = 'center'
}

[open] - define if menu will be open on init

Navigation `<sfc-navigation-menu>`

Simple responsive navigation menu.

<sfc-navigation-menu [items]="MODEL" (selected)="onSelect($event)"></sfc-navigation-menu>

Parameters: 1. [items] - menu items

export interface INavigationMenuItemModel {
    label: string;
    active: boolean; // define selected item
    icon?: string;
    click?: (item: INavigationMenuItemModel) => void;
}

(selected) - emit handler for selecting menu items

Notification `<sfc-notification>`

Component created for implementing user notification with details and actions.

<sfc-notification [model]="btnNotification" [showClose]="true" [autoCloseModel]="autoCloseModel" [type]="NotificationType.Info" 
                 [content]="contentRef" (closed)="onClose()" (buttonClicked)="onButtonClick()">
</sfc-notification>

Parameters: 1. [model] - notification model

export interface INotificationContentModel {
    title?: string;
    subTitle?: string;
    showButton?: boolean;
    buttonText?: string;
    icon?: string;
    image?: string;
}

[showClose] - show/hide close icon
[autoCloseModel] - auto close notification model

export interface INotificationAutoCloseModel {
    enabled: boolean;
    interval?: number; // after what time notification will be closed
}

[type] - UI type of notification

export enum NotificationType {
    Info = 'info',
    Success = 'success',
    Failed = 'failed'
}

[content] - hold content reference for template, if it not provided and content template also missing, than default content will be created.
(closed) - emit handler for closing notification
(buttonClicked) - emit handler for default notification content button click

Progresses

Several types of progress components:

Line `<sfc-progress-line>`

Progress bar as line view

<sfc-progress-line labelStart="Dribbling" labelEnd="value:55" [progress]="55" background="red" [getColor]="getColor"
                  [total]="100" [hideEnd]="true">
</sfc-progress-line>

Parameters: 1. labelStart - text at the start of bar line 2. labelEnd - text at the end of bar line 3. [progress] - progress value 4. background - color for background of line (not progressed part of line) 5. [getColor] - custom function for defined colors for progress value 6. [total] - max value for progress bar 7. [hideEnd] - show/hide progress value text or labelEnd value at the end of bar

Semi-circle `<sfc-progress-semi-circle>`

Progress bar as semi-circle view

<sfc-progress-semi-circle background="green" [progress]="60" [getColor]="getColor" [limits]="true"
                          [max]="100" [min]="0">
</sfc-progress-semi-circle>

Parameters: 1. [progress] - progress value 2. background - color for background of line (not progressed part of line) 3. [getColor] - custom function for defined colors for progress value 4. [limits] - show/hide min and max value text 5. [min] - minimum value 6. [max] - maximum value

Circle `<sfc-progress-circle>`

Progress bar as circle view

<sfc-progress-circle background="green" [progress]="60" [getColor]="getColor"></sfc-progress-circle>

Parameters: 1. [progress] - progress value 2. background - color for background of line (not progressed part of line) 3. [getColor] - custom function for defined colors for progress value

Slider `<sfc-slider>`

Image slider component with titles, pagination dots and buttons for slide.

<sfc-slider [items]="items" [pagination]="false" [showCount]="true" [type]="SliderType.Automatic"></sfc-slider>

Parameters: 1. [items] - items for slider

export interface ISliderItemModel {
    imageSrc: string;
    title?: string;
    subTitle?: string;
}

[pagination] - show/hide dots pagination
[showCount] - show/hide image count
[type] - type of slider

export enum SliderType {
    Default = 'default',
    Automatic = 'automatic'
}

Stars `<sfc-stars>`

Responsive component for visual displaying some value or progress as stars.

<sfc-stars [value]="1.5" [count]="3"></sfc-stars>

Parameters: 1. [value] - current value (e.x. if count=3 and value is 1.5 - half of all stars will be filled) 2. [count] - stars count

Table `<sfc-table>`

Component for displaying data in the form of a table. Has paginate data posibility and sorting by columns. Each table item can be in two states: row and card. Each row and card can be selected or selected all. Table component can be modified by replacing row/cars by custom implementation. Also implemented expanded row. Table is a responsive component.

<sfc-table [columns]="columnsListItems" [data]="dataListItems" [position]="Position.Center"
          [selectable]="true" [selectOnClick]="false" [delimeter]="false" 
          [dataType]="TableDataType.Rows" [dataToggle]="true" [showColumns]="true" 
          [pagination]="paginationModel" [sequence]="true" [expanded]="false" #listItemsTable>
   <ng-template [sfcTemplateReference]="TableTemplate.Column" let-column>
       <table-custom-column [label]="column.name" [active]="column.sorting.active">
       </table-custom-column>
   </ng-template>
   <ng-template [sfcTemplateReference]="TableTemplate.Row" let-list>
       <table-custom-row [data]="list.model" [columns]="list.columns" [position]="list.position"
                       [columnWidth]="list.columnWidth" (selected)="listItemsTable.selectRow($event)">
       </table-custom-row>
   </ng-template>
   <ng-template [sfcTemplateReference]="TableTemplate.Card" let-list>
       <table-custom-card [data]="list.model" [columns]="list.columns"></table-custom-card>
   </ng-template>
</sfc-table>

Parameters: 1. [position] - position for columns and data in row

export enum Position {
    Top = 'top',
    Bottom = 'bottom',
    Left = 'left',
    Right = 'right',
    Center = 'center'
}

[delimeter] - show/hide delimeter after columns
[dataType] - type of data visualization

export enum TableDataType {
    Rows = 'rows',
    Cards = 'cards'
}

[dataToggle] - show/hide toggle for changing dataType
[showColumns] - show/hide columns
[pagination] - pagination configuration

export interface ITablePaginationModel {
    enabled: boolean;
    page: number; // current page
    size: number; // how many items in one page
}

[sequence] - add/remove extra column at the start for row/card sequence number
[expanded] - define if row expanded or not
[selectable] - define if row/card expanded or not
[selectOnClick] - if true, than on click on whole row/card it will be selected, otherwise - will be selected only on checkmark click
[columns] - columns for table

export interface ITableColumnModel {
    name: string;
    field: string; // identificator for sorting
    icon?: string;
    sorting?: ISortingModel; // sorting configuration
}

export interface ISortingModel {
    enabled: boolean;
    active?: boolean;
    direction: SortingDirection;
    icons?: ISortingIcon[]; // icons for asc and desc
}

export interface ISortingIcon {
    direction: SortingDirection;
    icon: string
}

export enum SortingDirection {
    Ascending = 'ascending',
    Descending = 'descending'
}

[data] - plain array data
[data$] - table data as observable
[columnContent] - content reference for custom column
[rowContent] - content reference for custom row
[cardContent] - content reference for custom card

Default column:

<sfc-default-table-column [model]="column"></sfc-default-table-column>

Default row:

<sfc-default-table-row [columns]="vm.columns" [model]="item" [position]="position"
                       [columnWidth]="vm.columnWidth" [selectOnClick]="selectOnClick" (selected)="selectRow($event)">
</sfc-default-table-row>

Default card:

<sfc-default-table-row [columns]="vm.columns" [model]="item" [position]="position"
                       [columnWidth]="vm.columnWidth" [selectOnClick]="selectOnClick" (selected)="selectRow($event)">
</sfc-default-table-row>

Expanded:

<sfc-expanded-table-row [model]="row.model" [columns]="row.columns" [position]="row.position"
                       [columnWidth]="row.columnWidth">
    <ng-template [sfcTemplateReference]="ExpandedTableRowTemplate.Row" let-expandedRow>
        <table-custom-expanded-row [model]="expandedRow.model.dataModel"
                               [position]="expandedRow.position" [columnWidth]="expandedRow.columnWidth"
                               [expanded]="expandedRow.expanded" [index]="expandedRow.model.index"
                               (selected)="expandedTemplateTable.selectRow($event)">
        </table-custom-expanded-row>
    </ng-template>

    <ng-template [sfcTemplateReference]="ExpandedTableRowTemplate.Content" let-expandedContent>
        <table-custom-expanded-row-content [data]="expandedContent.model.dataModel.data.items"
                               [position]="expandedContent.position" [columnWidth]="expandedContent.columnWidth">
        </table-custom-expanded-row-content>
    </ng-template>

</sfc-expanded-table-row>

Tabs

Two possible tabs: line and icon.

Line `<sfc-tabs>`

Component for visual representation of line tabs

<sfc-tabs [tabs]="MODEL_SELECTED" [label]="labelRef" [slider]="sliderRef" [body]="bodyRef">
   <ng-template [sfcTemplateReference]="TabsTemplate.Label" let-label>
       <sfc-tab-label-line [selected]="label.selected" [disabled]="label.disabled" label="{{label.label}}"
                       icon="{{label.icon}}">
       </sfc-tab-label-line>
   </ng-template>

   <ng-template [sfcTemplateReference]="TabsTemplate.Slider" let-data>
       <sfc-tab-label-line-slider [count]="data.count" [index]="data.index">
       </sfc-tab-label-line-slider>
   </ng-template>

   <ng-template [sfcTemplateReference]="TabsTemplate.Body" let-data>
       {{data}}
    </ng-template>
</sfc-tabs>

Parameters: 1. [tabs] - collection of data for tabs items

export interface ITabModel {
    label?: string;
    icon?: string;
    selected: boolean;
    disabled: boolean;
    data: any; // data for tab body
}

[label] - content reference for label part of tab
[slider] - content reference for slider part of tab
[body] - content reference for body part of tab

There 3 pars of tabs that can be replaced:

export enum TabsTemplate {
    Label = 'label',
    Slider = 'slider',
    Body = 'body'
}

Line type of tabs use such components as parts:

Label

<sfc-tab-label-line [selected]="label.selected" [disabled]="label.disabled" label="{{label.label}}"
                       icon="{{label.icon}}">
</sfc-tab-label-line>

2. Slider

 ```html
<sfc-tab-label-line-slider [count]="data.count" [index]="data.index">
</sfc-tab-label-line-slider>

Icon `<sfc-tabs>`

Component for visual representation of icon tabs

<sfc-tabs [tabs]="MODEL_SELECTED" [label]="labelRef" [slider]="sliderRef" [body]="bodyRef">
   <ng-template [sfcTemplateReference]="TabsTemplate.Label" let-label>
       <sfc-tab-label-icon [selected]="label.selected" [disabled]="label.disabled" label="{{label.label}}"
           icon="{{label.icon}}">
       </sfc-tab-label-icon>
   </ng-template>

   <ng-template [sfcTemplateReference]="TabsTemplate.Slider" let-data>
       <sfc-tab-label-icon-slider [count]="data.count" [index]="data.index">
       </sfc-tab-label-icon-slider>
   </ng-template>

   <ng-template [sfcTemplateReference]="TabsTemplate.Body" let-data>
       {{data}}
    </ng-template>
</sfc-tabs>

Icon type of tabs use such components as parts:

Label

<sfc-tab-label-icon [selected]="label.selected" [disabled]="label.disabled" label="{{label.label}}"
           icon="{{label.icon}}">
</sfc-tab-label-icon>

2. Slider

 ```html
<sfc-tab-label-icon-slider [count]="data.count" [index]="data.index">
</sfc-tab-label-icon-slider>

Tags `<sfc-tags>`

Display collection of tags.

<sfc-tags [tags]="tags"></sfc-tags>

Parameters: 1. [tags] - collection of tags

export interface ITagModel {
    label: string;
    icon?: string;
}

Timeline `<sfc-timeline>`

Component for represent some period of time as vertical time line with dates and info.

<sfc-timeline [items]="items"></sfc-timeline>

Parameters: 1. [items] - timeline period items

export interface ITimelineItemModel{
    title: string; // period title
    position?: TimelineItemPosition; // left or right side
    dateTimeLabel?: string; // period time value (year, month or minutes)
    description?: string;
    period?: boolean; // if true, than mean it's a period title    
    icon?: string;
    image?: string;
}

export enum TimelineItemPosition {
    Left = 'left',
    Right = 'right'
}

Street Football Club SFC angular components responsive

tslib

@everything-registry/sub-chunk-2287 @infinitebrahmanuniverse/nolb-ngx-s

10 days ago

3 months ago

3 months ago

8 months ago