first commit

This commit is contained in:
Alessandro Seravalli 2025-05-06 18:17:04 +02:00
commit a6d4083e16
95 changed files with 30157 additions and 0 deletions
.angular.json.gitignorechangefile.ymlfid_git.ziplocal-gulpfile.jspackage-lock.jsonpackage.jsonreadme.mdsonar-project.properties
src
assets/xdce-module-widget-fideuram
index.tspackage.jsontsconfig.es5.jsontsconfig.spec.json
widgetfideuram
Utils.ts
components
nbp-bread-crumbs
nbp-fid-bar-chart
nbp-fid-button-bar
nbp-fid-combo
nbp-fid-donut-chart
nbp-fid-pyramid-chart
nbp-fid-side-popup
nbp-fid-table
nbp-fid-toggle-tabset
showcase
widget-fideuram-showcase
tools/gulp
tsconfig.jsontslint.json

28
.angular.json Normal file

@ -0,0 +1,28 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xdce-module-widget-fideuram-v1": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
}
}
},
"defaultProject": "xdce-module-widget-fideuram-v1",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
},
"xdce-schematics:xdce-ispbase-component": {
"moduleName": "xdce-module-widget-fideuram-v1"
}
}
}

6
.gitignore vendored Normal file

@ -0,0 +1,6 @@
node_modules
.tmp
build
docs
target

24
changefile.yml Normal file

@ -0,0 +1,24 @@
config:
node: "prod && linux"
build:
type: "npm_xdce"
skiptest: true
loglevel: "info" # available: info, debug, error
node_version: "10.24.1"
deployment:
openshift:
active: false
docker:
active: false
notification:
email: "fid.application.cm@fideuram.it" # available: indirizzo email
when: failure # available: always|success|failure
quality:
sonar:
active: true
unittest:
active: false

BIN
fid_git.zip Normal file

Binary file not shown.

58
local-gulpfile.js Normal file

@ -0,0 +1,58 @@
var gulp = require('gulp');
var path = require('path');
var fileSystem = require('fs');
var sass = require('gulp-sass');
/**
* task that compiles scss files under target/assets/styles/ and writes only styles.css (the only file that should be published).
* All other scss files are deleted from target/assets/styles/.
*/
gulp.task(
"custom:after-assets-copy",
() => {
var styleDest = path.join(configuration.distAssetsFolder, configuration.packageName, "styles");
return gulp.src([`${styleDest}/*.scss`, `^${styleDest}/_*.scss`])
.pipe(sass({
outputStyle: 'compressed',
includePaths: [`${styleDest}/"`]
}))
.pipe(gulp.dest(styleDest))
.on('end', function () {
return fileSystem.readdirSync(styleDest).forEach((file) => {
var curPath = path.join(styleDest, file);
if (fileSystem.lstatSync(curPath).isDirectory()) {
emptyFolder(curPath);
fileSystem.rmdirSync(curPath);
} else if (file.endsWith(".scss")){
fileSystem.unlinkSync(curPath);
}
})
});
}
);
function emptyFolder(directoryPath) {
if (fileSystem.existsSync(directoryPath)) {
fileSystem.readdirSync(directoryPath).forEach(function (file) {
var curPath = path.join(directoryPath, file);
if (fileSystem.lstatSync(curPath).isDirectory()) {
emptyFolder(curPath);
fileSystem.rmdirSync(curPath);
} else {
fileSystem.unlinkSync(curPath);
}
});
}
}
gulp.task('custom:after-all', function (){
var mainTask = process.argv.slice(2)[0];
if (mainTask === 'build:watch_local') {
var dest = path.join(process.cwd(), '..', 'pdca0-deploy-arch', 'node_modules', '@isp', 'xdce-module-widget-fideuram-v1');
if (fileSystem.existsSync(dest)){
emptyFolder(dest);
}
return gulp.src(`${configuration.distFolder}/**`)
.pipe(gulp.dest(dest));
}
});

19176
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

100
package.json Normal file

@ -0,0 +1,100 @@
{
"name": "@isp/xdce-module-widget-fideuram-v1",
"version": "0.1.0-snapshot.0",
"scripts": {
"git:push": "git push",
"release:major": "standard-version --skip.commit true --skip.tag true -r major && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -r major",
"release:minor": "standard-version --skip.commit true --skip.tag true -r minor && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -r minor",
"release:patch": "standard-version --skip.commit true --skip.tag true -r patch && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -r patch",
"release:alpha": "standard-version --skip.commit true --skip.tag true -p alpha && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -p alpha",
"release:rc": "standard-version --skip.commit true --skip.tag true -p rc && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -p rc",
"release:beta": "standard-version --skip.commit true --skip.tag true -p beta && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -p beta",
"build:dev": "gulp build:local --verbose --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
"build": "gulp build --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
"build:watch": "gulp --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
"build:watch_local": "gulp build:watch_local --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
"docs": "npm run docs:build",
"docs:build": "compodoc -p tsconfig.json -n xdce-module-tutorial -d docs --hideGenerator",
"docs:serve": "npm run docs:build -- -s",
"docs:watch": "npm run docs:build -- -s -w",
"lint": "tslint --type-check --project tsconfig.json src/**/*.ts",
"lite": "lite-server",
"playground:build": "tsc -p playground -w",
"playground": "concurrently \"npm run build:watch\" \"npm run playground:build\" \"npm run lite\"",
"test": "tsc && karma start"
},
"repository": {
"type": "git",
"url": "isp.com"
},
"author": {
"name": "xdce-schematics",
"email": "xdce-schematics@isp.com"
},
"keywords": [
"angular"
],
"license": "MIT",
"bugs": {
"url": "isp.com/issues"
},
"dependencies": {
"@angular/common": "7.1.0",
"@angular/compiler": "7.1.0",
"@angular/compiler-cli": "7.1.0",
"@angular/core": "7.1.0",
"@angular/forms": "7.1.0",
"@angular/platform-browser": "7.1.0",
"@angular/platform-browser-dynamic": "7.1.0",
"@angular/router": "7.1.0",
"@isp/xdce-arch-core": "1.50.30",
"@isp/xdce-arch-core-base": "1.21.8",
"@isp/xdce-widget": "1.125.2",
"ag-grid-angular": "22.1.1",
"ag-grid-community": "22.1.1",
"@ag-grid-community/all-modules": "22.1.1",
"d3": "^5.16.0",
"zone.js": "0.8.20"
},
"devDependencies": {
"@compodoc/compodoc": "1.1.5",
"@compodoc/gulp-compodoc": "0.0.8",
"@ngx-translate/core": "11.0.1",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/node": "6.0.101",
"codelyzer": "4.0.2",
"gulp": "3.9.1",
"gulp-concat": "2.6.1",
"gulp-rename": "1.2.2",
"gulp-rollup": "2.16.2",
"gulp-sourcemaps": "2.6.4",
"jasmine-core": "2.8.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.4.1",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "0.2.2",
"lite-server": "2.3.0",
"node-sass": "4.9.0",
"node-sass-tilde-importer": "1.0.1",
"node-watch": "0.5.7",
"protractor": "5.3.2",
"rollup": "0.59.1",
"rollup-plugin-sourcemaps": "0.4.2",
"run-sequence": "1.2.2",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"systemjs": "0.20.19",
"ts-node": "5.0.1",
"tslint": "5.9.1",
"tsickle": "0.34.0",
"typescript": "3.1.6",
"@isp/xdce-build-utils": "^1.0.0"
},
"engines": {
"node": ">=6.0.0"
}
}

1
readme.md Normal file

@ -0,0 +1 @@
xdce-module-widget-fideuram-v1

7
sonar-project.properties Normal file

@ -0,0 +1,7 @@
sonar.language=ts
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.exclusions=target/**,docs/**,**/*.spec.ts, **/jestGlobalMocks.ts, **/setupJest.ts
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.test =src
sonar.test.inclusions=**/*.spec.ts

@ -0,0 +1,8 @@
{
"moduleDefaults": {
},
"apis" : {
}
}

@ -0,0 +1,8 @@
{
"moduleDefaults": {
},
"apis" : {
}
}

@ -0,0 +1,8 @@
{
"moduleDefaults": {
},
"apis" : {
}
}

@ -0,0 +1,8 @@
{
"moduleDefaults": {
},
"apis" : {
}
}

@ -0,0 +1,19 @@
// Open Sans Variable Font Declarations
@font-face {
font-family: 'Open Sans';
src: url('../webfonts/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype-variations');
font-weight: 300 800; // Supports weight range from Light (300) to ExtraBold (800)
font-stretch: 75% 100%; // Supports width variations from Condensed to Normal
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: url('../webfonts/OpenSans-Italic-VariableFont_wdth\,wght.ttf') format('truetype-variations');
font-weight: 300 800; // Supports weight range from Light (300) to ExtraBold (800)
font-stretch: 75% 100%; // Supports width variations from Condensed to Normal
font-style: italic;
font-display: swap;
}

@ -0,0 +1,9 @@
@mixin nbp-combo-multi-nth-child-indent($id, $num) {
::ng-deep .isp-corporate-mode-wrapper:has(#{"#" + $id}) .dropdown-list>.dropdown-list-item:nth-child(#{$num}) {
padding-left: 15px !important;
border-top: unset !important;
.span-ellipsis {
font-weight: normal !important;
}
}
}

@ -0,0 +1,747 @@
// @import url("../../../../../xdce-widget/partial_scss/lib/nbp/scss/_widget-ui.style.scss");
$btn-map: (
primary-bg-color: map-get($orange-palette, 100),
primary-border-color: map-get($orange-palette, 100),
primary-color: map-get($white-palette, 100),
primary-bg-color-h: map-get($orange-palette, 150),
primary-border-color-h: map-get($orange-palette, 150),
secondary-bg-color: map-get($white-palette, 100),
secondary-border-color: map-get($orange-palette, 100),
secondary-color: map-get($orange-palette, 100),
secondary-bg-color-h: map-get($gray-palette, 100),
);
$checkbox-map: (
checked-bg-color: map-get($gray-palette, 150),
border-color: map-get($gray-palette, 150),
unchecked-bg-color: map-get($white-palette, 100)
);
@mixin isp-button-colors($name,
$bg-color, $border-color, $color,
$bg-color-h, $border-color-h, $color-h,
$bg-color-a, $border-color-a, $color-a,
$bg-color-o, $border-color-o, $color-o,
$bg-color-oh, $border-color-oh, $color-oh,
) {
.isp-button#{if($name != "", ".isp-" + $name, "")} {
background-color: $bg-color;
border-color: $border-color;
color: $color;
&.on,
&:hover:not([disabled]):not(.touch) {
background-color: $bg-color-h;
border-color: $border-color-h;
color: $color-h;
}
&:active {
background-color: $bg-color-a;
border-color: $border-color-a;
color: $color-a;
}
&:disabled {
opacity: 0.5;
}
&.outline-style {
background-color: $bg-color-o;
border-color: $border-color-o;
color: $color-o;
&.on,
&:hover:not([disabled]):not(.touch) {
background-color: $bg-color-oh;
border-color: $border-color-oh;
color: $color-oh;
}
&:disabled {
opacity: 0.5;
}
}
}
}
body {
background: map-get($gray-palette, 25);
}
#fideuram .widget-fideuram {
*[class*="-mode-wrapper"] {
@include isp-button-colors("primary",
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
map-get($btn-map, "primary-bg-color-h"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-color"),
map-get($btn-map, "primary-bg-color-h"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-color"),
map-get($btn-map, "primary-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-bg-color"),
map-get($btn-map, "primary-color"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-bg-color-h"));
@include isp-button-colors("secondary",
map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"), );
}
nbp-button {
@include isp-button-colors("",
transparent, transparent, map-get($btn-map, "primary-border-color"),
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
transparent, transparent, map-get($btn-map, "primary-border-color"),
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"));
}
nbp-fid-button-bar {
.nbp-fid-button-bar>*:not(:last-child) {
.isp-corporate-mode-wrapper {
.isp-button {
border-right-color: map-get($white-palette, 100);
}
}
}
nbp-button .isp-corporate-mode-wrapper {
@include isp-button-colors("",
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200));
}
}
nbp-button-generation .isp-corporate-mode-wrapper {
.isp-default {
.button-container .button-icon {
color: map-get($blue-palette, 100);
}
.button-label,
.button-label-icon {
color: map-get($blue-palette, 100);
}
}
.isp-primary {
.button-container .button-icon {
color: map-get($orange-palette, 100);
}
.button-label,
.button-label-icon {
color: map-get($orange-palette, 100);
}
}
.isp-secondary {
.button-container .button-icon {
color: map-get($blue-palette, 100);
}
.button-label,
.button-label-icon {
color: map-get($blue-palette, 100);
}
&:hover {
.button-container .button-icon {
color: map-get($orange-palette, 100);
}
.button-label,
.button-label-icon {
color: map-get($orange-palette, 100);
}
}
}
}
nbp-checkbox .isp-corporate-mode-wrapper {
& .checked .isp-checkbox-input {
background-color: map-get($blue-palette, 150) !important;
border-color: map-get($blue-palette, 150) !important;
&:hover {
background-color: map-get($blue-palette, 200) !important;
border-color: map-get($blue-palette, 200) !important;
}
}
& .isp-primary.checked .isp-checkbox-input {
background-color: map-get($blue-palette, 150) !important;
border-color: map-get($blue-palette, 150) !important;
&:hover {
background-color: map-get($blue-palette, 200) !important;
border-color: map-get($blue-palette, 200) !important;
}
}
.checkbox-label {
color: map-get($gray-palette, 150);
}
.isp-checkbox-input {
border-color: map-get($gray-palette, 150) !important;
background-color: map-get($white-palette, 100);
.check-icon svg {
fill: map-get($white-palette, 100);
}
}
}
nbp-radio .isp-corporate-mode-wrapper {
.radio-label {
color: map-get($gray-palette, 150);
}
& .checked .isp-radio-input {
border-color: map-get($gray-palette, 150);
&:hover {
border-color: map-get($gray-palette, 200);
}
}
& .isp-primary {
.radio-label {
color: map-get($orange-palette, 100);
}
&.checked .isp-radio-input {
border-color: map-get($blue-palette, 100);
.circle-icon {
background-color: map-get($blue-palette, 100);
&:hover {
border-color: map-get($blue-palette, 100);
}
}
&:hover {
border-color: map-get($blue-palette, 100);
}
}
&.checked .radio-label {
color: map-get($blue-palette, 100);
}
}
.isp-radio-input {
border-color: map-get($gray-palette, 150);
background-color: map-get($white-palette, 100);
.circle-icon {
background-color: map-get($gray-palette, 150);
}
}
}
.nbp-tab-bar-title {
.tab-bar-title {
color: map-get($gray-palette, 200);
}
}
nbp-modal .isp-corporate-mode-wrapper {
.isp-modal-close {
color: map-get($blue-palette, 100);
}
.isp-modal-container {
padding: unset;
}
.nbp-modal-title {
color: map-get($blue-palette, 100);
&:before {
border-color: map-get($blue-palette, 100);
}
}
}
nbp-tooltip .isp-corporate-mode-wrapper {
.tooltip-content,
.popover-content {
border-color: map-get($gray-palette, 75);
background-color: map-get($white-palette, 100);
color: map-get($gray-palette, 150);
.tooltip-title {
color: map-get($gray-palette, 150);
}
}
.tooltip-content {
&.top {
border-bottom-color: map-get($gray-palette, 75);
&:after {
border-top-color: map-get($gray-palette, 75);
}
}
&.right {
border-left-color: map-get($gray-palette, 75);
&:after {
border-right-color: map-get($gray-palette, 75);
}
}
&.bottom {
border-top-color: map-get($gray-palette, 75);
&:after {
border-bottom-color: map-get($gray-palette, 75);
}
}
&.left {
border-right-color: map-get($gray-palette, 75);
&:after {
border-left-color: map-get($gray-palette, 75);
}
}
}
.isp-primary {
.tooltip-content,
.popover-content {
&,
&.top,
&.right,
&.bottom,
&.left {
border-color: map-get($blue-palette, 100);
}
&.top:after {
border-top-color: map-get($blue-palette, 100);
}
&.right:after {
border-right-color: map-get($blue-palette, 100);
}
&.bottom:after {
border-bottom-color: map-get($blue-palette, 100);
}
&.left:after {
border-left-color: map-get($blue-palette, 100);
}
}
}
}
nbp-tab-bar .isp-corporate-mode-wrapper .isp-tab-bar {
.tab-container {
border-right-color: map-get($gray-palette, 75);
.tab-title {
color: map-get($orange-palette, 100);
}
&.selectedTab {
.tab-title {
color: map-get($blue-palette, 100);
}
}
}
}
nbp-card .isp-corporate-mode-wrapper {
.isp-card-container.isp-card.isp-default {
border-color: map-get($gray-palette, 75);
}
h3.isp-card-title {
color: map-get($blue-palette, 100);
border-color: map-get($blue-palette, 100) !important;
}
}
nbp-input-text .isp-corporate-mode-wrapper .isp-input-text {
input.textfield-box {
border-color: map-get($gray-palette, 75);
&:focus,
&:active {
border-color: map-get($blue-palette, 75);
}
&::placeholder {
color: map-get($gray-palette, 100);
}
}
}
.isp-corporate-mode-wrapper .isp-disabled {
background-color: map-get($gray-palette, 75);
color: map-get($gray-palette, 150)
}
nbp-calendar-generic .isp-corporate-mode-wrapper .isp-calendar-generic {
.dropdown-menu {
border-color: map-get($gray-palette, 75);
}
&.isp-disabled {
input.form-control {
background-color: map-get($gray-palette, 75);
color: map-get($gray-palette, 150)
}
}
input.form-control {
border-color: map-get($gray-palette, 100);
&[disabled] {
background-color: map-get($gray-palette, 75);
color: map-get($gray-palette, 150);
border-color: map-get($gray-palette, 100) !important;
}
&:focus,
&:active {
border-color: map-get($blue-palette, 75);
~.button-icon {
border-color: map-get($blue-palette, 75);
}
}
}
.button-icon {
border-left-color: map-get($gray-palette, 100);
color: map-get($gray-palette, 200);
&:hover {
background-color: map-get($gray-palette, 75);
}
&.disabled {
background-color: map-get($white-palette, 100);
}
}
@mixin fid-date-picker-decorator-color() {
border-color: map-get($gray-palette, 100);
color: map-get($gray-palette, 200);
&:hover {
background-color: map-get($gray-palette, 75);
}
}
.isp-main-datepicker {
border-color: map-get($gray-palette, 75);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.btn.btn-link.camillo {
//border frecce
@include fid-date-picker-decorator-color();
}
.ngb-dp-month-name {
color: map-get($gray-palette, 200);
}
.header-navigation-date {
@include fid-date-picker-decorator-color();
}
.ngb-dp-weekday {
//giorni settimane
color: map-get($gray-palette, 150) !important;
&:before {
background-color: map-get($gray-palette, 75);
}
}
.isp-datepicker-routing-view .d-flex {
border-color: map-get($gray-palette, 75);
}
.ngb-dp-day {
//giorni in numero
&:not(.hidden) {
@include fid-date-picker-decorator-color();
&>div {
color: map-get($gray-palette, 200);
}
}
&:hover {
background-color: map-get($gray-palette, 75);
}
// &.disabled {
// color: map-get($gray-palette, 200) !important;
// background-color: map-get($gray-palette, 75) !important;
// }
&:has(.is-today) {
color: map-get($blue-palette, 100) !important;
&:hover {
color: map-get($gray-palette, 200);
background-color: map-get($gray-palette, 100);
border-color: map-get($gray-palette, 150);
}
}
&:has(.bg-primary) {
background-color: map-get($blue-palette, 75);
color: map-get($white-palette, 100);
&>div {
background-color: map-get($blue-palette, 75) !important;
color: map-get($white-palette, 100) !important;
}
}
}
}
nbp-combo,
nbp-combo-filter,
nbp-combo-multi {
.isp-corporate-mode-wrapper .isp-combo,
.isp-corporate-mode-wrapper .isp-combo-filter,
.isp-corporate-mode-wrapper .isp-combo-multi {
input.form-control {
border-color: map-get($gray-palette, 100);
&:focus,
&:active {
border-color: map-get($blue-palette, 75);
}
}
.dropdown-button {
.arrow-bottom {
border-color: map-get($gray-palette, 200) transparent transparent transparent !important;
}
.arrow-top {
border-color: transparent transparent map-get($gray-palette, 200) transparent;
}
}
.dropdown-list-wrapper {
border-color: map-get($gray-palette, 150);
}
}
}
nbp-combo,
nbp-combo-filter {
.isp-corporate-mode-wrapper .isp-combo,
.isp-corporate-mode-wrapper .isp-combo-filter {
.dropdown-list-item {
&:hover {
background-color: map-get($gray-palette, 150);
color: map-get($white-palette, 100);
}
}
}
}
nbp-combo-multi .isp-corporate-mode-wrapper {
.isp-combo-multi .dropdown-list>.dropdown-list-item:first-child {
background: map-get($gray-palette, 75);
}
.isp-combo-multi .dropdown-list-wrapper {
border-color: map-get($gray-palette, 100);
}
.dropdown-list {
>.dropdown-list-item:not(:first-child) {
border-color: map-get($gray-palette, 100);
}
}
.isp-combo-multi input {
background-color: map-get($gray-palette, 75);
}
.dropdown-container:before {
background-color: map-get($blue-palette, 150);
border-color: map-get($blue-palette, 150);
&:hover {
background-color: map-get($blue-palette, 200);
border-color: map-get($blue-palette, 200);
}
}
}
nbp-toggle .isp-corporate-mode-wrapper {
.isp-primary .div-toggle-barra.truck.active-toggle {
background: map-get($orange-palette, 100);
border-color: map-get($orange-palette, 100);
}
.div-toggle-barra.truck.active-toggle {
background: map-get($gray-palette, 150);
border-color: map-get($gray-palette, 150);
}
.div-toggle-barra.truck {
background-color: map-get($white-palette, 100);
border-color: map-get($gray-palette, 100);
transition: all .5;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
}
.div-toggle-slider.thumb {
border-color: map-get($gray-palette, 100);
background: map-get($white-palette, 100);
}
}
nbp-fid-toggle-tabset .isp-corporate-mode-wrapper,
nbp-toggle-tabset .isp-corporate-mode-wrapper {
.tabs-container {
>.tab-element.cursor-pointer:not(:last-child) {
border-right-color: map-get($gray-palette, 100);
}
.tab-element.cursor-pointer {
&.active .tab-title {
color: map-get($blue-palette, 100);
}
}
.tab-title {
color: map-get($orange-palette, 100);
}
}
}
nbp-textarea textarea {
border-color: map-get($gray-palette, 75);
color: map-get($gray-palette, 150);
&:focus,
&:active {
border-color: map-get($blue-palette, 75);
}
}
nbp-accordion .isp-corporate-mode-wrapper .isp-accordion {
border: 1px solid map-get($gray-palette, 100);
.accordion-header {
background-color: map-get($white-palette, 100);
color: map-get($blue-palette, 100);
border-bottom-color: map-get($blue-palette, 100) !important;
}
.accordion-arrow {
color: map-get($blue-palette, 100);
}
.accordion-body {
color: map-get($gray-palette, 150);
}
}
isp-turbo-table .isp-corporate-mode-wrapper .isp-turbo-table,
nbp-table .isp-corporate-mode-wrapper .isp-table {
table {
thead {
th.table-label,
th.header-table-class {
color: map-get($gray-palette, 150);
background: map-get($white-palette, 100);
border-bottom-color: map-get($gray-palette, 50);
}
}
tbody {
tr.table-row,
tr.isp-table-row {
color: map-get($gray-palette, 150);
background: map-get($white-palette, 100);
td.table-cell,
td.isp-common-column,
td.td-accordion-row {
color: map-get($gray-palette, 150);
border-bottom-color: map-get($gray-palette, 50) !important;
}
}
tr.isp-table-row.isp-corporate-mode-wrapper:has(.row-expander-column-content) {
td {
background-color: map-get($gray-palette, 50);
}
&:has(.isp-common-column[style*="padding-left: 40px;"]) td {
background-color: map-get($gray-palette, 25);
}
}
}
}
}
isp-spinner {
.spinner::after {
background: map-get($black-palette, 200);
opacity: 0.3;
}
#canvasLoader {
background: map-get($white-palette, 100);
border-color: map-get($gray-palette, 150);
}
#canvasLoader::after {
color: map-get($orange-palette, 100);
}
}
}
.ag-theme-balham {
color: map-get($gray-palette, 150);
.ag-header {
background-color: map-get($white-palette, 100);
border-color: map-get($gray-palette, 50);
color: map-get($gray-palette, 150);
}
.ag-row:not(.ag-row-first) {
border-color: map-get($gray-palette, 50);
}
.ag-row-odd {
background-color: map-get($white-palette, 100);
}
}

@ -0,0 +1,34 @@
// Spinning Icons
// --------------------------
.#{$fa-css-prefix}-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}

@ -0,0 +1,25 @@
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em $fa-border-color;
border-radius: .1em;
}
.#{$fa-css-prefix}-pull-left { float: left; }
.#{$fa-css-prefix}-pull-right { float: right; }
.#{$fa-css-prefix} {
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
}
/* Deprecated as of 4.4.0 */
.pull-right { float: right; }
.pull-left { float: left; }
.#{$fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}

@ -0,0 +1,12 @@
// Base Class Definition
// -------------------------
.#{$fa-css-prefix} {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@ -0,0 +1,6 @@
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}

@ -0,0 +1,789 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }
.#{$fa-css-prefix}-search:before { content: $fa-var-search; }
.#{$fa-css-prefix}-envelope-o:before { content: $fa-var-envelope-o; }
.#{$fa-css-prefix}-heart:before { content: $fa-var-heart; }
.#{$fa-css-prefix}-star:before { content: $fa-var-star; }
.#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; }
.#{$fa-css-prefix}-user:before { content: $fa-var-user; }
.#{$fa-css-prefix}-film:before { content: $fa-var-film; }
.#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; }
.#{$fa-css-prefix}-th:before { content: $fa-var-th; }
.#{$fa-css-prefix}-th-list:before { content: $fa-var-th-list; }
.#{$fa-css-prefix}-check:before { content: $fa-var-check; }
.#{$fa-css-prefix}-remove:before,
.#{$fa-css-prefix}-close:before,
.#{$fa-css-prefix}-times:before { content: $fa-var-times; }
.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; }
.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; }
.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; }
.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; }
.#{$fa-css-prefix}-gear:before,
.#{$fa-css-prefix}-cog:before { content: $fa-var-cog; }
.#{$fa-css-prefix}-trash-o:before { content: $fa-var-trash-o; }
.#{$fa-css-prefix}-home:before { content: $fa-var-home; }
.#{$fa-css-prefix}-file-o:before { content: $fa-var-file-o; }
.#{$fa-css-prefix}-clock-o:before { content: $fa-var-clock-o; }
.#{$fa-css-prefix}-road:before { content: $fa-var-road; }
.#{$fa-css-prefix}-download:before { content: $fa-var-download; }
.#{$fa-css-prefix}-arrow-circle-o-down:before { content: $fa-var-arrow-circle-o-down; }
.#{$fa-css-prefix}-arrow-circle-o-up:before { content: $fa-var-arrow-circle-o-up; }
.#{$fa-css-prefix}-inbox:before { content: $fa-var-inbox; }
.#{$fa-css-prefix}-play-circle-o:before { content: $fa-var-play-circle-o; }
.#{$fa-css-prefix}-rotate-right:before,
.#{$fa-css-prefix}-repeat:before { content: $fa-var-repeat; }
.#{$fa-css-prefix}-refresh:before { content: $fa-var-refresh; }
.#{$fa-css-prefix}-list-alt:before { content: $fa-var-list-alt; }
.#{$fa-css-prefix}-lock:before { content: $fa-var-lock; }
.#{$fa-css-prefix}-flag:before { content: $fa-var-flag; }
.#{$fa-css-prefix}-headphones:before { content: $fa-var-headphones; }
.#{$fa-css-prefix}-volume-off:before { content: $fa-var-volume-off; }
.#{$fa-css-prefix}-volume-down:before { content: $fa-var-volume-down; }
.#{$fa-css-prefix}-volume-up:before { content: $fa-var-volume-up; }
.#{$fa-css-prefix}-qrcode:before { content: $fa-var-qrcode; }
.#{$fa-css-prefix}-barcode:before { content: $fa-var-barcode; }
.#{$fa-css-prefix}-tag:before { content: $fa-var-tag; }
.#{$fa-css-prefix}-tags:before { content: $fa-var-tags; }
.#{$fa-css-prefix}-book:before { content: $fa-var-book; }
.#{$fa-css-prefix}-bookmark:before { content: $fa-var-bookmark; }
.#{$fa-css-prefix}-print:before { content: $fa-var-print; }
.#{$fa-css-prefix}-camera:before { content: $fa-var-camera; }
.#{$fa-css-prefix}-font:before { content: $fa-var-font; }
.#{$fa-css-prefix}-bold:before { content: $fa-var-bold; }
.#{$fa-css-prefix}-italic:before { content: $fa-var-italic; }
.#{$fa-css-prefix}-text-height:before { content: $fa-var-text-height; }
.#{$fa-css-prefix}-text-width:before { content: $fa-var-text-width; }
.#{$fa-css-prefix}-align-left:before { content: $fa-var-align-left; }
.#{$fa-css-prefix}-align-center:before { content: $fa-var-align-center; }
.#{$fa-css-prefix}-align-right:before { content: $fa-var-align-right; }
.#{$fa-css-prefix}-align-justify:before { content: $fa-var-align-justify; }
.#{$fa-css-prefix}-list:before { content: $fa-var-list; }
.#{$fa-css-prefix}-dedent:before,
.#{$fa-css-prefix}-outdent:before { content: $fa-var-outdent; }
.#{$fa-css-prefix}-indent:before { content: $fa-var-indent; }
.#{$fa-css-prefix}-video-camera:before { content: $fa-var-video-camera; }
.#{$fa-css-prefix}-photo:before,
.#{$fa-css-prefix}-image:before,
.#{$fa-css-prefix}-picture-o:before { content: $fa-var-picture-o; }
.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
.#{$fa-css-prefix}-map-marker:before { content: $fa-var-map-marker; }
.#{$fa-css-prefix}-adjust:before { content: $fa-var-adjust; }
.#{$fa-css-prefix}-tint:before { content: $fa-var-tint; }
.#{$fa-css-prefix}-edit:before,
.#{$fa-css-prefix}-pencil-square-o:before { content: $fa-var-pencil-square-o; }
.#{$fa-css-prefix}-share-square-o:before { content: $fa-var-share-square-o; }
.#{$fa-css-prefix}-check-square-o:before { content: $fa-var-check-square-o; }
.#{$fa-css-prefix}-arrows:before { content: $fa-var-arrows; }
.#{$fa-css-prefix}-step-backward:before { content: $fa-var-step-backward; }
.#{$fa-css-prefix}-fast-backward:before { content: $fa-var-fast-backward; }
.#{$fa-css-prefix}-backward:before { content: $fa-var-backward; }
.#{$fa-css-prefix}-play:before { content: $fa-var-play; }
.#{$fa-css-prefix}-pause:before { content: $fa-var-pause; }
.#{$fa-css-prefix}-stop:before { content: $fa-var-stop; }
.#{$fa-css-prefix}-forward:before { content: $fa-var-forward; }
.#{$fa-css-prefix}-fast-forward:before { content: $fa-var-fast-forward; }
.#{$fa-css-prefix}-step-forward:before { content: $fa-var-step-forward; }
.#{$fa-css-prefix}-eject:before { content: $fa-var-eject; }
.#{$fa-css-prefix}-chevron-left:before { content: $fa-var-chevron-left; }
.#{$fa-css-prefix}-chevron-right:before { content: $fa-var-chevron-right; }
.#{$fa-css-prefix}-plus-circle:before { content: $fa-var-plus-circle; }
.#{$fa-css-prefix}-minus-circle:before { content: $fa-var-minus-circle; }
.#{$fa-css-prefix}-times-circle:before { content: $fa-var-times-circle; }
.#{$fa-css-prefix}-check-circle:before { content: $fa-var-check-circle; }
.#{$fa-css-prefix}-question-circle:before { content: $fa-var-question-circle; }
.#{$fa-css-prefix}-info-circle:before { content: $fa-var-info-circle; }
.#{$fa-css-prefix}-crosshairs:before { content: $fa-var-crosshairs; }
.#{$fa-css-prefix}-times-circle-o:before { content: $fa-var-times-circle-o; }
.#{$fa-css-prefix}-check-circle-o:before { content: $fa-var-check-circle-o; }
.#{$fa-css-prefix}-ban:before { content: $fa-var-ban; }
.#{$fa-css-prefix}-arrow-left:before { content: $fa-var-arrow-left; }
.#{$fa-css-prefix}-arrow-right:before { content: $fa-var-arrow-right; }
.#{$fa-css-prefix}-arrow-up:before { content: $fa-var-arrow-up; }
.#{$fa-css-prefix}-arrow-down:before { content: $fa-var-arrow-down; }
.#{$fa-css-prefix}-mail-forward:before,
.#{$fa-css-prefix}-share:before { content: $fa-var-share; }
.#{$fa-css-prefix}-expand:before { content: $fa-var-expand; }
.#{$fa-css-prefix}-compress:before { content: $fa-var-compress; }
.#{$fa-css-prefix}-plus:before { content: $fa-var-plus; }
.#{$fa-css-prefix}-minus:before { content: $fa-var-minus; }
.#{$fa-css-prefix}-asterisk:before { content: $fa-var-asterisk; }
.#{$fa-css-prefix}-exclamation-circle:before { content: $fa-var-exclamation-circle; }
.#{$fa-css-prefix}-gift:before { content: $fa-var-gift; }
.#{$fa-css-prefix}-leaf:before { content: $fa-var-leaf; }
.#{$fa-css-prefix}-fire:before { content: $fa-var-fire; }
.#{$fa-css-prefix}-eye:before { content: $fa-var-eye; }
.#{$fa-css-prefix}-eye-slash:before { content: $fa-var-eye-slash; }
.#{$fa-css-prefix}-warning:before,
.#{$fa-css-prefix}-exclamation-triangle:before { content: $fa-var-exclamation-triangle; }
.#{$fa-css-prefix}-plane:before { content: $fa-var-plane; }
.#{$fa-css-prefix}-calendar:before { content: $fa-var-calendar; }
.#{$fa-css-prefix}-random:before { content: $fa-var-random; }
.#{$fa-css-prefix}-comment:before { content: $fa-var-comment; }
.#{$fa-css-prefix}-magnet:before { content: $fa-var-magnet; }
.#{$fa-css-prefix}-chevron-up:before { content: $fa-var-chevron-up; }
.#{$fa-css-prefix}-chevron-down:before { content: $fa-var-chevron-down; }
.#{$fa-css-prefix}-retweet:before { content: $fa-var-retweet; }
.#{$fa-css-prefix}-shopping-cart:before { content: $fa-var-shopping-cart; }
.#{$fa-css-prefix}-folder:before { content: $fa-var-folder; }
.#{$fa-css-prefix}-folder-open:before { content: $fa-var-folder-open; }
.#{$fa-css-prefix}-arrows-v:before { content: $fa-var-arrows-v; }
.#{$fa-css-prefix}-arrows-h:before { content: $fa-var-arrows-h; }
.#{$fa-css-prefix}-bar-chart-o:before,
.#{$fa-css-prefix}-bar-chart:before { content: $fa-var-bar-chart; }
.#{$fa-css-prefix}-twitter-square:before { content: $fa-var-twitter-square; }
.#{$fa-css-prefix}-facebook-square:before { content: $fa-var-facebook-square; }
.#{$fa-css-prefix}-camera-retro:before { content: $fa-var-camera-retro; }
.#{$fa-css-prefix}-key:before { content: $fa-var-key; }
.#{$fa-css-prefix}-gears:before,
.#{$fa-css-prefix}-cogs:before { content: $fa-var-cogs; }
.#{$fa-css-prefix}-comments:before { content: $fa-var-comments; }
.#{$fa-css-prefix}-thumbs-o-up:before { content: $fa-var-thumbs-o-up; }
.#{$fa-css-prefix}-thumbs-o-down:before { content: $fa-var-thumbs-o-down; }
.#{$fa-css-prefix}-star-half:before { content: $fa-var-star-half; }
.#{$fa-css-prefix}-heart-o:before { content: $fa-var-heart-o; }
.#{$fa-css-prefix}-sign-out:before { content: $fa-var-sign-out; }
.#{$fa-css-prefix}-linkedin-square:before { content: $fa-var-linkedin-square; }
.#{$fa-css-prefix}-thumb-tack:before { content: $fa-var-thumb-tack; }
.#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; }
.#{$fa-css-prefix}-sign-in:before { content: $fa-var-sign-in; }
.#{$fa-css-prefix}-trophy:before { content: $fa-var-trophy; }
.#{$fa-css-prefix}-github-square:before { content: $fa-var-github-square; }
.#{$fa-css-prefix}-upload:before { content: $fa-var-upload; }
.#{$fa-css-prefix}-lemon-o:before { content: $fa-var-lemon-o; }
.#{$fa-css-prefix}-phone:before { content: $fa-var-phone; }
.#{$fa-css-prefix}-square-o:before { content: $fa-var-square-o; }
.#{$fa-css-prefix}-bookmark-o:before { content: $fa-var-bookmark-o; }
.#{$fa-css-prefix}-phone-square:before { content: $fa-var-phone-square; }
.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; }
.#{$fa-css-prefix}-facebook-f:before,
.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; }
.#{$fa-css-prefix}-github:before { content: $fa-var-github; }
.#{$fa-css-prefix}-unlock:before { content: $fa-var-unlock; }
.#{$fa-css-prefix}-credit-card:before { content: $fa-var-credit-card; }
.#{$fa-css-prefix}-feed:before,
.#{$fa-css-prefix}-rss:before { content: $fa-var-rss; }
.#{$fa-css-prefix}-hdd-o:before { content: $fa-var-hdd-o; }
.#{$fa-css-prefix}-bullhorn:before { content: $fa-var-bullhorn; }
.#{$fa-css-prefix}-bell:before { content: $fa-var-bell; }
.#{$fa-css-prefix}-certificate:before { content: $fa-var-certificate; }
.#{$fa-css-prefix}-hand-o-right:before { content: $fa-var-hand-o-right; }
.#{$fa-css-prefix}-hand-o-left:before { content: $fa-var-hand-o-left; }
.#{$fa-css-prefix}-hand-o-up:before { content: $fa-var-hand-o-up; }
.#{$fa-css-prefix}-hand-o-down:before { content: $fa-var-hand-o-down; }
.#{$fa-css-prefix}-arrow-circle-left:before { content: $fa-var-arrow-circle-left; }
.#{$fa-css-prefix}-arrow-circle-right:before { content: $fa-var-arrow-circle-right; }
.#{$fa-css-prefix}-arrow-circle-up:before { content: $fa-var-arrow-circle-up; }
.#{$fa-css-prefix}-arrow-circle-down:before { content: $fa-var-arrow-circle-down; }
.#{$fa-css-prefix}-globe:before { content: $fa-var-globe; }
.#{$fa-css-prefix}-wrench:before { content: $fa-var-wrench; }
.#{$fa-css-prefix}-tasks:before { content: $fa-var-tasks; }
.#{$fa-css-prefix}-filter:before { content: $fa-var-filter; }
.#{$fa-css-prefix}-briefcase:before { content: $fa-var-briefcase; }
.#{$fa-css-prefix}-arrows-alt:before { content: $fa-var-arrows-alt; }
.#{$fa-css-prefix}-group:before,
.#{$fa-css-prefix}-users:before { content: $fa-var-users; }
.#{$fa-css-prefix}-chain:before,
.#{$fa-css-prefix}-link:before { content: $fa-var-link; }
.#{$fa-css-prefix}-cloud:before { content: $fa-var-cloud; }
.#{$fa-css-prefix}-flask:before { content: $fa-var-flask; }
.#{$fa-css-prefix}-cut:before,
.#{$fa-css-prefix}-scissors:before { content: $fa-var-scissors; }
.#{$fa-css-prefix}-copy:before,
.#{$fa-css-prefix}-files-o:before { content: $fa-var-files-o; }
.#{$fa-css-prefix}-paperclip:before { content: $fa-var-paperclip; }
.#{$fa-css-prefix}-save:before,
.#{$fa-css-prefix}-floppy-o:before { content: $fa-var-floppy-o; }
.#{$fa-css-prefix}-square:before { content: $fa-var-square; }
.#{$fa-css-prefix}-navicon:before,
.#{$fa-css-prefix}-reorder:before,
.#{$fa-css-prefix}-bars:before { content: $fa-var-bars; }
.#{$fa-css-prefix}-list-ul:before { content: $fa-var-list-ul; }
.#{$fa-css-prefix}-list-ol:before { content: $fa-var-list-ol; }
.#{$fa-css-prefix}-strikethrough:before { content: $fa-var-strikethrough; }
.#{$fa-css-prefix}-underline:before { content: $fa-var-underline; }
.#{$fa-css-prefix}-table:before { content: $fa-var-table; }
.#{$fa-css-prefix}-magic:before { content: $fa-var-magic; }
.#{$fa-css-prefix}-truck:before { content: $fa-var-truck; }
.#{$fa-css-prefix}-pinterest:before { content: $fa-var-pinterest; }
.#{$fa-css-prefix}-pinterest-square:before { content: $fa-var-pinterest-square; }
.#{$fa-css-prefix}-google-plus-square:before { content: $fa-var-google-plus-square; }
.#{$fa-css-prefix}-google-plus:before { content: $fa-var-google-plus; }
.#{$fa-css-prefix}-money:before { content: $fa-var-money; }
.#{$fa-css-prefix}-caret-down:before { content: $fa-var-caret-down; }
.#{$fa-css-prefix}-caret-up:before { content: $fa-var-caret-up; }
.#{$fa-css-prefix}-caret-left:before { content: $fa-var-caret-left; }
.#{$fa-css-prefix}-caret-right:before { content: $fa-var-caret-right; }
.#{$fa-css-prefix}-columns:before { content: $fa-var-columns; }
.#{$fa-css-prefix}-unsorted:before,
.#{$fa-css-prefix}-sort:before { content: $fa-var-sort; }
.#{$fa-css-prefix}-sort-down:before,
.#{$fa-css-prefix}-sort-desc:before { content: $fa-var-sort-desc; }
.#{$fa-css-prefix}-sort-up:before,
.#{$fa-css-prefix}-sort-asc:before { content: $fa-var-sort-asc; }
.#{$fa-css-prefix}-envelope:before { content: $fa-var-envelope; }
.#{$fa-css-prefix}-linkedin:before { content: $fa-var-linkedin; }
.#{$fa-css-prefix}-rotate-left:before,
.#{$fa-css-prefix}-undo:before { content: $fa-var-undo; }
.#{$fa-css-prefix}-legal:before,
.#{$fa-css-prefix}-gavel:before { content: $fa-var-gavel; }
.#{$fa-css-prefix}-dashboard:before,
.#{$fa-css-prefix}-tachometer:before { content: $fa-var-tachometer; }
.#{$fa-css-prefix}-comment-o:before { content: $fa-var-comment-o; }
.#{$fa-css-prefix}-comments-o:before { content: $fa-var-comments-o; }
.#{$fa-css-prefix}-flash:before,
.#{$fa-css-prefix}-bolt:before { content: $fa-var-bolt; }
.#{$fa-css-prefix}-sitemap:before { content: $fa-var-sitemap; }
.#{$fa-css-prefix}-umbrella:before { content: $fa-var-umbrella; }
.#{$fa-css-prefix}-paste:before,
.#{$fa-css-prefix}-clipboard:before { content: $fa-var-clipboard; }
.#{$fa-css-prefix}-lightbulb-o:before { content: $fa-var-lightbulb-o; }
.#{$fa-css-prefix}-exchange:before { content: $fa-var-exchange; }
.#{$fa-css-prefix}-cloud-download:before { content: $fa-var-cloud-download; }
.#{$fa-css-prefix}-cloud-upload:before { content: $fa-var-cloud-upload; }
.#{$fa-css-prefix}-user-md:before { content: $fa-var-user-md; }
.#{$fa-css-prefix}-stethoscope:before { content: $fa-var-stethoscope; }
.#{$fa-css-prefix}-suitcase:before { content: $fa-var-suitcase; }
.#{$fa-css-prefix}-bell-o:before { content: $fa-var-bell-o; }
.#{$fa-css-prefix}-coffee:before { content: $fa-var-coffee; }
.#{$fa-css-prefix}-cutlery:before { content: $fa-var-cutlery; }
.#{$fa-css-prefix}-file-text-o:before { content: $fa-var-file-text-o; }
.#{$fa-css-prefix}-building-o:before { content: $fa-var-building-o; }
.#{$fa-css-prefix}-hospital-o:before { content: $fa-var-hospital-o; }
.#{$fa-css-prefix}-ambulance:before { content: $fa-var-ambulance; }
.#{$fa-css-prefix}-medkit:before { content: $fa-var-medkit; }
.#{$fa-css-prefix}-fighter-jet:before { content: $fa-var-fighter-jet; }
.#{$fa-css-prefix}-beer:before { content: $fa-var-beer; }
.#{$fa-css-prefix}-h-square:before { content: $fa-var-h-square; }
.#{$fa-css-prefix}-plus-square:before { content: $fa-var-plus-square; }
.#{$fa-css-prefix}-angle-double-left:before { content: $fa-var-angle-double-left; }
.#{$fa-css-prefix}-angle-double-right:before { content: $fa-var-angle-double-right; }
.#{$fa-css-prefix}-angle-double-up:before { content: $fa-var-angle-double-up; }
.#{$fa-css-prefix}-angle-double-down:before { content: $fa-var-angle-double-down; }
.#{$fa-css-prefix}-angle-left:before { content: $fa-var-angle-left; }
.#{$fa-css-prefix}-angle-right:before { content: $fa-var-angle-right; }
.#{$fa-css-prefix}-angle-up:before { content: $fa-var-angle-up; }
.#{$fa-css-prefix}-angle-down:before { content: $fa-var-angle-down; }
.#{$fa-css-prefix}-desktop:before { content: $fa-var-desktop; }
.#{$fa-css-prefix}-laptop:before { content: $fa-var-laptop; }
.#{$fa-css-prefix}-tablet:before { content: $fa-var-tablet; }
.#{$fa-css-prefix}-mobile-phone:before,
.#{$fa-css-prefix}-mobile:before { content: $fa-var-mobile; }
.#{$fa-css-prefix}-circle-o:before { content: $fa-var-circle-o; }
.#{$fa-css-prefix}-quote-left:before { content: $fa-var-quote-left; }
.#{$fa-css-prefix}-quote-right:before { content: $fa-var-quote-right; }
.#{$fa-css-prefix}-spinner:before { content: $fa-var-spinner; }
.#{$fa-css-prefix}-circle:before { content: $fa-var-circle; }
.#{$fa-css-prefix}-mail-reply:before,
.#{$fa-css-prefix}-reply:before { content: $fa-var-reply; }
.#{$fa-css-prefix}-github-alt:before { content: $fa-var-github-alt; }
.#{$fa-css-prefix}-folder-o:before { content: $fa-var-folder-o; }
.#{$fa-css-prefix}-folder-open-o:before { content: $fa-var-folder-open-o; }
.#{$fa-css-prefix}-smile-o:before { content: $fa-var-smile-o; }
.#{$fa-css-prefix}-frown-o:before { content: $fa-var-frown-o; }
.#{$fa-css-prefix}-meh-o:before { content: $fa-var-meh-o; }
.#{$fa-css-prefix}-gamepad:before { content: $fa-var-gamepad; }
.#{$fa-css-prefix}-keyboard-o:before { content: $fa-var-keyboard-o; }
.#{$fa-css-prefix}-flag-o:before { content: $fa-var-flag-o; }
.#{$fa-css-prefix}-flag-checkered:before { content: $fa-var-flag-checkered; }
.#{$fa-css-prefix}-terminal:before { content: $fa-var-terminal; }
.#{$fa-css-prefix}-code:before { content: $fa-var-code; }
.#{$fa-css-prefix}-mail-reply-all:before,
.#{$fa-css-prefix}-reply-all:before { content: $fa-var-reply-all; }
.#{$fa-css-prefix}-star-half-empty:before,
.#{$fa-css-prefix}-star-half-full:before,
.#{$fa-css-prefix}-star-half-o:before { content: $fa-var-star-half-o; }
.#{$fa-css-prefix}-location-arrow:before { content: $fa-var-location-arrow; }
.#{$fa-css-prefix}-crop:before { content: $fa-var-crop; }
.#{$fa-css-prefix}-code-fork:before { content: $fa-var-code-fork; }
.#{$fa-css-prefix}-unlink:before,
.#{$fa-css-prefix}-chain-broken:before { content: $fa-var-chain-broken; }
.#{$fa-css-prefix}-question:before { content: $fa-var-question; }
.#{$fa-css-prefix}-info:before { content: $fa-var-info; }
.#{$fa-css-prefix}-exclamation:before { content: $fa-var-exclamation; }
.#{$fa-css-prefix}-superscript:before { content: $fa-var-superscript; }
.#{$fa-css-prefix}-subscript:before { content: $fa-var-subscript; }
.#{$fa-css-prefix}-eraser:before { content: $fa-var-eraser; }
.#{$fa-css-prefix}-puzzle-piece:before { content: $fa-var-puzzle-piece; }
.#{$fa-css-prefix}-microphone:before { content: $fa-var-microphone; }
.#{$fa-css-prefix}-microphone-slash:before { content: $fa-var-microphone-slash; }
.#{$fa-css-prefix}-shield:before { content: $fa-var-shield; }
.#{$fa-css-prefix}-calendar-o:before { content: $fa-var-calendar-o; }
.#{$fa-css-prefix}-fire-extinguisher:before { content: $fa-var-fire-extinguisher; }
.#{$fa-css-prefix}-rocket:before { content: $fa-var-rocket; }
.#{$fa-css-prefix}-maxcdn:before { content: $fa-var-maxcdn; }
.#{$fa-css-prefix}-chevron-circle-left:before { content: $fa-var-chevron-circle-left; }
.#{$fa-css-prefix}-chevron-circle-right:before { content: $fa-var-chevron-circle-right; }
.#{$fa-css-prefix}-chevron-circle-up:before { content: $fa-var-chevron-circle-up; }
.#{$fa-css-prefix}-chevron-circle-down:before { content: $fa-var-chevron-circle-down; }
.#{$fa-css-prefix}-html5:before { content: $fa-var-html5; }
.#{$fa-css-prefix}-css3:before { content: $fa-var-css3; }
.#{$fa-css-prefix}-anchor:before { content: $fa-var-anchor; }
.#{$fa-css-prefix}-unlock-alt:before { content: $fa-var-unlock-alt; }
.#{$fa-css-prefix}-bullseye:before { content: $fa-var-bullseye; }
.#{$fa-css-prefix}-ellipsis-h:before { content: $fa-var-ellipsis-h; }
.#{$fa-css-prefix}-ellipsis-v:before { content: $fa-var-ellipsis-v; }
.#{$fa-css-prefix}-rss-square:before { content: $fa-var-rss-square; }
.#{$fa-css-prefix}-play-circle:before { content: $fa-var-play-circle; }
.#{$fa-css-prefix}-ticket:before { content: $fa-var-ticket; }
.#{$fa-css-prefix}-minus-square:before { content: $fa-var-minus-square; }
.#{$fa-css-prefix}-minus-square-o:before { content: $fa-var-minus-square-o; }
.#{$fa-css-prefix}-level-up:before { content: $fa-var-level-up; }
.#{$fa-css-prefix}-level-down:before { content: $fa-var-level-down; }
.#{$fa-css-prefix}-check-square:before { content: $fa-var-check-square; }
.#{$fa-css-prefix}-pencil-square:before { content: $fa-var-pencil-square; }
.#{$fa-css-prefix}-external-link-square:before { content: $fa-var-external-link-square; }
.#{$fa-css-prefix}-share-square:before { content: $fa-var-share-square; }
.#{$fa-css-prefix}-compass:before { content: $fa-var-compass; }
.#{$fa-css-prefix}-toggle-down:before,
.#{$fa-css-prefix}-caret-square-o-down:before { content: $fa-var-caret-square-o-down; }
.#{$fa-css-prefix}-toggle-up:before,
.#{$fa-css-prefix}-caret-square-o-up:before { content: $fa-var-caret-square-o-up; }
.#{$fa-css-prefix}-toggle-right:before,
.#{$fa-css-prefix}-caret-square-o-right:before { content: $fa-var-caret-square-o-right; }
.#{$fa-css-prefix}-euro:before,
.#{$fa-css-prefix}-eur:before { content: $fa-var-eur; }
.#{$fa-css-prefix}-gbp:before { content: $fa-var-gbp; }
.#{$fa-css-prefix}-dollar:before,
.#{$fa-css-prefix}-usd:before { content: $fa-var-usd; }
.#{$fa-css-prefix}-rupee:before,
.#{$fa-css-prefix}-inr:before { content: $fa-var-inr; }
.#{$fa-css-prefix}-cny:before,
.#{$fa-css-prefix}-rmb:before,
.#{$fa-css-prefix}-yen:before,
.#{$fa-css-prefix}-jpy:before { content: $fa-var-jpy; }
.#{$fa-css-prefix}-ruble:before,
.#{$fa-css-prefix}-rouble:before,
.#{$fa-css-prefix}-rub:before { content: $fa-var-rub; }
.#{$fa-css-prefix}-won:before,
.#{$fa-css-prefix}-krw:before { content: $fa-var-krw; }
.#{$fa-css-prefix}-bitcoin:before,
.#{$fa-css-prefix}-btc:before { content: $fa-var-btc; }
.#{$fa-css-prefix}-file:before { content: $fa-var-file; }
.#{$fa-css-prefix}-file-text:before { content: $fa-var-file-text; }
.#{$fa-css-prefix}-sort-alpha-asc:before { content: $fa-var-sort-alpha-asc; }
.#{$fa-css-prefix}-sort-alpha-desc:before { content: $fa-var-sort-alpha-desc; }
.#{$fa-css-prefix}-sort-amount-asc:before { content: $fa-var-sort-amount-asc; }
.#{$fa-css-prefix}-sort-amount-desc:before { content: $fa-var-sort-amount-desc; }
.#{$fa-css-prefix}-sort-numeric-asc:before { content: $fa-var-sort-numeric-asc; }
.#{$fa-css-prefix}-sort-numeric-desc:before { content: $fa-var-sort-numeric-desc; }
.#{$fa-css-prefix}-thumbs-up:before { content: $fa-var-thumbs-up; }
.#{$fa-css-prefix}-thumbs-down:before { content: $fa-var-thumbs-down; }
.#{$fa-css-prefix}-youtube-square:before { content: $fa-var-youtube-square; }
.#{$fa-css-prefix}-youtube:before { content: $fa-var-youtube; }
.#{$fa-css-prefix}-xing:before { content: $fa-var-xing; }
.#{$fa-css-prefix}-xing-square:before { content: $fa-var-xing-square; }
.#{$fa-css-prefix}-youtube-play:before { content: $fa-var-youtube-play; }
.#{$fa-css-prefix}-dropbox:before { content: $fa-var-dropbox; }
.#{$fa-css-prefix}-stack-overflow:before { content: $fa-var-stack-overflow; }
.#{$fa-css-prefix}-instagram:before { content: $fa-var-instagram; }
.#{$fa-css-prefix}-flickr:before { content: $fa-var-flickr; }
.#{$fa-css-prefix}-adn:before { content: $fa-var-adn; }
.#{$fa-css-prefix}-bitbucket:before { content: $fa-var-bitbucket; }
.#{$fa-css-prefix}-bitbucket-square:before { content: $fa-var-bitbucket-square; }
.#{$fa-css-prefix}-tumblr:before { content: $fa-var-tumblr; }
.#{$fa-css-prefix}-tumblr-square:before { content: $fa-var-tumblr-square; }
.#{$fa-css-prefix}-long-arrow-down:before { content: $fa-var-long-arrow-down; }
.#{$fa-css-prefix}-long-arrow-up:before { content: $fa-var-long-arrow-up; }
.#{$fa-css-prefix}-long-arrow-left:before { content: $fa-var-long-arrow-left; }
.#{$fa-css-prefix}-long-arrow-right:before { content: $fa-var-long-arrow-right; }
.#{$fa-css-prefix}-apple:before { content: $fa-var-apple; }
.#{$fa-css-prefix}-windows:before { content: $fa-var-windows; }
.#{$fa-css-prefix}-android:before { content: $fa-var-android; }
.#{$fa-css-prefix}-linux:before { content: $fa-var-linux; }
.#{$fa-css-prefix}-dribbble:before { content: $fa-var-dribbble; }
.#{$fa-css-prefix}-skype:before { content: $fa-var-skype; }
.#{$fa-css-prefix}-foursquare:before { content: $fa-var-foursquare; }
.#{$fa-css-prefix}-trello:before { content: $fa-var-trello; }
.#{$fa-css-prefix}-female:before { content: $fa-var-female; }
.#{$fa-css-prefix}-male:before { content: $fa-var-male; }
.#{$fa-css-prefix}-gittip:before,
.#{$fa-css-prefix}-gratipay:before { content: $fa-var-gratipay; }
.#{$fa-css-prefix}-sun-o:before { content: $fa-var-sun-o; }
.#{$fa-css-prefix}-moon-o:before { content: $fa-var-moon-o; }
.#{$fa-css-prefix}-archive:before { content: $fa-var-archive; }
.#{$fa-css-prefix}-bug:before { content: $fa-var-bug; }
.#{$fa-css-prefix}-vk:before { content: $fa-var-vk; }
.#{$fa-css-prefix}-weibo:before { content: $fa-var-weibo; }
.#{$fa-css-prefix}-renren:before { content: $fa-var-renren; }
.#{$fa-css-prefix}-pagelines:before { content: $fa-var-pagelines; }
.#{$fa-css-prefix}-stack-exchange:before { content: $fa-var-stack-exchange; }
.#{$fa-css-prefix}-arrow-circle-o-right:before { content: $fa-var-arrow-circle-o-right; }
.#{$fa-css-prefix}-arrow-circle-o-left:before { content: $fa-var-arrow-circle-o-left; }
.#{$fa-css-prefix}-toggle-left:before,
.#{$fa-css-prefix}-caret-square-o-left:before { content: $fa-var-caret-square-o-left; }
.#{$fa-css-prefix}-dot-circle-o:before { content: $fa-var-dot-circle-o; }
.#{$fa-css-prefix}-wheelchair:before { content: $fa-var-wheelchair; }
.#{$fa-css-prefix}-vimeo-square:before { content: $fa-var-vimeo-square; }
.#{$fa-css-prefix}-turkish-lira:before,
.#{$fa-css-prefix}-try:before { content: $fa-var-try; }
.#{$fa-css-prefix}-plus-square-o:before { content: $fa-var-plus-square-o; }
.#{$fa-css-prefix}-space-shuttle:before { content: $fa-var-space-shuttle; }
.#{$fa-css-prefix}-slack:before { content: $fa-var-slack; }
.#{$fa-css-prefix}-envelope-square:before { content: $fa-var-envelope-square; }
.#{$fa-css-prefix}-wordpress:before { content: $fa-var-wordpress; }
.#{$fa-css-prefix}-openid:before { content: $fa-var-openid; }
.#{$fa-css-prefix}-institution:before,
.#{$fa-css-prefix}-bank:before,
.#{$fa-css-prefix}-university:before { content: $fa-var-university; }
.#{$fa-css-prefix}-mortar-board:before,
.#{$fa-css-prefix}-graduation-cap:before { content: $fa-var-graduation-cap; }
.#{$fa-css-prefix}-yahoo:before { content: $fa-var-yahoo; }
.#{$fa-css-prefix}-google:before { content: $fa-var-google; }
.#{$fa-css-prefix}-reddit:before { content: $fa-var-reddit; }
.#{$fa-css-prefix}-reddit-square:before { content: $fa-var-reddit-square; }
.#{$fa-css-prefix}-stumbleupon-circle:before { content: $fa-var-stumbleupon-circle; }
.#{$fa-css-prefix}-stumbleupon:before { content: $fa-var-stumbleupon; }
.#{$fa-css-prefix}-delicious:before { content: $fa-var-delicious; }
.#{$fa-css-prefix}-digg:before { content: $fa-var-digg; }
.#{$fa-css-prefix}-pied-piper-pp:before { content: $fa-var-pied-piper-pp; }
.#{$fa-css-prefix}-pied-piper-alt:before { content: $fa-var-pied-piper-alt; }
.#{$fa-css-prefix}-drupal:before { content: $fa-var-drupal; }
.#{$fa-css-prefix}-joomla:before { content: $fa-var-joomla; }
.#{$fa-css-prefix}-language:before { content: $fa-var-language; }
.#{$fa-css-prefix}-fax:before { content: $fa-var-fax; }
.#{$fa-css-prefix}-building:before { content: $fa-var-building; }
.#{$fa-css-prefix}-child:before { content: $fa-var-child; }
.#{$fa-css-prefix}-paw:before { content: $fa-var-paw; }
.#{$fa-css-prefix}-spoon:before { content: $fa-var-spoon; }
.#{$fa-css-prefix}-cube:before { content: $fa-var-cube; }
.#{$fa-css-prefix}-cubes:before { content: $fa-var-cubes; }
.#{$fa-css-prefix}-behance:before { content: $fa-var-behance; }
.#{$fa-css-prefix}-behance-square:before { content: $fa-var-behance-square; }
.#{$fa-css-prefix}-steam:before { content: $fa-var-steam; }
.#{$fa-css-prefix}-steam-square:before { content: $fa-var-steam-square; }
.#{$fa-css-prefix}-recycle:before { content: $fa-var-recycle; }
.#{$fa-css-prefix}-automobile:before,
.#{$fa-css-prefix}-car:before { content: $fa-var-car; }
.#{$fa-css-prefix}-cab:before,
.#{$fa-css-prefix}-taxi:before { content: $fa-var-taxi; }
.#{$fa-css-prefix}-tree:before { content: $fa-var-tree; }
.#{$fa-css-prefix}-spotify:before { content: $fa-var-spotify; }
.#{$fa-css-prefix}-deviantart:before { content: $fa-var-deviantart; }
.#{$fa-css-prefix}-soundcloud:before { content: $fa-var-soundcloud; }
.#{$fa-css-prefix}-database:before { content: $fa-var-database; }
.#{$fa-css-prefix}-file-pdf-o:before { content: $fa-var-file-pdf-o; }
.#{$fa-css-prefix}-file-word-o:before { content: $fa-var-file-word-o; }
.#{$fa-css-prefix}-file-excel-o:before { content: $fa-var-file-excel-o; }
.#{$fa-css-prefix}-file-powerpoint-o:before { content: $fa-var-file-powerpoint-o; }
.#{$fa-css-prefix}-file-photo-o:before,
.#{$fa-css-prefix}-file-picture-o:before,
.#{$fa-css-prefix}-file-image-o:before { content: $fa-var-file-image-o; }
.#{$fa-css-prefix}-file-zip-o:before,
.#{$fa-css-prefix}-file-archive-o:before { content: $fa-var-file-archive-o; }
.#{$fa-css-prefix}-file-sound-o:before,
.#{$fa-css-prefix}-file-audio-o:before { content: $fa-var-file-audio-o; }
.#{$fa-css-prefix}-file-movie-o:before,
.#{$fa-css-prefix}-file-video-o:before { content: $fa-var-file-video-o; }
.#{$fa-css-prefix}-file-code-o:before { content: $fa-var-file-code-o; }
.#{$fa-css-prefix}-vine:before { content: $fa-var-vine; }
.#{$fa-css-prefix}-codepen:before { content: $fa-var-codepen; }
.#{$fa-css-prefix}-jsfiddle:before { content: $fa-var-jsfiddle; }
.#{$fa-css-prefix}-life-bouy:before,
.#{$fa-css-prefix}-life-buoy:before,
.#{$fa-css-prefix}-life-saver:before,
.#{$fa-css-prefix}-support:before,
.#{$fa-css-prefix}-life-ring:before { content: $fa-var-life-ring; }
.#{$fa-css-prefix}-circle-o-notch:before { content: $fa-var-circle-o-notch; }
.#{$fa-css-prefix}-ra:before,
.#{$fa-css-prefix}-resistance:before,
.#{$fa-css-prefix}-rebel:before { content: $fa-var-rebel; }
.#{$fa-css-prefix}-ge:before,
.#{$fa-css-prefix}-empire:before { content: $fa-var-empire; }
.#{$fa-css-prefix}-git-square:before { content: $fa-var-git-square; }
.#{$fa-css-prefix}-git:before { content: $fa-var-git; }
.#{$fa-css-prefix}-y-combinator-square:before,
.#{$fa-css-prefix}-yc-square:before,
.#{$fa-css-prefix}-hacker-news:before { content: $fa-var-hacker-news; }
.#{$fa-css-prefix}-tencent-weibo:before { content: $fa-var-tencent-weibo; }
.#{$fa-css-prefix}-qq:before { content: $fa-var-qq; }
.#{$fa-css-prefix}-wechat:before,
.#{$fa-css-prefix}-weixin:before { content: $fa-var-weixin; }
.#{$fa-css-prefix}-send:before,
.#{$fa-css-prefix}-paper-plane:before { content: $fa-var-paper-plane; }
.#{$fa-css-prefix}-send-o:before,
.#{$fa-css-prefix}-paper-plane-o:before { content: $fa-var-paper-plane-o; }
.#{$fa-css-prefix}-history:before { content: $fa-var-history; }
.#{$fa-css-prefix}-circle-thin:before { content: $fa-var-circle-thin; }
.#{$fa-css-prefix}-header:before { content: $fa-var-header; }
.#{$fa-css-prefix}-paragraph:before { content: $fa-var-paragraph; }
.#{$fa-css-prefix}-sliders:before { content: $fa-var-sliders; }
.#{$fa-css-prefix}-share-alt:before { content: $fa-var-share-alt; }
.#{$fa-css-prefix}-share-alt-square:before { content: $fa-var-share-alt-square; }
.#{$fa-css-prefix}-bomb:before { content: $fa-var-bomb; }
.#{$fa-css-prefix}-soccer-ball-o:before,
.#{$fa-css-prefix}-futbol-o:before { content: $fa-var-futbol-o; }
.#{$fa-css-prefix}-tty:before { content: $fa-var-tty; }
.#{$fa-css-prefix}-binoculars:before { content: $fa-var-binoculars; }
.#{$fa-css-prefix}-plug:before { content: $fa-var-plug; }
.#{$fa-css-prefix}-slideshare:before { content: $fa-var-slideshare; }
.#{$fa-css-prefix}-twitch:before { content: $fa-var-twitch; }
.#{$fa-css-prefix}-yelp:before { content: $fa-var-yelp; }
.#{$fa-css-prefix}-newspaper-o:before { content: $fa-var-newspaper-o; }
.#{$fa-css-prefix}-wifi:before { content: $fa-var-wifi; }
.#{$fa-css-prefix}-calculator:before { content: $fa-var-calculator; }
.#{$fa-css-prefix}-paypal:before { content: $fa-var-paypal; }
.#{$fa-css-prefix}-google-wallet:before { content: $fa-var-google-wallet; }
.#{$fa-css-prefix}-cc-visa:before { content: $fa-var-cc-visa; }
.#{$fa-css-prefix}-cc-mastercard:before { content: $fa-var-cc-mastercard; }
.#{$fa-css-prefix}-cc-discover:before { content: $fa-var-cc-discover; }
.#{$fa-css-prefix}-cc-amex:before { content: $fa-var-cc-amex; }
.#{$fa-css-prefix}-cc-paypal:before { content: $fa-var-cc-paypal; }
.#{$fa-css-prefix}-cc-stripe:before { content: $fa-var-cc-stripe; }
.#{$fa-css-prefix}-bell-slash:before { content: $fa-var-bell-slash; }
.#{$fa-css-prefix}-bell-slash-o:before { content: $fa-var-bell-slash-o; }
.#{$fa-css-prefix}-trash:before { content: $fa-var-trash; }
.#{$fa-css-prefix}-copyright:before { content: $fa-var-copyright; }
.#{$fa-css-prefix}-at:before { content: $fa-var-at; }
.#{$fa-css-prefix}-eyedropper:before { content: $fa-var-eyedropper; }
.#{$fa-css-prefix}-paint-brush:before { content: $fa-var-paint-brush; }
.#{$fa-css-prefix}-birthday-cake:before { content: $fa-var-birthday-cake; }
.#{$fa-css-prefix}-area-chart:before { content: $fa-var-area-chart; }
.#{$fa-css-prefix}-pie-chart:before { content: $fa-var-pie-chart; }
.#{$fa-css-prefix}-line-chart:before { content: $fa-var-line-chart; }
.#{$fa-css-prefix}-lastfm:before { content: $fa-var-lastfm; }
.#{$fa-css-prefix}-lastfm-square:before { content: $fa-var-lastfm-square; }
.#{$fa-css-prefix}-toggle-off:before { content: $fa-var-toggle-off; }
.#{$fa-css-prefix}-toggle-on:before { content: $fa-var-toggle-on; }
.#{$fa-css-prefix}-bicycle:before { content: $fa-var-bicycle; }
.#{$fa-css-prefix}-bus:before { content: $fa-var-bus; }
.#{$fa-css-prefix}-ioxhost:before { content: $fa-var-ioxhost; }
.#{$fa-css-prefix}-angellist:before { content: $fa-var-angellist; }
.#{$fa-css-prefix}-cc:before { content: $fa-var-cc; }
.#{$fa-css-prefix}-shekel:before,
.#{$fa-css-prefix}-sheqel:before,
.#{$fa-css-prefix}-ils:before { content: $fa-var-ils; }
.#{$fa-css-prefix}-meanpath:before { content: $fa-var-meanpath; }
.#{$fa-css-prefix}-buysellads:before { content: $fa-var-buysellads; }
.#{$fa-css-prefix}-connectdevelop:before { content: $fa-var-connectdevelop; }
.#{$fa-css-prefix}-dashcube:before { content: $fa-var-dashcube; }
.#{$fa-css-prefix}-forumbee:before { content: $fa-var-forumbee; }
.#{$fa-css-prefix}-leanpub:before { content: $fa-var-leanpub; }
.#{$fa-css-prefix}-sellsy:before { content: $fa-var-sellsy; }
.#{$fa-css-prefix}-shirtsinbulk:before { content: $fa-var-shirtsinbulk; }
.#{$fa-css-prefix}-simplybuilt:before { content: $fa-var-simplybuilt; }
.#{$fa-css-prefix}-skyatlas:before { content: $fa-var-skyatlas; }
.#{$fa-css-prefix}-cart-plus:before { content: $fa-var-cart-plus; }
.#{$fa-css-prefix}-cart-arrow-down:before { content: $fa-var-cart-arrow-down; }
.#{$fa-css-prefix}-diamond:before { content: $fa-var-diamond; }
.#{$fa-css-prefix}-ship:before { content: $fa-var-ship; }
.#{$fa-css-prefix}-user-secret:before { content: $fa-var-user-secret; }
.#{$fa-css-prefix}-motorcycle:before { content: $fa-var-motorcycle; }
.#{$fa-css-prefix}-street-view:before { content: $fa-var-street-view; }
.#{$fa-css-prefix}-heartbeat:before { content: $fa-var-heartbeat; }
.#{$fa-css-prefix}-venus:before { content: $fa-var-venus; }
.#{$fa-css-prefix}-mars:before { content: $fa-var-mars; }
.#{$fa-css-prefix}-mercury:before { content: $fa-var-mercury; }
.#{$fa-css-prefix}-intersex:before,
.#{$fa-css-prefix}-transgender:before { content: $fa-var-transgender; }
.#{$fa-css-prefix}-transgender-alt:before { content: $fa-var-transgender-alt; }
.#{$fa-css-prefix}-venus-double:before { content: $fa-var-venus-double; }
.#{$fa-css-prefix}-mars-double:before { content: $fa-var-mars-double; }
.#{$fa-css-prefix}-venus-mars:before { content: $fa-var-venus-mars; }
.#{$fa-css-prefix}-mars-stroke:before { content: $fa-var-mars-stroke; }
.#{$fa-css-prefix}-mars-stroke-v:before { content: $fa-var-mars-stroke-v; }
.#{$fa-css-prefix}-mars-stroke-h:before { content: $fa-var-mars-stroke-h; }
.#{$fa-css-prefix}-neuter:before { content: $fa-var-neuter; }
.#{$fa-css-prefix}-genderless:before { content: $fa-var-genderless; }
.#{$fa-css-prefix}-facebook-official:before { content: $fa-var-facebook-official; }
.#{$fa-css-prefix}-pinterest-p:before { content: $fa-var-pinterest-p; }
.#{$fa-css-prefix}-whatsapp:before { content: $fa-var-whatsapp; }
.#{$fa-css-prefix}-server:before { content: $fa-var-server; }
.#{$fa-css-prefix}-user-plus:before { content: $fa-var-user-plus; }
.#{$fa-css-prefix}-user-times:before { content: $fa-var-user-times; }
.#{$fa-css-prefix}-hotel:before,
.#{$fa-css-prefix}-bed:before { content: $fa-var-bed; }
.#{$fa-css-prefix}-viacoin:before { content: $fa-var-viacoin; }
.#{$fa-css-prefix}-train:before { content: $fa-var-train; }
.#{$fa-css-prefix}-subway:before { content: $fa-var-subway; }
.#{$fa-css-prefix}-medium:before { content: $fa-var-medium; }
.#{$fa-css-prefix}-yc:before,
.#{$fa-css-prefix}-y-combinator:before { content: $fa-var-y-combinator; }
.#{$fa-css-prefix}-optin-monster:before { content: $fa-var-optin-monster; }
.#{$fa-css-prefix}-opencart:before { content: $fa-var-opencart; }
.#{$fa-css-prefix}-expeditedssl:before { content: $fa-var-expeditedssl; }
.#{$fa-css-prefix}-battery-4:before,
.#{$fa-css-prefix}-battery:before,
.#{$fa-css-prefix}-battery-full:before { content: $fa-var-battery-full; }
.#{$fa-css-prefix}-battery-3:before,
.#{$fa-css-prefix}-battery-three-quarters:before { content: $fa-var-battery-three-quarters; }
.#{$fa-css-prefix}-battery-2:before,
.#{$fa-css-prefix}-battery-half:before { content: $fa-var-battery-half; }
.#{$fa-css-prefix}-battery-1:before,
.#{$fa-css-prefix}-battery-quarter:before { content: $fa-var-battery-quarter; }
.#{$fa-css-prefix}-battery-0:before,
.#{$fa-css-prefix}-battery-empty:before { content: $fa-var-battery-empty; }
.#{$fa-css-prefix}-mouse-pointer:before { content: $fa-var-mouse-pointer; }
.#{$fa-css-prefix}-i-cursor:before { content: $fa-var-i-cursor; }
.#{$fa-css-prefix}-object-group:before { content: $fa-var-object-group; }
.#{$fa-css-prefix}-object-ungroup:before { content: $fa-var-object-ungroup; }
.#{$fa-css-prefix}-sticky-note:before { content: $fa-var-sticky-note; }
.#{$fa-css-prefix}-sticky-note-o:before { content: $fa-var-sticky-note-o; }
.#{$fa-css-prefix}-cc-jcb:before { content: $fa-var-cc-jcb; }
.#{$fa-css-prefix}-cc-diners-club:before { content: $fa-var-cc-diners-club; }
.#{$fa-css-prefix}-clone:before { content: $fa-var-clone; }
.#{$fa-css-prefix}-balance-scale:before { content: $fa-var-balance-scale; }
.#{$fa-css-prefix}-hourglass-o:before { content: $fa-var-hourglass-o; }
.#{$fa-css-prefix}-hourglass-1:before,
.#{$fa-css-prefix}-hourglass-start:before { content: $fa-var-hourglass-start; }
.#{$fa-css-prefix}-hourglass-2:before,
.#{$fa-css-prefix}-hourglass-half:before { content: $fa-var-hourglass-half; }
.#{$fa-css-prefix}-hourglass-3:before,
.#{$fa-css-prefix}-hourglass-end:before { content: $fa-var-hourglass-end; }
.#{$fa-css-prefix}-hourglass:before { content: $fa-var-hourglass; }
.#{$fa-css-prefix}-hand-grab-o:before,
.#{$fa-css-prefix}-hand-rock-o:before { content: $fa-var-hand-rock-o; }
.#{$fa-css-prefix}-hand-stop-o:before,
.#{$fa-css-prefix}-hand-paper-o:before { content: $fa-var-hand-paper-o; }
.#{$fa-css-prefix}-hand-scissors-o:before { content: $fa-var-hand-scissors-o; }
.#{$fa-css-prefix}-hand-lizard-o:before { content: $fa-var-hand-lizard-o; }
.#{$fa-css-prefix}-hand-spock-o:before { content: $fa-var-hand-spock-o; }
.#{$fa-css-prefix}-hand-pointer-o:before { content: $fa-var-hand-pointer-o; }
.#{$fa-css-prefix}-hand-peace-o:before { content: $fa-var-hand-peace-o; }
.#{$fa-css-prefix}-trademark:before { content: $fa-var-trademark; }
.#{$fa-css-prefix}-registered:before { content: $fa-var-registered; }
.#{$fa-css-prefix}-creative-commons:before { content: $fa-var-creative-commons; }
.#{$fa-css-prefix}-gg:before { content: $fa-var-gg; }
.#{$fa-css-prefix}-gg-circle:before { content: $fa-var-gg-circle; }
.#{$fa-css-prefix}-tripadvisor:before { content: $fa-var-tripadvisor; }
.#{$fa-css-prefix}-odnoklassniki:before { content: $fa-var-odnoklassniki; }
.#{$fa-css-prefix}-odnoklassniki-square:before { content: $fa-var-odnoklassniki-square; }
.#{$fa-css-prefix}-get-pocket:before { content: $fa-var-get-pocket; }
.#{$fa-css-prefix}-wikipedia-w:before { content: $fa-var-wikipedia-w; }
.#{$fa-css-prefix}-safari:before { content: $fa-var-safari; }
.#{$fa-css-prefix}-chrome:before { content: $fa-var-chrome; }
.#{$fa-css-prefix}-firefox:before { content: $fa-var-firefox; }
.#{$fa-css-prefix}-opera:before { content: $fa-var-opera; }
.#{$fa-css-prefix}-internet-explorer:before { content: $fa-var-internet-explorer; }
.#{$fa-css-prefix}-tv:before,
.#{$fa-css-prefix}-television:before { content: $fa-var-television; }
.#{$fa-css-prefix}-contao:before { content: $fa-var-contao; }
.#{$fa-css-prefix}-500px:before { content: $fa-var-500px; }
.#{$fa-css-prefix}-amazon:before { content: $fa-var-amazon; }
.#{$fa-css-prefix}-calendar-plus-o:before { content: $fa-var-calendar-plus-o; }
.#{$fa-css-prefix}-calendar-minus-o:before { content: $fa-var-calendar-minus-o; }
.#{$fa-css-prefix}-calendar-times-o:before { content: $fa-var-calendar-times-o; }
.#{$fa-css-prefix}-calendar-check-o:before { content: $fa-var-calendar-check-o; }
.#{$fa-css-prefix}-industry:before { content: $fa-var-industry; }
.#{$fa-css-prefix}-map-pin:before { content: $fa-var-map-pin; }
.#{$fa-css-prefix}-map-signs:before { content: $fa-var-map-signs; }
.#{$fa-css-prefix}-map-o:before { content: $fa-var-map-o; }
.#{$fa-css-prefix}-map:before { content: $fa-var-map; }
.#{$fa-css-prefix}-commenting:before { content: $fa-var-commenting; }
.#{$fa-css-prefix}-commenting-o:before { content: $fa-var-commenting-o; }
.#{$fa-css-prefix}-houzz:before { content: $fa-var-houzz; }
.#{$fa-css-prefix}-vimeo:before { content: $fa-var-vimeo; }
.#{$fa-css-prefix}-black-tie:before { content: $fa-var-black-tie; }
.#{$fa-css-prefix}-fonticons:before { content: $fa-var-fonticons; }
.#{$fa-css-prefix}-reddit-alien:before { content: $fa-var-reddit-alien; }
.#{$fa-css-prefix}-edge:before { content: $fa-var-edge; }
.#{$fa-css-prefix}-credit-card-alt:before { content: $fa-var-credit-card-alt; }
.#{$fa-css-prefix}-codiepie:before { content: $fa-var-codiepie; }
.#{$fa-css-prefix}-modx:before { content: $fa-var-modx; }
.#{$fa-css-prefix}-fort-awesome:before { content: $fa-var-fort-awesome; }
.#{$fa-css-prefix}-usb:before { content: $fa-var-usb; }
.#{$fa-css-prefix}-product-hunt:before { content: $fa-var-product-hunt; }
.#{$fa-css-prefix}-mixcloud:before { content: $fa-var-mixcloud; }
.#{$fa-css-prefix}-scribd:before { content: $fa-var-scribd; }
.#{$fa-css-prefix}-pause-circle:before { content: $fa-var-pause-circle; }
.#{$fa-css-prefix}-pause-circle-o:before { content: $fa-var-pause-circle-o; }
.#{$fa-css-prefix}-stop-circle:before { content: $fa-var-stop-circle; }
.#{$fa-css-prefix}-stop-circle-o:before { content: $fa-var-stop-circle-o; }
.#{$fa-css-prefix}-shopping-bag:before { content: $fa-var-shopping-bag; }
.#{$fa-css-prefix}-shopping-basket:before { content: $fa-var-shopping-basket; }
.#{$fa-css-prefix}-hashtag:before { content: $fa-var-hashtag; }
.#{$fa-css-prefix}-bluetooth:before { content: $fa-var-bluetooth; }
.#{$fa-css-prefix}-bluetooth-b:before { content: $fa-var-bluetooth-b; }
.#{$fa-css-prefix}-percent:before { content: $fa-var-percent; }
.#{$fa-css-prefix}-gitlab:before { content: $fa-var-gitlab; }
.#{$fa-css-prefix}-wpbeginner:before { content: $fa-var-wpbeginner; }
.#{$fa-css-prefix}-wpforms:before { content: $fa-var-wpforms; }
.#{$fa-css-prefix}-envira:before { content: $fa-var-envira; }
.#{$fa-css-prefix}-universal-access:before { content: $fa-var-universal-access; }
.#{$fa-css-prefix}-wheelchair-alt:before { content: $fa-var-wheelchair-alt; }
.#{$fa-css-prefix}-question-circle-o:before { content: $fa-var-question-circle-o; }
.#{$fa-css-prefix}-blind:before { content: $fa-var-blind; }
.#{$fa-css-prefix}-audio-description:before { content: $fa-var-audio-description; }
.#{$fa-css-prefix}-volume-control-phone:before { content: $fa-var-volume-control-phone; }
.#{$fa-css-prefix}-braille:before { content: $fa-var-braille; }
.#{$fa-css-prefix}-assistive-listening-systems:before { content: $fa-var-assistive-listening-systems; }
.#{$fa-css-prefix}-asl-interpreting:before,
.#{$fa-css-prefix}-american-sign-language-interpreting:before { content: $fa-var-american-sign-language-interpreting; }
.#{$fa-css-prefix}-deafness:before,
.#{$fa-css-prefix}-hard-of-hearing:before,
.#{$fa-css-prefix}-deaf:before { content: $fa-var-deaf; }
.#{$fa-css-prefix}-glide:before { content: $fa-var-glide; }
.#{$fa-css-prefix}-glide-g:before { content: $fa-var-glide-g; }
.#{$fa-css-prefix}-signing:before,
.#{$fa-css-prefix}-sign-language:before { content: $fa-var-sign-language; }
.#{$fa-css-prefix}-low-vision:before { content: $fa-var-low-vision; }
.#{$fa-css-prefix}-viadeo:before { content: $fa-var-viadeo; }
.#{$fa-css-prefix}-viadeo-square:before { content: $fa-var-viadeo-square; }
.#{$fa-css-prefix}-snapchat:before { content: $fa-var-snapchat; }
.#{$fa-css-prefix}-snapchat-ghost:before { content: $fa-var-snapchat-ghost; }
.#{$fa-css-prefix}-snapchat-square:before { content: $fa-var-snapchat-square; }
.#{$fa-css-prefix}-pied-piper:before { content: $fa-var-pied-piper; }
.#{$fa-css-prefix}-first-order:before { content: $fa-var-first-order; }
.#{$fa-css-prefix}-yoast:before { content: $fa-var-yoast; }
.#{$fa-css-prefix}-themeisle:before { content: $fa-var-themeisle; }
.#{$fa-css-prefix}-google-plus-circle:before,
.#{$fa-css-prefix}-google-plus-official:before { content: $fa-var-google-plus-official; }
.#{$fa-css-prefix}-fa:before,
.#{$fa-css-prefix}-font-awesome:before { content: $fa-var-font-awesome; }
.#{$fa-css-prefix}-handshake-o:before { content: $fa-var-handshake-o; }
.#{$fa-css-prefix}-envelope-open:before { content: $fa-var-envelope-open; }
.#{$fa-css-prefix}-envelope-open-o:before { content: $fa-var-envelope-open-o; }
.#{$fa-css-prefix}-linode:before { content: $fa-var-linode; }
.#{$fa-css-prefix}-address-book:before { content: $fa-var-address-book; }
.#{$fa-css-prefix}-address-book-o:before { content: $fa-var-address-book-o; }
.#{$fa-css-prefix}-vcard:before,
.#{$fa-css-prefix}-address-card:before { content: $fa-var-address-card; }
.#{$fa-css-prefix}-vcard-o:before,
.#{$fa-css-prefix}-address-card-o:before { content: $fa-var-address-card-o; }
.#{$fa-css-prefix}-user-circle:before { content: $fa-var-user-circle; }
.#{$fa-css-prefix}-user-circle-o:before { content: $fa-var-user-circle-o; }
.#{$fa-css-prefix}-user-o:before { content: $fa-var-user-o; }
.#{$fa-css-prefix}-id-badge:before { content: $fa-var-id-badge; }
.#{$fa-css-prefix}-drivers-license:before,
.#{$fa-css-prefix}-id-card:before { content: $fa-var-id-card; }
.#{$fa-css-prefix}-drivers-license-o:before,
.#{$fa-css-prefix}-id-card-o:before { content: $fa-var-id-card-o; }
.#{$fa-css-prefix}-quora:before { content: $fa-var-quora; }
.#{$fa-css-prefix}-free-code-camp:before { content: $fa-var-free-code-camp; }
.#{$fa-css-prefix}-telegram:before { content: $fa-var-telegram; }
.#{$fa-css-prefix}-thermometer-4:before,
.#{$fa-css-prefix}-thermometer:before,
.#{$fa-css-prefix}-thermometer-full:before { content: $fa-var-thermometer-full; }
.#{$fa-css-prefix}-thermometer-3:before,
.#{$fa-css-prefix}-thermometer-three-quarters:before { content: $fa-var-thermometer-three-quarters; }
.#{$fa-css-prefix}-thermometer-2:before,
.#{$fa-css-prefix}-thermometer-half:before { content: $fa-var-thermometer-half; }
.#{$fa-css-prefix}-thermometer-1:before,
.#{$fa-css-prefix}-thermometer-quarter:before { content: $fa-var-thermometer-quarter; }
.#{$fa-css-prefix}-thermometer-0:before,
.#{$fa-css-prefix}-thermometer-empty:before { content: $fa-var-thermometer-empty; }
.#{$fa-css-prefix}-shower:before { content: $fa-var-shower; }
.#{$fa-css-prefix}-bathtub:before,
.#{$fa-css-prefix}-s15:before,
.#{$fa-css-prefix}-bath:before { content: $fa-var-bath; }
.#{$fa-css-prefix}-podcast:before { content: $fa-var-podcast; }
.#{$fa-css-prefix}-window-maximize:before { content: $fa-var-window-maximize; }
.#{$fa-css-prefix}-window-minimize:before { content: $fa-var-window-minimize; }
.#{$fa-css-prefix}-window-restore:before { content: $fa-var-window-restore; }
.#{$fa-css-prefix}-times-rectangle:before,
.#{$fa-css-prefix}-window-close:before { content: $fa-var-window-close; }
.#{$fa-css-prefix}-times-rectangle-o:before,
.#{$fa-css-prefix}-window-close-o:before { content: $fa-var-window-close-o; }
.#{$fa-css-prefix}-bandcamp:before { content: $fa-var-bandcamp; }
.#{$fa-css-prefix}-grav:before { content: $fa-var-grav; }
.#{$fa-css-prefix}-etsy:before { content: $fa-var-etsy; }
.#{$fa-css-prefix}-imdb:before { content: $fa-var-imdb; }
.#{$fa-css-prefix}-ravelry:before { content: $fa-var-ravelry; }
.#{$fa-css-prefix}-eercast:before { content: $fa-var-eercast; }
.#{$fa-css-prefix}-microchip:before { content: $fa-var-microchip; }
.#{$fa-css-prefix}-snowflake-o:before { content: $fa-var-snowflake-o; }
.#{$fa-css-prefix}-superpowers:before { content: $fa-var-superpowers; }
.#{$fa-css-prefix}-wpexplorer:before { content: $fa-var-wpexplorer; }
.#{$fa-css-prefix}-meetup:before { content: $fa-var-meetup; }

@ -0,0 +1,13 @@
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.#{$fa-css-prefix}-2x { font-size: 2em; }
.#{$fa-css-prefix}-3x { font-size: 3em; }
.#{$fa-css-prefix}-4x { font-size: 4em; }
.#{$fa-css-prefix}-5x { font-size: 5em; }

@ -0,0 +1,19 @@
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
padding-left: 0;
margin-left: $fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
position: absolute;
left: -$fa-li-width;
width: $fa-li-width;
top: (2em / 14);
text-align: center;
&.#{$fa-css-prefix}-lg {
left: -$fa-li-width + (4em / 14);
}
}

@ -0,0 +1,60 @@
// Mixins
// --------------------------
@mixin fa-icon() {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@mixin fa-icon-rotate($degrees, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-webkit-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}

@ -0,0 +1,15 @@
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}

@ -0,0 +1,20 @@
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root .#{$fa-css-prefix}-rotate-90,
:root .#{$fa-css-prefix}-rotate-180,
:root .#{$fa-css-prefix}-rotate-270,
:root .#{$fa-css-prefix}-flip-horizontal,
:root .#{$fa-css-prefix}-flip-vertical {
filter: none;
}

@ -0,0 +1,5 @@
// Screen Readers
// -------------------------
.sr-only { @include sr-only(); }
.sr-only-focusable { @include sr-only-focusable(); }

@ -0,0 +1,20 @@
// Stacked Icons
// -------------------------
.#{$fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

@ -0,0 +1,800 @@
// Variables
// --------------------------
$fa-font-path: "../fonts" !default;
$fa-font-size-base: 14px !default;
$fa-line-height-base: 1 !default;
//$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix: fa !default;
$fa-version: "4.7.0" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: (30em / 14) !default;
$fa-var-500px: "\f26e";
$fa-var-address-book: "\f2b9";
$fa-var-address-book-o: "\f2ba";
$fa-var-address-card: "\f2bb";
$fa-var-address-card-o: "\f2bc";
$fa-var-adjust: "\f042";
$fa-var-adn: "\f170";
$fa-var-align-center: "\f037";
$fa-var-align-justify: "\f039";
$fa-var-align-left: "\f036";
$fa-var-align-right: "\f038";
$fa-var-amazon: "\f270";
$fa-var-ambulance: "\f0f9";
$fa-var-american-sign-language-interpreting: "\f2a3";
$fa-var-anchor: "\f13d";
$fa-var-android: "\f17b";
$fa-var-angellist: "\f209";
$fa-var-angle-double-down: "\f103";
$fa-var-angle-double-left: "\f100";
$fa-var-angle-double-right: "\f101";
$fa-var-angle-double-up: "\f102";
$fa-var-angle-down: "\f107";
$fa-var-angle-left: "\f104";
$fa-var-angle-right: "\f105";
$fa-var-angle-up: "\f106";
$fa-var-apple: "\f179";
$fa-var-archive: "\f187";
$fa-var-area-chart: "\f1fe";
$fa-var-arrow-circle-down: "\f0ab";
$fa-var-arrow-circle-left: "\f0a8";
$fa-var-arrow-circle-o-down: "\f01a";
$fa-var-arrow-circle-o-left: "\f190";
$fa-var-arrow-circle-o-right: "\f18e";
$fa-var-arrow-circle-o-up: "\f01b";
$fa-var-arrow-circle-right: "\f0a9";
$fa-var-arrow-circle-up: "\f0aa";
$fa-var-arrow-down: "\f063";
$fa-var-arrow-left: "\f060";
$fa-var-arrow-right: "\f061";
$fa-var-arrow-up: "\f062";
$fa-var-arrows: "\f047";
$fa-var-arrows-alt: "\f0b2";
$fa-var-arrows-h: "\f07e";
$fa-var-arrows-v: "\f07d";
$fa-var-asl-interpreting: "\f2a3";
$fa-var-assistive-listening-systems: "\f2a2";
$fa-var-asterisk: "\f069";
$fa-var-at: "\f1fa";
$fa-var-audio-description: "\f29e";
$fa-var-automobile: "\f1b9";
$fa-var-backward: "\f04a";
$fa-var-balance-scale: "\f24e";
$fa-var-ban: "\f05e";
$fa-var-bandcamp: "\f2d5";
$fa-var-bank: "\f19c";
$fa-var-bar-chart: "\f080";
$fa-var-bar-chart-o: "\f080";
$fa-var-barcode: "\f02a";
$fa-var-bars: "\f0c9";
$fa-var-bath: "\f2cd";
$fa-var-bathtub: "\f2cd";
$fa-var-battery: "\f240";
$fa-var-battery-0: "\f244";
$fa-var-battery-1: "\f243";
$fa-var-battery-2: "\f242";
$fa-var-battery-3: "\f241";
$fa-var-battery-4: "\f240";
$fa-var-battery-empty: "\f244";
$fa-var-battery-full: "\f240";
$fa-var-battery-half: "\f242";
$fa-var-battery-quarter: "\f243";
$fa-var-battery-three-quarters: "\f241";
$fa-var-bed: "\f236";
$fa-var-beer: "\f0fc";
$fa-var-behance: "\f1b4";
$fa-var-behance-square: "\f1b5";
$fa-var-bell: "\f0f3";
$fa-var-bell-o: "\f0a2";
$fa-var-bell-slash: "\f1f6";
$fa-var-bell-slash-o: "\f1f7";
$fa-var-bicycle: "\f206";
$fa-var-binoculars: "\f1e5";
$fa-var-birthday-cake: "\f1fd";
$fa-var-bitbucket: "\f171";
$fa-var-bitbucket-square: "\f172";
$fa-var-bitcoin: "\f15a";
$fa-var-black-tie: "\f27e";
$fa-var-blind: "\f29d";
$fa-var-bluetooth: "\f293";
$fa-var-bluetooth-b: "\f294";
$fa-var-bold: "\f032";
$fa-var-bolt: "\f0e7";
$fa-var-bomb: "\f1e2";
$fa-var-book: "\f02d";
$fa-var-bookmark: "\f02e";
$fa-var-bookmark-o: "\f097";
$fa-var-braille: "\f2a1";
$fa-var-briefcase: "\f0b1";
$fa-var-btc: "\f15a";
$fa-var-bug: "\f188";
$fa-var-building: "\f1ad";
$fa-var-building-o: "\f0f7";
$fa-var-bullhorn: "\f0a1";
$fa-var-bullseye: "\f140";
$fa-var-bus: "\f207";
$fa-var-buysellads: "\f20d";
$fa-var-cab: "\f1ba";
$fa-var-calculator: "\f1ec";
$fa-var-calendar: "\f073";
$fa-var-calendar-check-o: "\f274";
$fa-var-calendar-minus-o: "\f272";
$fa-var-calendar-o: "\f133";
$fa-var-calendar-plus-o: "\f271";
$fa-var-calendar-times-o: "\f273";
$fa-var-camera: "\f030";
$fa-var-camera-retro: "\f083";
$fa-var-car: "\f1b9";
$fa-var-caret-down: "\f0d7";
$fa-var-caret-left: "\f0d9";
$fa-var-caret-right: "\f0da";
$fa-var-caret-square-o-down: "\f150";
$fa-var-caret-square-o-left: "\f191";
$fa-var-caret-square-o-right: "\f152";
$fa-var-caret-square-o-up: "\f151";
$fa-var-caret-up: "\f0d8";
$fa-var-cart-arrow-down: "\f218";
$fa-var-cart-plus: "\f217";
$fa-var-cc: "\f20a";
$fa-var-cc-amex: "\f1f3";
$fa-var-cc-diners-club: "\f24c";
$fa-var-cc-discover: "\f1f2";
$fa-var-cc-jcb: "\f24b";
$fa-var-cc-mastercard: "\f1f1";
$fa-var-cc-paypal: "\f1f4";
$fa-var-cc-stripe: "\f1f5";
$fa-var-cc-visa: "\f1f0";
$fa-var-certificate: "\f0a3";
$fa-var-chain: "\f0c1";
$fa-var-chain-broken: "\f127";
$fa-var-check: "\f00c";
$fa-var-check-circle: "\f058";
$fa-var-check-circle-o: "\f05d";
$fa-var-check-square: "\f14a";
$fa-var-check-square-o: "\f046";
$fa-var-chevron-circle-down: "\f13a";
$fa-var-chevron-circle-left: "\f137";
$fa-var-chevron-circle-right: "\f138";
$fa-var-chevron-circle-up: "\f139";
$fa-var-chevron-down: "\f078";
$fa-var-chevron-left: "\f053";
$fa-var-chevron-right: "\f054";
$fa-var-chevron-up: "\f077";
$fa-var-child: "\f1ae";
$fa-var-chrome: "\f268";
$fa-var-circle: "\f111";
$fa-var-circle-o: "\f10c";
$fa-var-circle-o-notch: "\f1ce";
$fa-var-circle-thin: "\f1db";
$fa-var-clipboard: "\f0ea";
$fa-var-clock-o: "\f017";
$fa-var-clone: "\f24d";
$fa-var-close: "\f00d";
$fa-var-cloud: "\f0c2";
$fa-var-cloud-download: "\f0ed";
$fa-var-cloud-upload: "\f0ee";
$fa-var-cny: "\f157";
$fa-var-code: "\f121";
$fa-var-code-fork: "\f126";
$fa-var-codepen: "\f1cb";
$fa-var-codiepie: "\f284";
$fa-var-coffee: "\f0f4";
$fa-var-cog: "\f013";
$fa-var-cogs: "\f085";
$fa-var-columns: "\f0db";
$fa-var-comment: "\f075";
$fa-var-comment-o: "\f0e5";
$fa-var-commenting: "\f27a";
$fa-var-commenting-o: "\f27b";
$fa-var-comments: "\f086";
$fa-var-comments-o: "\f0e6";
$fa-var-compass: "\f14e";
$fa-var-compress: "\f066";
$fa-var-connectdevelop: "\f20e";
$fa-var-contao: "\f26d";
$fa-var-copy: "\f0c5";
$fa-var-copyright: "\f1f9";
$fa-var-creative-commons: "\f25e";
$fa-var-credit-card: "\f09d";
$fa-var-credit-card-alt: "\f283";
$fa-var-crop: "\f125";
$fa-var-crosshairs: "\f05b";
$fa-var-css3: "\f13c";
$fa-var-cube: "\f1b2";
$fa-var-cubes: "\f1b3";
$fa-var-cut: "\f0c4";
$fa-var-cutlery: "\f0f5";
$fa-var-dashboard: "\f0e4";
$fa-var-dashcube: "\f210";
$fa-var-database: "\f1c0";
$fa-var-deaf: "\f2a4";
$fa-var-deafness: "\f2a4";
$fa-var-dedent: "\f03b";
$fa-var-delicious: "\f1a5";
$fa-var-desktop: "\f108";
$fa-var-deviantart: "\f1bd";
$fa-var-diamond: "\f219";
$fa-var-digg: "\f1a6";
$fa-var-dollar: "\f155";
$fa-var-dot-circle-o: "\f192";
$fa-var-download: "\f019";
$fa-var-dribbble: "\f17d";
$fa-var-drivers-license: "\f2c2";
$fa-var-drivers-license-o: "\f2c3";
$fa-var-dropbox: "\f16b";
$fa-var-drupal: "\f1a9";
$fa-var-edge: "\f282";
$fa-var-edit: "\f044";
$fa-var-eercast: "\f2da";
$fa-var-eject: "\f052";
$fa-var-ellipsis-h: "\f141";
$fa-var-ellipsis-v: "\f142";
$fa-var-empire: "\f1d1";
$fa-var-envelope: "\f0e0";
$fa-var-envelope-o: "\f003";
$fa-var-envelope-open: "\f2b6";
$fa-var-envelope-open-o: "\f2b7";
$fa-var-envelope-square: "\f199";
$fa-var-envira: "\f299";
$fa-var-eraser: "\f12d";
$fa-var-etsy: "\f2d7";
$fa-var-eur: "\f153";
$fa-var-euro: "\f153";
$fa-var-exchange: "\f0ec";
$fa-var-exclamation: "\f12a";
$fa-var-exclamation-circle: "\f06a";
$fa-var-exclamation-triangle: "\f071";
$fa-var-expand: "\f065";
$fa-var-expeditedssl: "\f23e";
$fa-var-external-link: "\f08e";
$fa-var-external-link-square: "\f14c";
$fa-var-eye: "\f06e";
$fa-var-eye-slash: "\f070";
$fa-var-eyedropper: "\f1fb";
$fa-var-fa: "\f2b4";
$fa-var-facebook: "\f09a";
$fa-var-facebook-f: "\f09a";
$fa-var-facebook-official: "\f230";
$fa-var-facebook-square: "\f082";
$fa-var-fast-backward: "\f049";
$fa-var-fast-forward: "\f050";
$fa-var-fax: "\f1ac";
$fa-var-feed: "\f09e";
$fa-var-female: "\f182";
$fa-var-fighter-jet: "\f0fb";
$fa-var-file: "\f15b";
$fa-var-file-archive-o: "\f1c6";
$fa-var-file-audio-o: "\f1c7";
$fa-var-file-code-o: "\f1c9";
$fa-var-file-excel-o: "\f1c3";
$fa-var-file-image-o: "\f1c5";
$fa-var-file-movie-o: "\f1c8";
$fa-var-file-o: "\f016";
$fa-var-file-pdf-o: "\f1c1";
$fa-var-file-photo-o: "\f1c5";
$fa-var-file-picture-o: "\f1c5";
$fa-var-file-powerpoint-o: "\f1c4";
$fa-var-file-sound-o: "\f1c7";
$fa-var-file-text: "\f15c";
$fa-var-file-text-o: "\f0f6";
$fa-var-file-video-o: "\f1c8";
$fa-var-file-word-o: "\f1c2";
$fa-var-file-zip-o: "\f1c6";
$fa-var-files-o: "\f0c5";
$fa-var-film: "\f008";
$fa-var-filter: "\f0b0";
$fa-var-fire: "\f06d";
$fa-var-fire-extinguisher: "\f134";
$fa-var-firefox: "\f269";
$fa-var-first-order: "\f2b0";
$fa-var-flag: "\f024";
$fa-var-flag-checkered: "\f11e";
$fa-var-flag-o: "\f11d";
$fa-var-flash: "\f0e7";
$fa-var-flask: "\f0c3";
$fa-var-flickr: "\f16e";
$fa-var-floppy-o: "\f0c7";
$fa-var-folder: "\f07b";
$fa-var-folder-o: "\f114";
$fa-var-folder-open: "\f07c";
$fa-var-folder-open-o: "\f115";
$fa-var-font: "\f031";
$fa-var-font-awesome: "\f2b4";
$fa-var-fonticons: "\f280";
$fa-var-fort-awesome: "\f286";
$fa-var-forumbee: "\f211";
$fa-var-forward: "\f04e";
$fa-var-foursquare: "\f180";
$fa-var-free-code-camp: "\f2c5";
$fa-var-frown-o: "\f119";
$fa-var-futbol-o: "\f1e3";
$fa-var-gamepad: "\f11b";
$fa-var-gavel: "\f0e3";
$fa-var-gbp: "\f154";
$fa-var-ge: "\f1d1";
$fa-var-gear: "\f013";
$fa-var-gears: "\f085";
$fa-var-genderless: "\f22d";
$fa-var-get-pocket: "\f265";
$fa-var-gg: "\f260";
$fa-var-gg-circle: "\f261";
$fa-var-gift: "\f06b";
$fa-var-git: "\f1d3";
$fa-var-git-square: "\f1d2";
$fa-var-github: "\f09b";
$fa-var-github-alt: "\f113";
$fa-var-github-square: "\f092";
$fa-var-gitlab: "\f296";
$fa-var-gittip: "\f184";
$fa-var-glass: "\f000";
$fa-var-glide: "\f2a5";
$fa-var-glide-g: "\f2a6";
$fa-var-globe: "\f0ac";
$fa-var-google: "\f1a0";
$fa-var-google-plus: "\f0d5";
$fa-var-google-plus-circle: "\f2b3";
$fa-var-google-plus-official: "\f2b3";
$fa-var-google-plus-square: "\f0d4";
$fa-var-google-wallet: "\f1ee";
$fa-var-graduation-cap: "\f19d";
$fa-var-gratipay: "\f184";
$fa-var-grav: "\f2d6";
$fa-var-group: "\f0c0";
$fa-var-h-square: "\f0fd";
$fa-var-hacker-news: "\f1d4";
$fa-var-hand-grab-o: "\f255";
$fa-var-hand-lizard-o: "\f258";
$fa-var-hand-o-down: "\f0a7";
$fa-var-hand-o-left: "\f0a5";
$fa-var-hand-o-right: "\f0a4";
$fa-var-hand-o-up: "\f0a6";
$fa-var-hand-paper-o: "\f256";
$fa-var-hand-peace-o: "\f25b";
$fa-var-hand-pointer-o: "\f25a";
$fa-var-hand-rock-o: "\f255";
$fa-var-hand-scissors-o: "\f257";
$fa-var-hand-spock-o: "\f259";
$fa-var-hand-stop-o: "\f256";
$fa-var-handshake-o: "\f2b5";
$fa-var-hard-of-hearing: "\f2a4";
$fa-var-hashtag: "\f292";
$fa-var-hdd-o: "\f0a0";
$fa-var-header: "\f1dc";
$fa-var-headphones: "\f025";
$fa-var-heart: "\f004";
$fa-var-heart-o: "\f08a";
$fa-var-heartbeat: "\f21e";
$fa-var-history: "\f1da";
$fa-var-home: "\f015";
$fa-var-hospital-o: "\f0f8";
$fa-var-hotel: "\f236";
$fa-var-hourglass: "\f254";
$fa-var-hourglass-1: "\f251";
$fa-var-hourglass-2: "\f252";
$fa-var-hourglass-3: "\f253";
$fa-var-hourglass-end: "\f253";
$fa-var-hourglass-half: "\f252";
$fa-var-hourglass-o: "\f250";
$fa-var-hourglass-start: "\f251";
$fa-var-houzz: "\f27c";
$fa-var-html5: "\f13b";
$fa-var-i-cursor: "\f246";
$fa-var-id-badge: "\f2c1";
$fa-var-id-card: "\f2c2";
$fa-var-id-card-o: "\f2c3";
$fa-var-ils: "\f20b";
$fa-var-image: "\f03e";
$fa-var-imdb: "\f2d8";
$fa-var-inbox: "\f01c";
$fa-var-indent: "\f03c";
$fa-var-industry: "\f275";
$fa-var-info: "\f129";
$fa-var-info-circle: "\f05a";
$fa-var-inr: "\f156";
$fa-var-instagram: "\f16d";
$fa-var-institution: "\f19c";
$fa-var-internet-explorer: "\f26b";
$fa-var-intersex: "\f224";
$fa-var-ioxhost: "\f208";
$fa-var-italic: "\f033";
$fa-var-joomla: "\f1aa";
$fa-var-jpy: "\f157";
$fa-var-jsfiddle: "\f1cc";
$fa-var-key: "\f084";
$fa-var-keyboard-o: "\f11c";
$fa-var-krw: "\f159";
$fa-var-language: "\f1ab";
$fa-var-laptop: "\f109";
$fa-var-lastfm: "\f202";
$fa-var-lastfm-square: "\f203";
$fa-var-leaf: "\f06c";
$fa-var-leanpub: "\f212";
$fa-var-legal: "\f0e3";
$fa-var-lemon-o: "\f094";
$fa-var-level-down: "\f149";
$fa-var-level-up: "\f148";
$fa-var-life-bouy: "\f1cd";
$fa-var-life-buoy: "\f1cd";
$fa-var-life-ring: "\f1cd";
$fa-var-life-saver: "\f1cd";
$fa-var-lightbulb-o: "\f0eb";
$fa-var-line-chart: "\f201";
$fa-var-link: "\f0c1";
$fa-var-linkedin: "\f0e1";
$fa-var-linkedin-square: "\f08c";
$fa-var-linode: "\f2b8";
$fa-var-linux: "\f17c";
$fa-var-list: "\f03a";
$fa-var-list-alt: "\f022";
$fa-var-list-ol: "\f0cb";
$fa-var-list-ul: "\f0ca";
$fa-var-location-arrow: "\f124";
$fa-var-lock: "\f023";
$fa-var-long-arrow-down: "\f175";
$fa-var-long-arrow-left: "\f177";
$fa-var-long-arrow-right: "\f178";
$fa-var-long-arrow-up: "\f176";
$fa-var-low-vision: "\f2a8";
$fa-var-magic: "\f0d0";
$fa-var-magnet: "\f076";
$fa-var-mail-forward: "\f064";
$fa-var-mail-reply: "\f112";
$fa-var-mail-reply-all: "\f122";
$fa-var-male: "\f183";
$fa-var-map: "\f279";
$fa-var-map-marker: "\f041";
$fa-var-map-o: "\f278";
$fa-var-map-pin: "\f276";
$fa-var-map-signs: "\f277";
$fa-var-mars: "\f222";
$fa-var-mars-double: "\f227";
$fa-var-mars-stroke: "\f229";
$fa-var-mars-stroke-h: "\f22b";
$fa-var-mars-stroke-v: "\f22a";
$fa-var-maxcdn: "\f136";
$fa-var-meanpath: "\f20c";
$fa-var-medium: "\f23a";
$fa-var-medkit: "\f0fa";
$fa-var-meetup: "\f2e0";
$fa-var-meh-o: "\f11a";
$fa-var-mercury: "\f223";
$fa-var-microchip: "\f2db";
$fa-var-microphone: "\f130";
$fa-var-microphone-slash: "\f131";
$fa-var-minus: "\f068";
$fa-var-minus-circle: "\f056";
$fa-var-minus-square: "\f146";
$fa-var-minus-square-o: "\f147";
$fa-var-mixcloud: "\f289";
$fa-var-mobile: "\f10b";
$fa-var-mobile-phone: "\f10b";
$fa-var-modx: "\f285";
$fa-var-money: "\f0d6";
$fa-var-moon-o: "\f186";
$fa-var-mortar-board: "\f19d";
$fa-var-motorcycle: "\f21c";
$fa-var-mouse-pointer: "\f245";
$fa-var-music: "\f001";
$fa-var-navicon: "\f0c9";
$fa-var-neuter: "\f22c";
$fa-var-newspaper-o: "\f1ea";
$fa-var-object-group: "\f247";
$fa-var-object-ungroup: "\f248";
$fa-var-odnoklassniki: "\f263";
$fa-var-odnoklassniki-square: "\f264";
$fa-var-opencart: "\f23d";
$fa-var-openid: "\f19b";
$fa-var-opera: "\f26a";
$fa-var-optin-monster: "\f23c";
$fa-var-outdent: "\f03b";
$fa-var-pagelines: "\f18c";
$fa-var-paint-brush: "\f1fc";
$fa-var-paper-plane: "\f1d8";
$fa-var-paper-plane-o: "\f1d9";
$fa-var-paperclip: "\f0c6";
$fa-var-paragraph: "\f1dd";
$fa-var-paste: "\f0ea";
$fa-var-pause: "\f04c";
$fa-var-pause-circle: "\f28b";
$fa-var-pause-circle-o: "\f28c";
$fa-var-paw: "\f1b0";
$fa-var-paypal: "\f1ed";
$fa-var-pencil: "\f040";
$fa-var-pencil-square: "\f14b";
$fa-var-pencil-square-o: "\f044";
$fa-var-percent: "\f295";
$fa-var-phone: "\f095";
$fa-var-phone-square: "\f098";
$fa-var-photo: "\f03e";
$fa-var-picture-o: "\f03e";
$fa-var-pie-chart: "\f200";
$fa-var-pied-piper: "\f2ae";
$fa-var-pied-piper-alt: "\f1a8";
$fa-var-pied-piper-pp: "\f1a7";
$fa-var-pinterest: "\f0d2";
$fa-var-pinterest-p: "\f231";
$fa-var-pinterest-square: "\f0d3";
$fa-var-plane: "\f072";
$fa-var-play: "\f04b";
$fa-var-play-circle: "\f144";
$fa-var-play-circle-o: "\f01d";
$fa-var-plug: "\f1e6";
$fa-var-plus: "\f067";
$fa-var-plus-circle: "\f055";
$fa-var-plus-square: "\f0fe";
$fa-var-plus-square-o: "\f196";
$fa-var-podcast: "\f2ce";
$fa-var-power-off: "\f011";
$fa-var-print: "\f02f";
$fa-var-product-hunt: "\f288";
$fa-var-puzzle-piece: "\f12e";
$fa-var-qq: "\f1d6";
$fa-var-qrcode: "\f029";
$fa-var-question: "\f128";
$fa-var-question-circle: "\f059";
$fa-var-question-circle-o: "\f29c";
$fa-var-quora: "\f2c4";
$fa-var-quote-left: "\f10d";
$fa-var-quote-right: "\f10e";
$fa-var-ra: "\f1d0";
$fa-var-random: "\f074";
$fa-var-ravelry: "\f2d9";
$fa-var-rebel: "\f1d0";
$fa-var-recycle: "\f1b8";
$fa-var-reddit: "\f1a1";
$fa-var-reddit-alien: "\f281";
$fa-var-reddit-square: "\f1a2";
$fa-var-refresh: "\f021";
$fa-var-registered: "\f25d";
$fa-var-remove: "\f00d";
$fa-var-renren: "\f18b";
$fa-var-reorder: "\f0c9";
$fa-var-repeat: "\f01e";
$fa-var-reply: "\f112";
$fa-var-reply-all: "\f122";
$fa-var-resistance: "\f1d0";
$fa-var-retweet: "\f079";
$fa-var-rmb: "\f157";
$fa-var-road: "\f018";
$fa-var-rocket: "\f135";
$fa-var-rotate-left: "\f0e2";
$fa-var-rotate-right: "\f01e";
$fa-var-rouble: "\f158";
$fa-var-rss: "\f09e";
$fa-var-rss-square: "\f143";
$fa-var-rub: "\f158";
$fa-var-ruble: "\f158";
$fa-var-rupee: "\f156";
$fa-var-s15: "\f2cd";
$fa-var-safari: "\f267";
$fa-var-save: "\f0c7";
$fa-var-scissors: "\f0c4";
$fa-var-scribd: "\f28a";
$fa-var-search: "\f002";
$fa-var-search-minus: "\f010";
$fa-var-search-plus: "\f00e";
$fa-var-sellsy: "\f213";
$fa-var-send: "\f1d8";
$fa-var-send-o: "\f1d9";
$fa-var-server: "\f233";
$fa-var-share: "\f064";
$fa-var-share-alt: "\f1e0";
$fa-var-share-alt-square: "\f1e1";
$fa-var-share-square: "\f14d";
$fa-var-share-square-o: "\f045";
$fa-var-shekel: "\f20b";
$fa-var-sheqel: "\f20b";
$fa-var-shield: "\f132";
$fa-var-ship: "\f21a";
$fa-var-shirtsinbulk: "\f214";
$fa-var-shopping-bag: "\f290";
$fa-var-shopping-basket: "\f291";
$fa-var-shopping-cart: "\f07a";
$fa-var-shower: "\f2cc";
$fa-var-sign-in: "\f090";
$fa-var-sign-language: "\f2a7";
$fa-var-sign-out: "\f08b";
$fa-var-signal: "\f012";
$fa-var-signing: "\f2a7";
$fa-var-simplybuilt: "\f215";
$fa-var-sitemap: "\f0e8";
$fa-var-skyatlas: "\f216";
$fa-var-skype: "\f17e";
$fa-var-slack: "\f198";
$fa-var-sliders: "\f1de";
$fa-var-slideshare: "\f1e7";
$fa-var-smile-o: "\f118";
$fa-var-snapchat: "\f2ab";
$fa-var-snapchat-ghost: "\f2ac";
$fa-var-snapchat-square: "\f2ad";
$fa-var-snowflake-o: "\f2dc";
$fa-var-soccer-ball-o: "\f1e3";
$fa-var-sort: "\f0dc";
$fa-var-sort-alpha-asc: "\f15d";
$fa-var-sort-alpha-desc: "\f15e";
$fa-var-sort-amount-asc: "\f160";
$fa-var-sort-amount-desc: "\f161";
$fa-var-sort-asc: "\f0de";
$fa-var-sort-desc: "\f0dd";
$fa-var-sort-down: "\f0dd";
$fa-var-sort-numeric-asc: "\f162";
$fa-var-sort-numeric-desc: "\f163";
$fa-var-sort-up: "\f0de";
$fa-var-soundcloud: "\f1be";
$fa-var-space-shuttle: "\f197";
$fa-var-spinner: "\f110";
$fa-var-spoon: "\f1b1";
$fa-var-spotify: "\f1bc";
$fa-var-square: "\f0c8";
$fa-var-square-o: "\f096";
$fa-var-stack-exchange: "\f18d";
$fa-var-stack-overflow: "\f16c";
$fa-var-star: "\f005";
$fa-var-star-half: "\f089";
$fa-var-star-half-empty: "\f123";
$fa-var-star-half-full: "\f123";
$fa-var-star-half-o: "\f123";
$fa-var-star-o: "\f006";
$fa-var-steam: "\f1b6";
$fa-var-steam-square: "\f1b7";
$fa-var-step-backward: "\f048";
$fa-var-step-forward: "\f051";
$fa-var-stethoscope: "\f0f1";
$fa-var-sticky-note: "\f249";
$fa-var-sticky-note-o: "\f24a";
$fa-var-stop: "\f04d";
$fa-var-stop-circle: "\f28d";
$fa-var-stop-circle-o: "\f28e";
$fa-var-street-view: "\f21d";
$fa-var-strikethrough: "\f0cc";
$fa-var-stumbleupon: "\f1a4";
$fa-var-stumbleupon-circle: "\f1a3";
$fa-var-subscript: "\f12c";
$fa-var-subway: "\f239";
$fa-var-suitcase: "\f0f2";
$fa-var-sun-o: "\f185";
$fa-var-superpowers: "\f2dd";
$fa-var-superscript: "\f12b";
$fa-var-support: "\f1cd";
$fa-var-table: "\f0ce";
$fa-var-tablet: "\f10a";
$fa-var-tachometer: "\f0e4";
$fa-var-tag: "\f02b";
$fa-var-tags: "\f02c";
$fa-var-tasks: "\f0ae";
$fa-var-taxi: "\f1ba";
$fa-var-telegram: "\f2c6";
$fa-var-television: "\f26c";
$fa-var-tencent-weibo: "\f1d5";
$fa-var-terminal: "\f120";
$fa-var-text-height: "\f034";
$fa-var-text-width: "\f035";
$fa-var-th: "\f00a";
$fa-var-th-large: "\f009";
$fa-var-th-list: "\f00b";
$fa-var-themeisle: "\f2b2";
$fa-var-thermometer: "\f2c7";
$fa-var-thermometer-0: "\f2cb";
$fa-var-thermometer-1: "\f2ca";
$fa-var-thermometer-2: "\f2c9";
$fa-var-thermometer-3: "\f2c8";
$fa-var-thermometer-4: "\f2c7";
$fa-var-thermometer-empty: "\f2cb";
$fa-var-thermometer-full: "\f2c7";
$fa-var-thermometer-half: "\f2c9";
$fa-var-thermometer-quarter: "\f2ca";
$fa-var-thermometer-three-quarters: "\f2c8";
$fa-var-thumb-tack: "\f08d";
$fa-var-thumbs-down: "\f165";
$fa-var-thumbs-o-down: "\f088";
$fa-var-thumbs-o-up: "\f087";
$fa-var-thumbs-up: "\f164";
$fa-var-ticket: "\f145";
$fa-var-times: "\f00d";
$fa-var-times-circle: "\f057";
$fa-var-times-circle-o: "\f05c";
$fa-var-times-rectangle: "\f2d3";
$fa-var-times-rectangle-o: "\f2d4";
$fa-var-tint: "\f043";
$fa-var-toggle-down: "\f150";
$fa-var-toggle-left: "\f191";
$fa-var-toggle-off: "\f204";
$fa-var-toggle-on: "\f205";
$fa-var-toggle-right: "\f152";
$fa-var-toggle-up: "\f151";
$fa-var-trademark: "\f25c";
$fa-var-train: "\f238";
$fa-var-transgender: "\f224";
$fa-var-transgender-alt: "\f225";
$fa-var-trash: "\f1f8";
$fa-var-trash-o: "\f014";
$fa-var-tree: "\f1bb";
$fa-var-trello: "\f181";
$fa-var-tripadvisor: "\f262";
$fa-var-trophy: "\f091";
$fa-var-truck: "\f0d1";
$fa-var-try: "\f195";
$fa-var-tty: "\f1e4";
$fa-var-tumblr: "\f173";
$fa-var-tumblr-square: "\f174";
$fa-var-turkish-lira: "\f195";
$fa-var-tv: "\f26c";
$fa-var-twitch: "\f1e8";
$fa-var-twitter: "\f099";
$fa-var-twitter-square: "\f081";
$fa-var-umbrella: "\f0e9";
$fa-var-underline: "\f0cd";
$fa-var-undo: "\f0e2";
$fa-var-universal-access: "\f29a";
$fa-var-university: "\f19c";
$fa-var-unlink: "\f127";
$fa-var-unlock: "\f09c";
$fa-var-unlock-alt: "\f13e";
$fa-var-unsorted: "\f0dc";
$fa-var-upload: "\f093";
$fa-var-usb: "\f287";
$fa-var-usd: "\f155";
$fa-var-user: "\f007";
$fa-var-user-circle: "\f2bd";
$fa-var-user-circle-o: "\f2be";
$fa-var-user-md: "\f0f0";
$fa-var-user-o: "\f2c0";
$fa-var-user-plus: "\f234";
$fa-var-user-secret: "\f21b";
$fa-var-user-times: "\f235";
$fa-var-users: "\f0c0";
$fa-var-vcard: "\f2bb";
$fa-var-vcard-o: "\f2bc";
$fa-var-venus: "\f221";
$fa-var-venus-double: "\f226";
$fa-var-venus-mars: "\f228";
$fa-var-viacoin: "\f237";
$fa-var-viadeo: "\f2a9";
$fa-var-viadeo-square: "\f2aa";
$fa-var-video-camera: "\f03d";
$fa-var-vimeo: "\f27d";
$fa-var-vimeo-square: "\f194";
$fa-var-vine: "\f1ca";
$fa-var-vk: "\f189";
$fa-var-volume-control-phone: "\f2a0";
$fa-var-volume-down: "\f027";
$fa-var-volume-off: "\f026";
$fa-var-volume-up: "\f028";
$fa-var-warning: "\f071";
$fa-var-wechat: "\f1d7";
$fa-var-weibo: "\f18a";
$fa-var-weixin: "\f1d7";
$fa-var-whatsapp: "\f232";
$fa-var-wheelchair: "\f193";
$fa-var-wheelchair-alt: "\f29b";
$fa-var-wifi: "\f1eb";
$fa-var-wikipedia-w: "\f266";
$fa-var-window-close: "\f2d3";
$fa-var-window-close-o: "\f2d4";
$fa-var-window-maximize: "\f2d0";
$fa-var-window-minimize: "\f2d1";
$fa-var-window-restore: "\f2d2";
$fa-var-windows: "\f17a";
$fa-var-won: "\f159";
$fa-var-wordpress: "\f19a";
$fa-var-wpbeginner: "\f297";
$fa-var-wpexplorer: "\f2de";
$fa-var-wpforms: "\f298";
$fa-var-wrench: "\f0ad";
$fa-var-xing: "\f168";
$fa-var-xing-square: "\f169";
$fa-var-y-combinator: "\f23b";
$fa-var-y-combinator-square: "\f1d4";
$fa-var-yahoo: "\f19e";
$fa-var-yc: "\f23b";
$fa-var-yc-square: "\f1d4";
$fa-var-yelp: "\f1e9";
$fa-var-yen: "\f157";
$fa-var-yoast: "\f2b1";
$fa-var-youtube: "\f167";
$fa-var-youtube-play: "\f16a";
$fa-var-youtube-square: "\f166";

@ -0,0 +1,18 @@
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
$fa-font-path: "../webfonts" !default;
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

After

(image error) Size: 434 KiB

114
src/index.ts Normal file

@ -0,0 +1,114 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { XdceArchModule } from '@isp/xdce-arch-core';
import { NbpModule } from '@isp/xdce-widget';
import { NbpBreadCrumbsComponent } from './widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component';
export { NbpBreadCrumbsComponent } from './widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component';
import { NbpFidBarChartComponent } from './widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component';
export { NbpFidBarChartComponent } from './widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component';
import { NbpFidButtonBarComponent } from './widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component';
export { NbpFidButtonBarComponent } from './widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component';
import { NbpFidDonutChartComponent } from './widgetfideuram/components/nbp-fid-donut-chart/nbp-fid-donut-chart.component';
export { NbpFidDonutChartComponent } from './widgetfideuram/components/nbp-fid-donut-chart/nbp-fid-donut-chart.component';
import { NbpFidPyramidChartComponent } from './widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component';
export { NbpFidPyramidChartComponent } from './widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component';
import { NbpFidSidePopupComponent } from './widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component';
export { NbpFidSidePopupComponent } from './widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component';
import { NbpFidTableComponent } from './widgetfideuram/components/nbp-fid-table/nbp-fid-table.component';
export { NbpFidTableComponent } from './widgetfideuram/components/nbp-fid-table/nbp-fid-table.component';
import { NbpFidToggleTabComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.a11y';
export { NbpFidToggleTabComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.a11y';
import { NbpFidToggleTabComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.noa11y';
export { NbpFidToggleTabComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.noa11y';
import { NbpFidToggleTabComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component';
export { NbpFidToggleTabComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component';
import { NbpFidToggleTabsetComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.a11y';
export { NbpFidToggleTabsetComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.a11y';
import { NbpFidToggleTabsetComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.noa11y';
export { NbpFidToggleTabsetComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.noa11y';
import { NbpFidToggleTabsetComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component';
export { NbpFidToggleTabsetComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component';
import { NbpFidComboComponent } from './widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component';
export { NbpFidComboComponent } from './widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component';
import { ShowcaseComponent } from './widgetfideuram/components/showcase/showcase.component';
export { ShowcaseComponent } from './widgetfideuram/components/showcase/showcase.component';
import { Showcase1Component } from './widgetfideuram/components/showcase/showcase1.component';
export { Showcase1Component } from './widgetfideuram/components/showcase/showcase1.component';
import { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component';
export { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component';
import { AgGridModule, AngularFrameworkComponentWrapper, AngularFrameworkOverrides } from 'ag-grid-angular';
import { FormsModule } from '@angular/forms';
export { AgGridModule } from 'ag-grid-angular';
export { DATE_STRING_FORMAT, formatDate, formatNumber, setSpinnerMessage, clearSpinnerMessage } from './widgetfideuram/Utils';
@NgModule({
imports: [
XdceArchModule,
NbpModule,
AgGridModule,
FormsModule,
],
declarations: [
NbpBreadCrumbsComponent,
NbpFidBarChartComponent,
NbpFidButtonBarComponent,
NbpFidComboComponent,
NbpFidDonutChartComponent,
NbpFidPyramidChartComponent,
NbpFidSidePopupComponent,
NbpFidTableComponent,
NbpFidToggleTabComponentA11Y,
NbpFidToggleTabComponentNOA11Y,
NbpFidToggleTabComponent,
NbpFidToggleTabsetComponentA11Y,
NbpFidToggleTabsetComponentNOA11Y,
NbpFidToggleTabsetComponent,
ShowcaseComponent,
Showcase1Component,
WidgetFideuramShowcaseComponent,
],
exports: [
NbpBreadCrumbsComponent,
NbpFidBarChartComponent,
NbpFidButtonBarComponent,
NbpFidComboComponent,
NbpFidDonutChartComponent,
NbpFidPyramidChartComponent,
NbpFidSidePopupComponent,
NbpFidTableComponent,
NbpFidToggleTabComponentA11Y,
NbpFidToggleTabComponentNOA11Y,
NbpFidToggleTabComponent,
NbpFidToggleTabsetComponentA11Y,
NbpFidToggleTabsetComponentNOA11Y,
NbpFidToggleTabsetComponent,
ShowcaseComponent,
Showcase1Component,
WidgetFideuramShowcaseComponent,
AgGridModule
],
providers: [
AngularFrameworkOverrides,
AngularFrameworkComponentWrapper
],
entryComponents: [
NbpFidToggleTabComponentA11Y,
NbpFidToggleTabComponentNOA11Y,
NbpFidToggleTabsetComponentA11Y,
NbpFidToggleTabsetComponentNOA11Y,
NbpFidToggleTabComponent,
NbpFidToggleTabsetComponent
]
})
export class XdceWidgetFideuramModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: XdceWidgetFideuramModule,
providers: []
};
}
}

30
src/package.json Normal file

@ -0,0 +1,30 @@
{
"name": "@isp/xdce-module-widget-fideuram-v1",
"version": "0.1.0-snapshot.0",
"repository": {
"type": "git",
"url": "isp.com"
},
"author": {
"name": "xdce-schematics",
"email": "xdce-schematics@isp.com"
},
"keywords": [
"angular"
],
"license": "MIT",
"bugs": {
"url": "isp.com/issues"
},
"main": "xdce-module-widget-fideuram-v1.umd.js",
"module": "xdce-module-widget-fideuram-v1.js",
"jsnext:main": "xdce-module-widget-fideuram-v1.js",
"typings": "xdce-module-widget-fideuram-v1.d.ts",
"peerDependencies": {
"@angular/core": "^6.0.0",
"@ngx-translate/core": "^10.0.0",
"@ngx-translate/http-core": "^10.0.0",
"rxjs": "^6.1.0",
"zone.js": "^0.8.4"
}
}

32
src/tsconfig.es5.json Normal file

@ -0,0 +1,32 @@
{
"compilerOptions": {
"declaration": true,
"module": "es2015",
"target": "es5",
"baseUrl": ".",
"stripInternal": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"outDir": "../build",
"rootDir": ".",
"lib": [
"es2015",
"dom"
],
"skipLibCheck": true,
"types": [],
"sourceMap": true
},
"exclude": ["./src/e2e"],
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": false,
"skipTemplateCodegen": true,
"flatModuleOutFile": "xdce-module-widget-fideuram-v1.js",
"flatModuleId": "@isp/xdce-module-widget-fideuram-v1"
},
"files": [
"./index.ts"
]
}

18
src/tsconfig.spec.json Normal file

@ -0,0 +1,18 @@
{
"extends": "./tsconfig.es5.json",
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es6",
"baseUrl": "",
"types": [
"jest",
"node"
]
},
"files": [
"**/*.spec.ts"
]
}

@ -0,0 +1,45 @@
export const DATE_STRING_FORMAT = 'dd/MM/yyyy';
// formatter.ts
export function formatDate(date: Date): string {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear().toString();
const dayStr = day < 10 ? '0' + day : '' + day;
const monthStr = month < 10 ? '0' + month : '' + month;
return `${dayStr}/${monthStr}/${year}`;
}
export function formatNumber(number: number): string {
const numberFormatter = new Intl.NumberFormat('it-IT', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
return numberFormatter.format(number);
}
export function setSpinnerMessage(message: string, name: string = 'mainSpinner'): void {
const ispSpinner = _getSpinner(name);
if (ispSpinner) {
ispSpinner.setAttribute('data-message', message);
}
}
export function clearSpinnerMessage(name: string = 'mainSpinner'): void {
const ispSpinner = _getSpinner(name);
if (ispSpinner) {
ispSpinner.setAttribute('data-message', "");
}
}
function _getSpinner(name: string){
const spinners = document.getElementsByName(name);
const spinnerArray = Array.from(spinners);
return spinnerArray.find(spinner => spinner.tagName.toLowerCase() === 'isp-spinner');
}

@ -0,0 +1,3 @@
<div>
Componente BreadCrumbs
</div>

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget';
@Component({
selector: 'nbp-bread-crumbs',
templateUrl: './nbp-bread-crumbs.component.html',
styleUrls: ['./nbp-bread-crumbs.component.scss']
})
export class NbpBreadCrumbsComponent extends NbpBaseComponent {
constructor(){
super()
}
}

@ -0,0 +1 @@
<div #chart class="nbp-fid-bar-chart"></div>

@ -0,0 +1,3 @@
.nbp-fid-bar-chart {
width: 100%;
}

@ -0,0 +1,261 @@
import { Component, ElementRef, HostListener, Input, SimpleChanges, ViewChild } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget';
import * as d3 from 'd3';
export interface NbpFidBarChartConfig {
valueKey: string;
labelKey: string;
colorKey?: string;
colors?: string[];
format?: (value: number) => string;
lineHeight?: number;
chartFontSize?: number;
symbol?: string;
ticks?: number;
}
function formatAsIs(value: number): string {
const numStr = '' + value;
const length = (numStr.split('.')[1] || '').length || 0;
return new Intl.NumberFormat('it-IT', {
minimumFractionDigits: 0,
maximumFractionDigits: length
}).format(value);
};
const DEFAULT_CONFIG: NbpFidBarChartConfig = {
valueKey: 'value',
labelKey: 'label',
colors: ['#1F4E79', '#D3D3D3', '#6280a4', '#A9A9A9', '#3CB371', '#FFD700', '#FF6347', '#FF0000'],
lineHeight: 40,
chartFontSize: 14,
symbol: '',
ticks: 10,
format: formatAsIs
}
let counter = 0;
@Component({
selector: 'nbp-fid-bar-chart',
templateUrl: './nbp-fid-bar-chart.component.html',
styleUrls: ['./nbp-fid-bar-chart.component.scss']
})
export class NbpFidBarChartComponent extends NbpBaseComponent {
constructor() {
super();
}
@ViewChild('chart') chart: ElementRef;
colors: string[] = [
'#1F4E79',
'#D3D3D3',
'#6280a4',
'#A9A9A9',
'#3CB371',
'#FFD700',
'#FF6347',
'#FF0000'
];
@Input() data: any[] = [
{ description: "Monetario", perce: 9.7654, color: "#A6CE39" },
{ description: "Obbligazionario", perce: 44.0842, color: "#2C6693" },
{ description: "Azionario", perce: 39.6174, color: "#D94235" },
{ description: "Monetario Valute Estere", perce: 1.5651, color: "#CCCCCC" },
{ description: "Alternative", perce: 3.54, color: "#a3a3a3" },
{ description: "pippo", perce: 1000.54, color: "#987654" },
{ description: "pluto", perce: 3.54, color: "#234567" },
{ description: "paperino", perce: 3333.54, color: "#3741ab" },
{ description: "ciccio", perce: 525.54, color: "#38892a" },
{ description: "lupusinfabula", perce: 3.54, color: "#ae45eb" },
{ description: "aaaa", perce: 11.54, color: "#8399ae" },
{ description: "eeee", perce: 15.54, color: "#BBBBBB" },
{ description: "Altro", perce: 9.45, color: "#AAAAAA" }
];
@Input() config: NbpFidBarChartConfig = {
labelKey: 'description',
valueKey: 'perce',
colorKey: 'color'
}
ngOnInit(): void {
this.init();
this.setColors();
}
private init(): void {
this.config = {
...DEFAULT_CONFIG,
...this.config
};
if (this.config.symbol) {
this.data = this.data.map((d: any) => ({
...d,
[this.config.labelKey]: `${d[this.config.labelKey]} (${this.config.symbol})`
}));
}
}
private d3colors: any;
private setColors(): void {
if (this.config.colorKey) {
this.colors = this.data.map((d: any, i: number): string => d[this.config.colorKey] ? d[this.config.colorKey] : this.config.colors[i]);
} else if (this.config.colors) {
this.colors = this.config.colors;
}
this.d3colors = d3
.scaleOrdinal()
.domain(this.data.map((d: any) => d[this.config.labelKey].toString()))
.range(this.colors);
}
private totalWidth: number = null;
private totalHeight: number = null;
private maxLabelWidth: number = null;
private maxValueWidth: number = null;
private margin = { top: 20, right: null, bottom: 20, left: null };
ngAfterViewInit(): void {
this.calcWidth();
this.createChart();
}
private calcWidth(): void {
if (this.chart && this.chart.nativeElement && this.data && this.data.length > 0) {
// Crea un elemento SVG temporaneo
const tempSvg = d3.select('body').append('svg')
.style('visibility', 'hidden')
.style('position', 'fixed')
.style('z-index', '-1');
// Calcola la larghezza massima delle etichette
const maxLabelWidth = d3.max(this.data.map((d: any) => {
const label = this.config.symbol ? `${d[this.config.labelKey]} (${this.config.symbol})` : d[this.config.labelKey].toString();
const text = tempSvg.append('text')
.text(label)
.style('font-size', `${this.config.chartFontSize}px`) // Assicurati di usare la stessa dimensione del font
const bbox = text.node().getBBox();
text.remove(); // Rimuovi l'elemento temporaneo
return bbox.width;
})) || 0;
const maxValueWidth = d3.max(this.data.map((d: any) => {
const text = tempSvg.append('text')
.text(this.config.format(d[this.config.valueKey]))
.style('font-size', `${this.config.chartFontSize}px`) // Assicurati di usare la stessa dimensione del font
const bbox = text.node().getBBox();
text.remove(); // Rimuovi l'elemento temporaneo
return bbox.width;
})) || 0;
tempSvg.remove(); // Rimuovi l'elemento SVG temporaneo
this.maxLabelWidth = maxLabelWidth;
this.maxValueWidth = maxValueWidth;
this.margin.right = this.maxValueWidth + 10;
this.margin.left = this.maxLabelWidth + 10;
this.totalWidth = this.chart.nativeElement.offsetWidth - this.margin.left - this.margin.right;
this.totalHeight = this.config.lineHeight * this.data.length - this.margin.top - this.margin.bottom;
}
}
@HostListener('window:resize', ['$event'])
onResize() {
this.calcWidth();
this.updateBars();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['data'] || changes['config']) {
this.ngOnInit();
this.updateBars();
}
}
private createChart(): void {
if (!this.data || !this.data.length) return;
const margin = this.margin;
const width = this.totalWidth;
const height = this.totalHeight;
const svg = d3.select(this.chart.nativeElement)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const xMin = d3.min([{ [this.config.valueKey]: 0 }, ...this.data], (d: any) => d[this.config.valueKey]) || 0;
const xMax = d3.max(this.data, (d: any) => d[this.config.valueKey]) || 0;
const xScale = d3.scaleLinear()
.domain([xMin - (xMin < 0 ? this.maxValueWidth : 10), xMax * 1.1])
.range([0, width]);
const yScale = d3.scaleBand()
.domain(this.data.map((d: any) => d[this.config.labelKey]))
.range([0, height])
.padding(0.3);
const xAxis = d3.axisBottom(xScale).ticks(this.config.ticks);
const yAxis = d3.axisLeft(yScale);
svg.append('g')
.call(xAxis)
.attr('transform', `translate(0, ${height})`)
.selectAll('text')
.style('font-size', this.config.chartFontSize);
svg.append('g')
.call(yAxis)
.selectAll('text')
.style('font-size', this.config.chartFontSize);
// Aggiunta linea dell'asse 0 se ci sono valori negativi
if (xMin < 0) {
svg.append('line')
.attr('x1', xScale(0))
.attr('x2', xScale(0))
.attr('y1', 0)
.attr('y2', height)
.attr('stroke', 'black')
.attr('stroke-width', 1);
}
svg.selectAll('.bar')
.data(this.data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', (d: any) => xScale(Math.min(0, d[this.config.valueKey])))
.attr('y', (d: any) => yScale(d[this.config.labelKey]) || 0)
.attr('width', (d: any) => Math.abs(xScale(d[this.config.valueKey]) - xScale(0)))
.attr('height', yScale.bandwidth())
.attr('fill', (d: any) => this.d3colors(d[this.config.labelKey]));
svg.selectAll('.label')
.data(this.data)
.enter()
.append('text')
.attr('x', (d: any) => xScale(d[this.config.valueKey]) + (d[this.config.valueKey] < 0 ? -5 : 5))
.attr('y', (d: any) => (yScale(d[this.config.labelKey]) || 0) + yScale.bandwidth() / 2)
.attr('dy', '0.35em')
.attr('text-anchor', (d: any) => (d[this.config.valueKey] < 0 ? 'end' : 'start'))
.text((d: any) => this.config.format(d[this.config.valueKey]));
}
private updateBars() {
d3.select(this.chart.nativeElement).selectAll("*").remove();
this.createChart();
}
}

@ -0,0 +1,7 @@
<div class="nbp-fid-button-bar">
<nbp-button *ngFor="let btn of nbpButtons" [nbpLabel]="btn.label" [nbpStyle]="btn.style || _nbpStyle.DEFAULT"
[disabled]="btn.disabled" [nbpIcon]="btn.icon" [tabindex]="btn.tabindex"
[alternativeAriaLabel]="btn.alternativeAriaLabel" [invertIconPosition]="btn.invertIconPosition"
[iconAriaLabel]="btn.iconAriaLabel" (nbpClick)="onButtonClick(btn)">
</nbp-button>
</div>

@ -0,0 +1,32 @@
.nbp-fid-button-bar {
display: flex;
--nbp-button-bar-border-color: white;
--nbp-button-bar-background-color: #e3e7e9;
> nbp-button {
flex-grow: 1;
.isp-button {
width: 100%;
display: block;
background-color: var(--nbp-button-bar-background-color);
padding: 10px 0;
&:hover {
text-decoration: underline;
}
}
&:not(:last-child){
.isp-button {
border-right: 1px solid var(--nbp-button-bar-border-color);
&:hover {
text-decoration: underline;
}
}
}
}
}

@ -0,0 +1,32 @@
import { Component, Input } from '@angular/core';
import { INbpButton, NbpBaseComponent, NbpStyle } from '@isp/xdce-widget';
@Component({
selector: 'nbp-fid-button-bar',
templateUrl: './nbp-fid-button-bar.component.html',
styleUrls: ['./nbp-fid-button-bar.component.scss']
})
export class NbpFidButtonBarComponent extends NbpBaseComponent {
constructor(){
super()
}
private _nbpStyle: NbpStyle = NbpStyle.DEFAULT;
@Input()
set nbpStyle(value: NbpStyle) {
this._nbpStyle = value;
}
get nbpStyle(): NbpStyle {
return this._nbpStyle;
}
private _nbpButtons: Array<INbpButton> = undefined;
@Input()
set nbpButtons(value: Array<INbpButton>) {
this._nbpButtons = value.map((btn: INbpButton) => ({...btn, style: this._nbpStyle}));
}
get nbpButtons(): Array<INbpButton> {
return this._nbpButtons;
}
}

@ -0,0 +1,9 @@
<select class="nbp-fid-combo" (change)="onChange($event)" [disabled]="disabled">
<option *ngIf="nbpShowEmptyValue"
[selected]="ngModel === _emptyValue"
[value]="_emptyValue">{{_emptyLabel}}</option>
<option *ngFor="let op of _options"
[value]="optStrValue(op)"
[selected]="selected(op)"
>{{optLabel(op)}}</option>
</select>

@ -0,0 +1,24 @@
.nbp-fid-combo {
border: 1px solid;
border-color: #DDE6E9; // map-get($gray-palette, 100);
// background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
// background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' width='10px' height='10px' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;
// background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' width='10px' height='10px' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/></g></svg>") no-repeat;
// background-position: calc(100% - 0.75em) center !important;
background: #fff;
// -moz-appearance:none !important;
// -webkit-appearance: none !important;
// appearance: none !important;
min-width: 2em;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1em !important;
width: 100%;
&:focus,
&:active {
border-color: #66AFE9; // map-get($blue-palette, 100);
}
}

@ -0,0 +1,148 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
NbpBaseComponent,
NbpStyle,
NbpDataSource
} from '@isp/xdce-widget';
@Component({
selector: 'nbp-fid-combo',
templateUrl: './nbp-fid-combo.component.html',
styleUrls: ['./nbp-fid-combo.component.scss']
})
export class NbpFidComboComponent extends NbpBaseComponent {
constructor(){
super()
}
@Input() nbpViewField : string = null;
@Input() nbpKeyField : string = null;
_emptyLabel: string = '';
_emptyValue: string = null;
_options: Array<any> = [];
private _model: any;
@Input()
set ngModel(value: any) {
this._model = value;
if (this._nbpShowEmptyValue && this._model !== null && !this.nbpViewField) {
this._emptyValue = this._model;
this._emptyLabel = this._model;
}
}
@Output() ngModelChange = new EventEmitter<any>();
get ngModel(): any {
return this._model;
}
private _nbpStyle: NbpStyle = NbpStyle.DEFAULT;
@Input()
set nbpStyle(value: NbpStyle) {
this._nbpStyle = value;
}
get nbpStyle(): NbpStyle {
return this._nbpStyle;
}
private _nbpShowEmptyValue: boolean = true;
@Input()
set nbpShowEmptyValue(value: boolean) {
this._nbpShowEmptyValue = value;
}
get nbpShowEmptyValue(): boolean {
return this._nbpShowEmptyValue;
}
private _disabled: boolean = false;
@Input()
set disabled(value: boolean) {
this._disabled = value;
}
get disabled(): boolean {
return this._disabled;
}
private _nbpDataSource: NbpDataSource<any> = new NbpDataSource<any>();
@Input()
set nbpDataSource(value: NbpDataSource<any>) {
this._nbpDataSource = value;
this._readOptions();
}
get nbpDataSource(): NbpDataSource<any> {
return this._nbpDataSource;
}
ngOnInit(): void {
this._readOptions();
}
optStrValue(opt: any) {
if (!opt)
return "";
if (typeof (opt) === "string")
return opt;
const v = this.nbpKeyField ? opt[this.nbpKeyField] : opt;
if (v === null || v === undefined)
return "";
return "" + v;
}
optValue(opt: any) {
if (!opt)
return null;
if (typeof (opt) === "string")
return opt;
const v = this.nbpKeyField ? opt[this.nbpKeyField] : opt;
if (v === null || v === undefined)
return null;
return v;
}
optLabel(opt: any) {
if (!opt)
return '';
if (typeof (opt) === "string")
return opt;
const l = this.nbpViewField ? opt[this.nbpViewField] : opt;
if (l === null || l === undefined)
return '';
return "" + l;
}
private _readOptions() {
this._options = this.nbpDataSource ? this.nbpDataSource.arrayData : [];
if (!this._options)
this._options = [];
}
selected(op : any) {
return this.optValue(op) === this.ngModel;
}
onChange(event: Event) {
if (this._disabled)
return;
const selectElement = event.target as HTMLSelectElement;
const val = selectElement.value || '';
let sel = null;
const arr = this._options;
for (let a of arr) {
const v = this.optValue(a);
const sv = this.optStrValue(a);
if (sv === val) {
sel = v;
break;
}
}
this.ngModel = sel;
this.ngModelChange.emit(this.ngModel);
}
}

@ -0,0 +1,11 @@
<figure [id]="uniqueId"></figure>
<div class="row" style="margin-left: 15%;">
<div class="col">
<div *ngFor="let item of data; let $index = index;" class="nbp-fid-donut-chart-legend">
<svg width="20" height="20" style="margin-bottom:-6px;">
<rect width="15" height="15" [attr.fill]="colors[$index]"></rect>
</svg>
<span>{{item[config.labelKey]}} - {{formatter ? formatter(item[config.valueKey]) : item[config.valueKey]}}</span>
</div>
</div>
</div>

@ -0,0 +1,189 @@
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget';
import * as d3 from 'd3';
export interface NbpFidDonutChartConfig {
valueKey: string;
labelKey: string;
legendKey: string;
colorKey?: string;
colors?: string[];
format?: (value: number) => string;
}
let counter = 0;
@Component({
selector: 'nbp-fid-donut-chart',
templateUrl: './nbp-fid-donut-chart.component.html',
styleUrls: ['./nbp-fid-donut-chart.component.scss']
})
export class NbpFidDonutChartComponent extends NbpBaseComponent implements OnInit, AfterViewInit, OnChanges {
constructor() {
super();
this.uniqueId = `nbp-fid-donut-chart-${++counter}`;
}
uniqueId: string = null;
@Input() config: NbpFidDonutChartConfig = {
valueKey: 'valore',
labelKey: 'tipo',
legendKey: 'name',
colorKey: 'fill',
colors: null
};
colors: string[] = [
'#1F4E79',
'#D3D3D3',
'#6280a4',
'#A9A9A9',
'#3CB371',
'#FFD700',
'#FF6347',
'#FF0000'
]
@Input() data: any = [
{ name: 'Prodotti E-S-G', fill: '#1F4E79', tipo: 'Strumenti sostenibili', valore: 30 },
{ name: 'Prodotti non E-S-G', fill: '#D3D3D3', tipo: 'Strumenti non sostenibili', valore: 40 },
{ name: 'Altri prodotti', fill: '#6280a4', tipo: 'Altri strumenti', valore: 20 },
{ name: 'aaaaa', fill: '#A9A9A9', tipo: 'xxxxx', valore: 10 },
];
formatter = (value: number): string => {
const formatter = new Intl.NumberFormat('it-IT', {
style: 'decimal',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
return `${formatter.format(value)} %`;
};
svg: any;
margin = { top: 10, right: 30, bottom: 30, left: 30 };
width: number = 261;
height: number = 140;
radius: number = Math.min(this.width, this.height) / 4;
d3colors: any;
ngOnInit(): void {
this.formatter = this.config.format || this.formatter;
this.setColors();
}
ngAfterViewInit(): void {
console.log('[NbpFidDonutChartComponent] ngAfterViewInit', this);
this.createSvg();
this.drawChart();
}
setColors(): void {
if (this.config.colorKey) {
this.colors = this.data.map((d: any, i: number): string => d[this.config.colorKey] ? d[this.config.colorKey] : this.colors[i]);
} else if (this.config.colors) {
this.colors = this.config.colors;
}
this.d3colors = d3
.scaleOrdinal()
.domain(this.data.map((d: any) => d[this.config.valueKey].toString()))
.range(this.colors);
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['data'] || changes['config']) {
this.ngOnInit();
this.updateChart();
}
}
createSvg(): void {
console.log('createSvg', this);
this.svg = d3
.select(`figure#${this.uniqueId}`)
.append('svg')
.attr('viewBox', `0 0 ${this.width} 120`)
.append('g')
.attr(
'transform',
'translate(' + this.width / 1.9 + ',' + this.height / 2 + ')'
);
}
drawChart(): void {
const pie = d3
.pie<any>()
.sort(null)
.value((d: any) => Number(d[this.config.valueKey]));
const data_ready = pie(this.data);
console.log('data_ready', data_ready);
const arc = d3
.arc()
.innerRadius(this.radius * 0.4)
.outerRadius(this.radius * 0.7);
const outerArc = d3
.arc()
.innerRadius(this.radius * 0.9)
.outerRadius(this.radius * 0.9);
this.svg
.selectAll('allSlices')
.data(data_ready)
.enter()
.append('path')
.attr('d', arc)
.attr('fill', (d: any) => this.d3colors(d.data[this.config.valueKey]))
.attr('stroke', 'white')
.style('stroke-width', '0px');
this.svg
.selectAll('allPolylines')
.data(data_ready)
.enter()
.append('polyline')
.attr('stroke', '#656565')
.style('fill', 'none')
.attr('stroke-width', 1)
.attr('points', (d: any) => {
const posA = arc.centroid(d);
const posB = outerArc.centroid(d);
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
posB[0] = this.radius * 0.95 * (midangle < Math.PI ? 1 : -1);
return [posA, posB];
});
// Draw labels
this.svg
.selectAll('allLabels')
.data(data_ready)
.enter()
.append('text')
.style('fill', '#656565')
.text((d: any) => `${d.data[this.config.labelKey]} (${this.formatter(d.data[this.config.valueKey])})`)
.attr('font-size', '6px')
.attr('transform', (d: any) => {
const pos = outerArc.centroid(d);
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
pos[0] = this.radius * 0.99 * (midangle < Math.PI ? 1 : -1);
return 'translate(' + pos + ')';
})
.style('text-anchor', (d: any) => {
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
return midangle < Math.PI ? 'start' : 'end';
});
}
private updateChart() {
d3.select(`#${this.uniqueId}`).selectAll("*").remove();
this.createSvg();
this.drawChart();
}
}

@ -0,0 +1,53 @@
<!-- <table class="pyramid-table">
<tbody>
<tr *ngFor="let item of pyramidData; let i = index">
<td class="label-column" [ngStyle]="{'background': item.color}">{{ item.label.charAt(0) }}</td>
<td [ngStyle]="{ 'clip-path': getClipPath(i, pyramidData.length), 'background': item.color }">
</td>
</tr>
</tbody>
</table> -->
<table class="pyramid-table">
<thead>
<tr>
<th *ngFor="let column of pyramidColumns">
{{ column.label }}
</th>
</tr>
</thead>
<tbody class="pyramid-body">
<tr *ngFor="let item of pyramidData; let i = index">
<td *ngFor="let column of pyramidColumns">
<ng-container *ngIf="column.value === config.squareValue; else pyramidColumn">
<span
[ngStyle]="{ 'background': item[config.colorKey], 'color': 'white', 'padding': '5px', 'display': 'inline-block', 'text-align': 'center', 'width': '20px' }">
{{ item[column.value] | slice:0:1 }}
</span>
</ng-container>
<ng-template #pyramidColumn>
<span *ngIf="column.value === 'pyramidSliceValue'; else normalColumn"
[ngStyle]="{ 'clip-path': getClipPath(i, pyramidData.length), 'background':item[config.colorKey], 'display': 'block', 'height': '30px', 'width': '150px' }">
</span>
</ng-template>
<ng-template #normalColumn>
{{ column.format(item[column.value]) }}
</ng-template>
</td>
</tr>
</tbody>
<tfoot *ngIf="!!config.footerItem === true">
<tr>
<td *ngFor="let column of pyramidColumns">
<ng-container *ngIf="config.footerItem[column.value] !== undefined">
{{ column.format(config.footerItem[column.value]) }}
</ng-container>
</td>
</tr>
</tfoot>
</table>

@ -0,0 +1,9 @@
.pyramid-table {
width: 70%;
text-align: center;
border-collapse: collapse;
.pyramid-body tr {
border-bottom: 1px solid #ccc;
}
}

@ -0,0 +1,106 @@
import { Component, Input, SimpleChanges } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget';
export interface NbpFidPyramidChartColumn {
value: string;
label: string;
format: (val: number) => string;
}
export interface NbpFidPyramidChartConfig {
squareValue: string;
colorKey: string;
footerItem: any;
}
@Component({
selector: 'nbp-fid-pyramid-chart',
templateUrl: './nbp-fid-pyramid-chart.component.html',
styleUrls: ['./nbp-fid-pyramid-chart.component.scss']
})
export class NbpFidPyramidChartComponent extends NbpBaseComponent {
constructor() {
super()
}
@Input() columns: NbpFidPyramidChartColumn[] = [
{ value: 'modello', label: 'Modello', format: (val: number) => val.toFixed(2) },
{ value: 'attuale', label: 'Attuale', format: (val: number) => val.toFixed(2) },
{ value: 'controvalore', label: 'Controvalore', format: (val: number) => val.toFixed(2) },
];
@Input() data: any[] = [
{ area: 'Exxxx', modello: 5.00, attuale: 1.04, controvalore: 502.37, colorKey: '#F44336' },
{ area: 'Ixxxx', modello: 75.00, attuale: 95.92, controvalore: 46258.92, colorKey: '#FF9800' },
{ area: 'Pxxx', modello: 0.00, attuale: 0.00, controvalore: 0.00, colorKey: '#FFC107' },
{ area: 'Rxxx', modello: 10.00, attuale: 0.00, controvalore: 0.00, colorKey: '#3F51B5' },
{ area: 'La', modello: 10.00, attuale: 3.04, controvalore: 1469.30, colorKey: '#673AB7' },
];
@Input() config: NbpFidPyramidChartConfig = {
squareValue: 'area',
// colors: [],
colorKey: 'colorKey',
footerItem: {
area: 'Patrimonio Fideuram',
modello: 100.00,
attuale: 100.00,
controvalore: 48230.59,
}
};
pyramidColumns: any[] = [];
pyramidData: any[] = [];
ngOnInit(): void {
this.updateChart();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['data'] || changes['config']) {
this.updateChart();
}
}
updateChart(): void {
this.pyramidColumns = [
{ value: 'area', label: 'Area', format: (val: number) => val.toString() },
{ value: 'pyramidSliceValue', label: '' }
].concat(this.columns);
let pyramidSliceValue = 90;
this.pyramidData = this.data.map(item => {
let pyramidVal = pyramidSliceValue;
pyramidSliceValue += 30;
return {
pyramidSliceValue: pyramidVal,
...item
};
});
this.pyramidData.sort((a, b) => a.pyramidSliceValue - b.pyramidSliceValue);
}
getClipPath(index: number, total: number): string {
const baseWidth = 100;
const step = baseWidth / total;
const widthOfTop = baseWidth - step * (total - (index + 1));
const topLeftTop = (baseWidth - widthOfTop) / 2;
const topRightTop = 100 - topLeftTop;
const currentWidth = baseWidth - step * (total - 1 - index);
const previousWidth = baseWidth - step * (total - index);
const topLeft = (baseWidth - previousWidth) / 2;
const topRight = 100 - topLeft;
const bottomLeft = (baseWidth - currentWidth) / 2;
const bottomRight = 100 - bottomLeft;
if (index === 0) {
return `polygon(50% 0%, ${topLeftTop}% 100%, ${topRightTop}% 100%)`;
} else {
return `polygon(${topLeft}% 0%, ${topRight}% 0%, ${bottomRight}% 100%, ${bottomLeft}% 100%)`;
}
}
}

@ -0,0 +1,37 @@
<div class="nbp-fid-side-popup-wrapper">
<div class="nbp-fid-side-popup-overlay" *ngIf="!hideOverlay" [class.visible]="isOpen" [attr.aria-hidden]="!isOpen"
(click)="onOverlayClick($event)">
</div>
<div class="nbp-fid-side-popup-content" [class.open]="isOpen" [attr.aria-hidden]="!isOpen" role="dialog" aria-modal="true"
[attr.aria-labelledby]="'popup-title-' + id" [ngClass]="{
'nbp-size-sm': nbpSize === _size.SM,
'nbp-size-md': nbpSize === _size.MD,
'nbp-size-lg': nbpSize === _size.LG,
'nbp-style-default': nbpStyle === _style.DEFAULT,
'nbp-style-primary': nbpStyle === _style.PRIMARY,
'nbp-style-secondary': nbpStyle === _style.SECONDARY
}" (click)="$event.stopPropagation()">
<div class="nbp-side-popup-header">
<h3 *ngIf="nbpTitle" [id]="'popup-title-' + id">{{nbpTitle}}</h3>
<button class="nbp-close-button" *ngIf="!hideCloseButton" (click)="close()" aria-label="Chiudi"
[attr.aria-controls]="'popup-content-' + id">
<span class="ispv2-font-xmark"></span>
</button>
</div>
<div class="nbp-side-popup-body" [id]="'popup-content-' + id">
<ng-content></ng-content>
</div>
<div class="nbp-side-popup-footer" *ngIf="nbpButtons && nbpButtons.length > 0">
<nbp-button *ngFor="let btn of nbpButtons" [nbpLabel]="btn.label" [nbpStyle]="btn.style || _style.DEFAULT"
[disabled]="btn.disabled" [nbpIcon]="btn.icon" [tabindex]="btn.tabindex"
[alternativeAriaLabel]="btn.alternativeAriaLabel" [invertIconPosition]="btn.invertIconPosition"
[iconAriaLabel]="btn.iconAriaLabel" (nbpClick)="onButtonClick(btn)">
</nbp-button>
</div>
</div>
</div>

@ -0,0 +1,97 @@
.nbp-fid-side-popup-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index: 9999;
// Colors
--nbp-fid-side-popup-text-color: #656565;
--nbp-fid-side-popup-background-color: #f5f7fa;
// Typography
--nbp-fid-side-popup-font-size: 12px;
}
.nbp-fid-side-popup-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
pointer-events: auto;
&.visible {
display: block;
}
}
.nbp-fid-side-popup-content {
position: absolute;
top: 0;
right: -100%;
bottom: 0;
background: var(--nbp-fid-side-popup-background-color);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
pointer-events: auto;
transition: right 0.3s ease-in-out;
&.open {
right: 0;
}
// Sizes
&.nbp-size-sm {
width: 300px;
}
&.nbp-size-md {
width: 450px;
}
&.nbp-size-lg {
width: 600px;
}
// Styles
// &.nbp-style-default { border-left: 4px solid var(--nbp-fid-side-popup-default-color); }
// &.nbp-style-primary { border-left: 4px solid var(--nbp-fid-side-popup-primary-color); }
// &.nbp-style-warning { border-left: 4px solid var(--nbp-fid-side-popup-warning-color); }
// &.nbp-style-error { border-left: 4px solid var(--nbp-fid-side-popup-error-color); }
}
.nbp-fid-side-popup-header {
padding: 15px;
border-bottom: 1px solid var(--nbp-fid-side-popup-border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.nbp-fid-side-popup-body {
padding: 15px;
height: calc(100% - 120px);
overflow-y: auto;
color: var(--nbp-fid-side-popup-text-color);
font-size: var(--nbp-fid-side-popup-font-size);
}
.nbp-fid-side-popup-footer {
padding: 15px;
border-top: 1px solid var(--nbp-fid-side-popup-border-color);
display: flex;
justify-content: flex-end;
gap: 10px;
}
.nbp-close-button {
border: none;
background: none;
cursor: pointer;
font-size: 24px;
color: var(--nbp-fid-side-popup-text-color);
}

@ -0,0 +1,109 @@
import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { NbpBaseComponent, NbpStyle, NbpSize, INbpButton } from '@isp/xdce-widget/base';
import { ISidePopup, ISidePopupButton } from './nbp-fid-side-popup.interfaces';
@Component({
selector: 'nbp-fid-side-popup',
templateUrl: './nbp-fid-side-popup.component.html',
styleUrls: ['./nbp-fid-side-popup.component.scss']
})
export class NbpFidSidePopupComponent extends NbpBaseComponent implements ISidePopup {
private static counter = 0;
readonly id = `side-popup-${NbpFidSidePopupComponent.counter++}`;
_style = NbpStyle;
_size = NbpSize;
private _isOpen = false;
private _nbpTitle?: string;
private _nbpSize: NbpSize = NbpSize.MD;
private _nbpStyle: NbpStyle = NbpStyle.DEFAULT;
private _nbpButtons: ISidePopupButton[] = [];
private _hideOverlay = false;
private _hideCloseButton = false;
@Input()
set hideOverlay(value: boolean) {
this._hideOverlay = value;
}
get hideOverlay(): boolean {
return this._hideOverlay;
}
@Input()
set hideCloseButton(value: boolean) {
this._hideCloseButton = value;
}
get hideCloseButton(): boolean {
return this._hideCloseButton;
}
@Input()
set isOpen(value: boolean) {
this._isOpen = value;
}
get isOpen(): boolean {
return this._isOpen;
}
@Input()
set nbpTitle(value: string) {
this._nbpTitle = value;
}
get nbpTitle(): string {
return this._nbpTitle;
}
@Input()
set nbpSize(value: NbpSize) {
this._nbpSize = value;
}
get nbpSize(): NbpSize {
return this._nbpSize;
}
@Input()
set nbpStyle(value: NbpStyle) {
this._nbpStyle = value;
}
get nbpStyle(): NbpStyle {
return this._nbpStyle;
}
@Input()
set nbpButtons(value: ISidePopupButton[]) {
this._nbpButtons = value;
}
get nbpButtons(): ISidePopupButton[] {
return this._nbpButtons;
}
@Output() isOpenChange = new EventEmitter<boolean>();
@Output() nbpOnButtonClick = new EventEmitter<INbpButton>();
@Output() closed = new EventEmitter<void>();
@HostListener('document:keydown.escape')
handleEscape() {
if (this.isOpen) {
this.close();
}
}
close() {
this.isOpen = false;
this.isOpenChange.emit(false);
this.closed.emit();
}
onOverlayClick(event: MouseEvent) {
if (event.target === event.currentTarget) {
this.close();
}
}
onButtonClick(button: ISidePopupButton) {
if (!button.disabled) {
this.nbpOnButtonClick.emit(button);
}
}
}

@ -0,0 +1,13 @@
import { NbpStyle, NbpSize, INbpButton } from '@isp/xdce-widget/base';
export interface ISidePopupButton extends INbpButton {
layout?: string;
}
export interface ISidePopup {
isOpen: boolean;
title?: string;
size?: NbpSize;
style?: NbpStyle;
buttons?: ISidePopupButton[];
}

@ -0,0 +1,5 @@
nbp-fid-table {
display: block;
width: 100%;
height: 100%;
}

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
@Component({
selector: 'nbp-fid-table',
template: '<ng-container></ng-container>',
styleUrls: ['./nbp-fid-table.component.scss']
})
export class NbpFidTableComponent extends AgGridAngular {
}

@ -0,0 +1,274 @@
@mixin a11y-on-focus-corporate-borders($yellow-offset: -4px, $black-offset: -6px) {
&:focus-visible {
position: relative;
&::before{
background: transparent;
content: "";
position: absolute;
border-radius: 2px;
top: $yellow-offset;
left: $yellow-offset;
right: $yellow-offset;
bottom: $yellow-offset;
border: 2px solid #fff599;
}
&::after{
background: transparent;
content: "";
position: absolute;
border-radius: 4px;
top: $black-offset;
left: $black-offset;
right: $black-offset;
bottom: $black-offset;
border: 2px solid #000;
}
}
}
@mixin a11y-on-focus-retail-borders($yellow-offset: -4px, $black-offset: -6px) {
&:focus-visible {
position: relative;
&::before{
background: transparent;
content: "";
position: absolute;
border-radius: 2px;
top: $yellow-offset;
left: $yellow-offset;
right: $yellow-offset;
bottom: $yellow-offset;
border: 2px solid #FCEE50;
}
&::after{
background: transparent;
content: "";
position: absolute;
border-radius: 4px;
top: $black-offset;
left: $black-offset;
right: $black-offset;
bottom: $black-offset;
border: 2px solid #000;
}
}
}
:host(.isp-corporate-mode-a11y-wrapper) {
.isp-tab-toggle {
margin-left: auto;
margin-right: auto;
font-size: 0.875rem;
max-width: none;
.tabs-container {
border-collapse: separate;
margin-bottom: 20px;
.tab-element {
vertical-align: middle;
font-size: 0.5625rem;
font-weight: bold;
height: 2.25rem;
width: auto;
min-width: 5rem;
max-width: 13.75rem;
padding: 10px 20px 10px 20px;
border-width: 1px;
border-style: solid;
&:focus-visible {
&:not(.disabled) {
@include a11y-on-focus-corporate-borders;
}
&.disabled {
pointer-events: none;
cursor: default;
opacity: 0.35;
.tab-title {
pointer-events: none;
cursor: default;
}
}
}
&:not(.first).active {
&.inner+:not(.active) {
//border-left-color:transparent;
border-left: none;
padding-left: 21px;
.tab-title {}
}
}
&:not(.last):not(.active) {
//border-right-color:transparent;
border-right: none;
padding-right: 21px;
.tab-title {}
}
&.first.active {
&+.last:not(.active) {
//border-left-color:transparent;
border-left: none;
padding-left: 21px;
.tab-title {}
}
}
&:first-child {
border-radius: 2px 0 0 2px;
}
&:last-child {
border-radius: 0 2px 2px 0;
}
i {
font-size: 1rem;
}
.tab-title {
display: flex;
align-items: center;
text-transform: none;
height: 0.875rem;
width: auto;
min-width: 2.5rem;
max-width: 11.125rem;
font-weight: normal;
line-height: 0.875rem;
&.active-title {
font-weight: bold;
}
span {
font-size: 0.75rem;
&.disabled {
pointer-events: none;
}
}
.text-truncate-multiline {
text-transform: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-shadow: none;
font-size: 0.75rem;
}
}
}
@include a11y-on-focus-corporate-borders();
&:focus-visible {
position: relative;
z-index: 31;
}
}
&.active {
box-shadow: none;
}
}
}
.isp-tab-toggle {
display: table;
max-width: 59.6875rem;
.tabs-container {
border-collapse: collapse;
margin-bottom: 20px;
.tab-element {
display: table-cell;
height: 3.125em;
width: auto;
max-width: 15rem;
min-width: 14.375rem;
text-align: center;
border-width: 0.0625rem;
border-style: solid;
vertical-align: middle;
padding: 0px 19px;
cursor: pointer;
&.disabled {
cursor: not-allowed;
opacity: 0.35;
}
i {
display: block;
font-size: 1.5rem;
}
.tab-title {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-weight: 600;
margin: auto;
vertical-align: middle;
line-height: 0.875rem;
span {
font-size: 0.75em;
width: max-content;
&.disabled {
pointer-events: none;
}
}
.text-truncate-multiline {
text-transform: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-shadow: none;
font-size: 0.75rem;
}
.text-truncate-multiline {
text-transform: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-shadow: none;
font-size: 0.75rem;
}
}
&:focus-visible {
&:not(.disabled) {
@include a11y-on-focus-retail-borders;
}
}
}
}
}
.centre {
display: table;
margin-left: auto;
margin-right: auto;
}

@ -0,0 +1,133 @@
:host(.isp-corporate-mode-wrapper) {
.isp-tab-toggle {
margin-left: auto;
margin-right: auto;
font-size: 0.875rem;
max-width: none;
.tabs-container {
border-collapse: separate;
.tab-element {
vertical-align: middle;
font-size:0.75rem;
font-weight:bold;
height: 2.1875rem;
width: auto;
min-width: 5rem;
max-width: 9rem;
padding: 0.625rem 1.25rem 0.625rem 1.25rem;
&.disabled {
pointer-events: none;
cursor: default;
.tab-title {
pointer-events: none;
cursor: default;
}
}
&:not(.first).active {
&.inner+:not(.active) {
//border-left-color:transparent;
border-left: none;
padding-left: 1.3125rem;
.tab-title {
}
}
}
&:not(.last):not(.active) {
//border-right-color:transparent;
border-right:none;
padding-right: 1.3125rem;
.tab-title {
}
}
&.first.active {
&+.last:not(.active) {
//border-left-color:transparent;
border-left: none;
padding-left: 1.3125rem;
.tab-title {
}
}
}
&:first-child {
border-radius: 0.125rem 0 0 0.125rem;
}
&:last-child {
border-radius: 0 0.125rem 0.125rem 0;
}
i {
font-size: 1rem;
}
.tab-title {
text-transform: none;
height: 0.75rem;
width: auto;
min-width: 2.5rem;
max-width: 6.5rem;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight:bold;
line-height: 0.75rem;
span {
font-size: 0.75rem;
}
}
&.active {
box-shadow: none;
}
}
}
}
}
.isp-tab-toggle {
display: table;
max-width: 59.6875rem;
.tabs-container {
border-collapse: collapse;
.tab-element {
display: table-cell;
height: 3.125em;
width: 15rem;
text-align: center;
border-width: 0.0625rem;
border-style: solid;
padding: 0.3125rem;
cursor: pointer;
&.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
}
i {
display: block;
font-size: 1.5rem;
}
.tab-title {
display: table-cell;
height: 2.5em;
width: 14.375rem;
font-weight: 600;
margin: auto;
vertical-align: middle;
span {
font-size: 0.75em;
}
}
}
}
}
.centre {
display: table;
margin-left: auto;
margin-right: auto;
}

@ -0,0 +1,48 @@
import { Component, Input, HostBinding, Injector, TemplateRef, ElementRef } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget/base'
@Component({
template: '<ng-container *ngIf="active"><ng-container *ngTemplateOutlet="wngContent"></ng-container></ng-container>',
styleUrls: ['./nbp-fid-tab-toggle.component.a11y.scss']
})
export class NbpFidToggleTabComponentA11Y extends NbpBaseComponent {
protected isA11Y = true;
wngContent: TemplateRef<any>;
@Input() tabTemplate: TemplateRef<any> = null;
/**
* Titolo del tab
*/
@Input() title = '';
/**
* Booleano che indica se il tab è selezionato inizialmente
*/
@Input() active = false;
/**
* Booleano che indica se il tab è disabilitato
*/
@Input() disabled = false;
/**
* Id del componente
*/
private _id: string = undefined;
@Input()
set id(value: string) {
this._id = value;
this.er.nativeElement.id = value;
}
get id(): string {
return this._id;
}
constructor(injector : Injector) {
super(injector);
}
}

@ -0,0 +1,45 @@
import { Component, Injector, Input, TemplateRef } from '@angular/core';
import { NbpBaseComponent } from '@isp/xdce-widget/base';
@Component({
template: '<ng-container *ngIf="active"><ng-container *ngTemplateOutlet="wngContent"></ng-container></ng-container>',
styleUrls: ['./nbp-fid-tab-toggle.component.noa11y.scss']
})
export class NbpFidToggleTabComponentNOA11Y extends NbpBaseComponent {
wngContent: TemplateRef<any>;
@Input() tabTemplate: TemplateRef<any> = null;
/**
* Titolo del tab
*/
@Input() title = '';
/**
* Booleano che indica se il tab è selezionato inizialmente
*/
@Input() active = false;
/**
* Booleano che indica se il tab è disabilitato
*/
@Input() disabled = false;
/**
* Id del componente
*/
private _id: string = undefined;
@Input()
set id(value: string) {
this._id = value;
this.er.nativeElement.id = value;
}
get id(): string {
return this._id;
}
constructor(injector : Injector) {
super(injector);
}
}

@ -0,0 +1,97 @@
import { Component, Input, TemplateRef, Type, ViewChild } from '@angular/core';
import { NbpBaseComponentA11YWrapper } from '@isp/xdce-widget/base';
import { NbpFidToggleTabComponentA11Y } from './nbp-fid-toggle-tab.component.a11y';
import { NbpFidToggleTabComponentNOA11Y } from './nbp-fid-toggle-tab.component.noa11y';
@Component({
template: '<ng-container #componentContainer></ng-container><ng-template #wngContent><ng-content></ng-content></ng-template>',
selector: "nbp-fid-toggle-tab",
})
export class NbpFidToggleTabComponent extends NbpBaseComponentA11YWrapper<NbpFidToggleTabComponentA11Y, NbpFidToggleTabComponentNOA11Y> {
@ViewChild('wngContent')
protected wngContent: TemplateRef<any>;
get A11Ycomponent(): Type<NbpFidToggleTabComponentA11Y> {
return NbpFidToggleTabComponentA11Y;
}
get noA11Ycomponent(): Type<NbpFidToggleTabComponentNOA11Y> {
return NbpFidToggleTabComponentNOA11Y;
}
private _title: string = undefined;
@Input()
set title(value: string) {
this._title = value;
if (this.component) {
this.component.title = value;
}
}
get title(): string {
return this._title;
}
private _active: boolean = undefined;
@Input()
set active(value: boolean) {
this._active = value;
if (this.component) {
this.component.active = value;
}
}
get active(): boolean {
return this._active;
}
private _disabled: boolean = undefined;
@Input()
set disabled(value: boolean) {
this._disabled = value;
if (this.component) {
this.component.disabled = value;
}
}
get disabled(): boolean {
return this._disabled;
}
private _id: string = undefined;
@Input()
set id(value: string) {
this._id = value;
if (this.component) {
this.component.id = value;
}
}
get id(): string {
return this._id;
}
private _tabTemplate: TemplateRef<any> = null;
@Input()
set tabTemplate(value: TemplateRef<any>) {
this._tabTemplate = value;
if (this.component) {
this.component.tabTemplate = value;
}
}
get tabTemplate(): TemplateRef<any> {
return this._tabTemplate;
}
ngOnInit(): void {
super.ngOnInit();
this.component.wngContent = this.wngContent;
}
}

@ -0,0 +1,47 @@
<div #tabsContainer class="isp-tab-toggle"
role="tablist"
[attr.id]="'toggletablist-' + tabBarId"
[ngClass]="{
'isp-default': nbpStyle === _style.DEFAULT || _style.PRIMARY || _style.SECONDARY }">
<div class="tabs-container">
<div *ngFor="let tab of tabs; let i = index; first as isFirst; last as isLast" class="tab-element"
[class.disabled]="tab.disabled"
[class.active]="tab.active"
[class.first]="isFirst"
[class.last]="isLast"
[class.inner]="!(isFirst || isLast)"
[attr.tabindex]="tab.active ? '0' : '-1'"
[attr.id]="'toggletab-' + tabBarId + '-' + i"
(focus)="focusSpan(i, tab.disabled)"
(focusout)="focusoutSpan(i, tab.disabled)"
(ispClick)="tabClicked($event, tab, i)"
(keydown)="handleTablistKeydown($event, i)"
[attr.aria-disabled]="tab.disabled"
[attr.aria-selected]="tab.active ? true : false"
[attr.aria-label]="tab.title"
[attr.aria-controls]="'toggletab-tabpanel-' + tabBarId + '-' + i"
role="tab">
<div class="tab-title"
[ngClass]="{'active-title': tab.active}"
role="tabpanel"
[attr.type]="'button'">
<span #spanWithTooltip class="text-truncate-multiline"
[ngClass]="{'disabled': tab.disabled}"
[nbpEllipsisWithTooltip]="tab.title"
[attr.id]="'toggletab-span-' + i">
<ng-container *ngIf="tab.tabTemplate">
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
</ng-container>
<ng-container *ngIf="!tab.tabTemplate">
<span>{{tab.title}}</span>
</ng-container>
</span>
</div>
</div>
</div>
</div>
<div #tabPanels role="tabpanel">
<!-- <ng-content [attr.role]="'tabpanel'"></ng-content> -->
<ng-container *ngTemplateOutlet="wngContent"></ng-container>
</div>

@ -0,0 +1,257 @@
import {
Component,
ContentChildren,
ElementRef,
EventEmitter,
Injector,
Input,
Output,
QueryList,
TemplateRef,
ViewChild,
ViewChildren
} from '@angular/core';
import { LoggerService } from '@isp/xdce-arch-core-base';
import { NbpBaseComponent, NbpStyle, WidgetMode } from '@isp/xdce-widget/base';
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
let nextId = 0;
@Component({
templateUrl: './nbp-fid-toggle-tabset.component.a11y.html',
styleUrls: ['./nbp-fid-tab-toggle.component.a11y.scss']
})
export class NbpFidToggleTabsetComponentA11Y extends NbpBaseComponent {
protected isA11Y = true;
wngContent: TemplateRef<any>;
/**
* (Opzionale) Enum per impostare lo stile del pulsante.
* "DEFAULT" | "PRIMARY" | "SECONDRY"
* Valore default: "DEFAULT"
*/
@Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;
/**
* (Opzionale) String che definisce un identificativo univoco del tab bar
* Utilizzato per gli attributi wai-aria
*/
@Input() tabBarId = `${++nextId}`;
/**
* (Opzionale) input contenente il nome accessibile della tab bar
*/
@Input('aria-label') public ariaLabel: string;
/**
* (Opzionale) input contenente l'id dell'elemento DOM da associare come nome accessibile alla tab bar.
* Se valorizzato, {@link ariaLabel} sara' ignorato dallo screen-reader.
*/
@Input('aria-labelledby') public ariaLabelledBy: string;
_selectedTabIndex = 0;
/**
* Indice della scheda selezionata
*/
@Input()
set nbpSelectedIndex(value: number) {
if (this._selectedTabIndex !== value) {
this._selectedTabIndex = value;
this.nbpSelectedIndexChange.emit(this._selectedTabIndex);
}
}
get nbpSelectedIndex(): number {
return this._selectedTabIndex;
}
_style: any = NbpStyle;
// @Input() vertical ;
@Output() onSelect = new EventEmitter();
@Output() nbpSelectedIndexChange = new EventEmitter<number>();
@ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;
@ViewChild('tabsContainer') tabsContainer: ElementRef;
@ViewChild('tabPanels', { read: ElementRef }) tabPanels: ElementRef;
@ViewChildren('spanWithTooltip') spanRefs: QueryList<ElementRef>;
ngAfterContentInit() {
const actives = this.tabs.filter(t => t.active);
if (actives.length > 1) {
this.loggerService.error(`Multiple active tabs set 'active'`);
} else if (!actives.length && this.tabs.length) {
this.tabs.first.active = true;
}
}
ngAfterViewInit() {
if (this.tabPanels && this.tabPanels.nativeElement) {
const tabs: HTMLCollection = this.tabPanels.nativeElement.children;
const tabsArray = Array.from(tabs);
tabsArray.forEach((tab, index) => {
tab.id = `toggletab-tabpanel-${this.tabBarId}-${index}`;
});
}
}
focusSpan(index: string, disabled: boolean): void {
const spanId: string = 'toggletab-span-' + index;
const spanRef = this.spanRefs.find(ref => ref.nativeElement.id === spanId);
if (spanRef && !disabled) {
spanRef.nativeElement.dispatchEvent(new Event('focusin'));
}
}
focusoutSpan(index: string, disabled: boolean): void {
const spanId: string = 'toggletab-span-' + index;
const spanRef = this.spanRefs.find(ref => ref.nativeElement.id === spanId);
if (spanRef && !disabled) {
spanRef.nativeElement.dispatchEvent(new Event('focusout'));
}
}
tabClicked(event: any, tab: NbpFidToggleTabComponent, index: number) {
event.preventDefault();
if (tab.disabled) {
return;
}
this.tabs.forEach(element => element.active = false);
tab.active = true;
this.selectTab(index, tab.disabled);
this.onSelect.emit(tab);
}
selectTab(index: number, disabledTab: boolean) {
if (this._selectedTabIndex !== index && !disabledTab) {
this.nbpSelectedIndex = index;
}
}
constructor(private loggerService: LoggerService, injector: Injector) {
super(injector);
}
isCorporate() {
return WidgetMode.CORPORATE === this.widgetMode;
}
/**
* Metodo per la navigazione da tastiera e l'attivazione del focus tra le varie tabs.
* Lettura al keydown degli eventi ArrowLeft e ArrowRight per spostarsi a sinistra e a destra tra le tab;
* Home e End per passare alla prima e ultima tab.
*/
handleTablistKeydown(event: KeyboardEvent, currentTabIndex: number) {
let nextTabIndex: number = undefined;
const nbpItemsLength: number = this.tabs.length;
switch (event.key) {
case 'ArrowLeft':
event.preventDefault();
nextTabIndex = this.getLeftTabIndex(event, currentTabIndex, nbpItemsLength);
break;
case 'ArrowRight':
event.preventDefault();
nextTabIndex = this.getRightTabIndex(event, currentTabIndex, nbpItemsLength);
break;
case 'Home':
event.preventDefault();
nextTabIndex = this.getFirstTabIndex(event, 0, nbpItemsLength);
break;
case 'End':
event.preventDefault();
nextTabIndex = this.getLastTabIndex(event, nbpItemsLength - 1, nbpItemsLength);
break;
default:
break;
}
if (nextTabIndex !== undefined) {
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
if (nextTabElement) {
nextTabElement.focus();
this.scrollIntoViewIfNeeded(nextTabElement);
}
}
}
/**
* Metodo per passare al tab a sinistra,
* Se currentTabIndex è il primo tab della tablist il nextTabIndex ricavato sarà l'ultimo a destra
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
* ricavando il primo tab a sinistra selezionabile
*/
private getLeftTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
let nextTabIndex: number = (currentTabIndex - 1 + nbpItemsLength) % nbpItemsLength;
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
return nextTabIndex;
}
/**
* Metodo per passare al tab a destra,
* Se currentTabIndex è l'ultimo tab della tablist il nextTabIndex ricavato sarà l'ultimo a sinistra
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
* ricavando il primo tab a destra selezionabile
*/
private getRightTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
let nextTabIndex: number = (currentTabIndex + 1) % nbpItemsLength;
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
return nextTabIndex;
}
/**
* Metodo per passare al primo tab a sinistra,
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
* ricavando il tab più a sinistra selezionabile
*/
private getFirstTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
let nextTabIndex: number = currentTabIndex;
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
return nextTabIndex;
}
/**
* Metodo per passare all'ultimo tab a sinistra,
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
* ricavando il tab più a destra selezionabile
*/
private getLastTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
let nextTabIndex: number = currentTabIndex;
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
return nextTabIndex;
}
/**
* Metodo per controllare lo stato disabled del tab,
* Nel caso in cui lo stato sia disabled, il controllo del tab verrà passato al successivo
*/
private checkTabDisabled(event: KeyboardEvent, nextTabElement: HTMLElement, nextTabIndex: number, nbpItemsLength: number): number {
const isDisabled = nextTabElement.className.includes('disabled');
if (isDisabled) {
if (event.key === 'Home') {
nextTabIndex = this.getFirstTabIndex(event, nextTabIndex + 1, nbpItemsLength);
} else if (event.key === 'End') {
nextTabIndex = this.getLastTabIndex(event, nextTabIndex - 1, nbpItemsLength);
} else if (event.key === 'ArrowLeft') {
nextTabIndex = this.getLeftTabIndex(event, nextTabIndex, nbpItemsLength);
} else if (event.key === 'ArrowRight') {
nextTabIndex = this.getRightTabIndex(event, nextTabIndex, nbpItemsLength);
}
}
return nextTabIndex;
}
private scrollIntoViewIfNeeded(nextTabElement: HTMLElement) {
let container = this.tabsContainer.nativeElement;
let overLeft = nextTabElement.offsetLeft - container.offsetLeft < container.scrollLeft,
overRight = (nextTabElement.offsetLeft - container.offsetLeft + nextTabElement.clientWidth)
> (container.scrollLeft + container.clientWidth);
if (overLeft || overRight) {
container.scrollLeft = nextTabElement.offsetLeft - container.offsetLeft - container.clientWidth / 2 + nextTabElement.clientWidth / 2;
}
}
}

@ -0,0 +1,26 @@
<div class="isp-tab-toggle" [ngClass]="{
'isp-default': nbpStyle === _style.DEFAULT,
'isp-primary': nbpStyle === _style.PRIMARY,
'isp-secondary': nbpStyle === _style.SECONDARY}">
<div class="tabs-container" [attr.role]="'tablist'">
<div *ngFor="let tab of tabs; let i = index; first as isFirst; last as isLast" class="tab-element" [class.disabled]="tab.disabled" [class.active]="tab.active" [class.first]="isFirst" [class.last]="isLast" [class.inner]="!(isFirst || isLast)"
(ispClick)="tabClicked(tab)">
<div class="tab-title" [attr.role]="'tab'" [attr.aria-selected]="tab.active ? true : false">
<ng-container *ngIf="tab.tabTemplate">
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
</ng-container>
<ng-container *ngIf="!tab.tabTemplate">
<span>{{tab.title}}</span>
</ng-container>
</div>
</div>
</div>
</div>
<div>
<!-- <ng-content [attr.role]="'tabpanel'"></ng-content> -->
<ng-container *ngTemplateOutlet="wngContent" [attr.role]="'tabpanel'"></ng-container>
</div>

@ -0,0 +1,74 @@
import {
Component,
Input,
Output,
ContentChildren,
HostListener,
EventEmitter,
AfterContentInit,
QueryList,
HostBinding,
Injector,
TemplateRef
} from '@angular/core';
import { NbpFidToggleTabComponentNOA11Y } from './nbp-fid-toggle-tab.component.noa11y';
import { NbpStyle } from '@isp/xdce-widget/base';
import { LoggerService } from '@isp/xdce-arch-core-base';
import { NbpBaseComponent, WidgetMode } from '@isp/xdce-widget/base';
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
@Component({
templateUrl: './nbp-fid-toggle-tabset.component.noa11y.html',
styleUrls: ['./nbp-fid-tab-toggle.component.noa11y.scss']
})
export class NbpFidToggleTabsetComponentNOA11Y extends NbpBaseComponent {
wngContent: TemplateRef<any>;
/**
* (Opzionale) Enum per impostare lo stile del pulsante.
* "DEFAULT" | "PRIMARY" | "SECONDRY"
* Valore default: "DEFAULT"
*/
@Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;
@Input() tabTemplate: TemplateRef<any>;
_style: any = NbpStyle;
// @Input() vertical ;
@Output() onSelect = new EventEmitter();
@ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;
ngAfterContentInit () {
const actives = this.tabs.filter(t => t.active);
if (actives.length > 1) {
this.loggerService.error(`Multiple active tabs set 'active'`);
} else if (!actives.length && this.tabs.length) {
this.tabs.first.active = true;
}
}
tabClicked(tab: NbpFidToggleTabComponentNOA11Y) {
if(tab.disabled) {
return;
}
this.tabs.forEach(element => element.active = false);
tab.active = true;
this.onSelect.emit(tab);
}
constructor(private loggerService : LoggerService, injector : Injector) {
super(injector);
}
isCorporate() {
return WidgetMode.CORPORATE === this.widgetMode;
}
}

@ -0,0 +1,111 @@
import { ChangeDetectorRef, Component, ContentChildren, EventEmitter, Injector, Input, Output, QueryList, TemplateRef, Type, ViewChild } from '@angular/core';
import { NbpBaseComponentA11YWrapper, NbpStyle } from '@isp/xdce-widget/base';
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
import { NbpFidToggleTabsetComponentA11Y } from './nbp-fid-toggle-tabset.component.a11y';
import { NbpFidToggleTabsetComponentNOA11Y } from './nbp-fid-toggle-tabset.component.noa11y';
@Component({
template: "<ng-container #componentContainer></ng-container><ng-template #wngContent><ng-content></ng-content></ng-template>",
selector: "nbp-fid-toggle-tabset",
})
export class NbpFidToggleTabsetComponent extends NbpBaseComponentA11YWrapper<NbpFidToggleTabsetComponentA11Y, NbpFidToggleTabsetComponentNOA11Y> {
private _cdr: ChangeDetectorRef;
constructor(private inj: Injector){
super(inj);
this._cdr = this.inj.get(ChangeDetectorRef);
}
@ViewChild('wngContent', { read: TemplateRef })
protected wngContent: TemplateRef<any>;
@ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;
get A11Ycomponent(): Type<NbpFidToggleTabsetComponentA11Y> {
return NbpFidToggleTabsetComponentA11Y;
}
get noA11Ycomponent(): Type<NbpFidToggleTabsetComponentNOA11Y> {
return NbpFidToggleTabsetComponentNOA11Y;
}
ngOnInit(): void {
super.ngOnInit();
this.component.wngContent = this.wngContent;
}
ngAfterViewInit() {
this.component.tabs = this.tabs;
// needed to refresh the view when this widget is placed inside a component with a OnPush rendering strategy
this._cdr.detectChanges();
}
private _nbpStyle: NbpStyle = undefined;
@Input()
set nbpStyle(value: NbpStyle) {
this._nbpStyle = value;
if (this.component) {
this.component.nbpStyle = value;
}
}
get nbpStyle(): NbpStyle {
return this._nbpStyle;
}
private _tabBarId: string = undefined;
@Input()
set tabBarId(value: string) {
this._tabBarId = value;
if (this.component) {
this.component.tabBarId = value;
}
}
get tabBarId(): string {
return this._tabBarId;
}
@Input()
set _tabToggleId(value: string) {
this._tabToggleId = value;
if (this.component) {
this.component.tabToggleId = value;
}
}
get tabToggleId(): string {
return this._tabToggleId;
}
private _ariaLabel = undefined;
@Input('aria-label')
set ariaLabel(value: string) {
this._ariaLabel = value;
if (this.component) {
this.component.ariaLabel = value;
}
}
get ariaLabel(): string {
return this._ariaLabel;
}
private _ariaLabelledBy = undefined;
@Input('aria-labelledby')
set ariaLabelledBy(value: string) {
this._ariaLabelledBy = value;
if (this.component) {
this.component.ariaLabelledBy = value;
}
}
get ariaLabelledBy(): string {
return this._ariaLabelledBy;
}
@Output() onSelect = new EventEmitter<any>();
@Output() nbpSelectedIndexChange = new EventEmitter<number>();
}

@ -0,0 +1,327 @@
<div>
<h3>Buttons (nbp-button)</h3>
<h4>Default</h4>
<div>
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.DEFAULT">
</nbp-button>
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.DEFAULT" [nbpIcon]="'isp-font-servizio-vorrei'">
</nbp-button>
</div>
<h4>Primary</h4>
<div>
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.PRIMARY">
</nbp-button>
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.PRIMARY" [nbpIcon]="'isp-font-servizio-vorrei'">
</nbp-button>
<nbp-button [nbpLabel]="'labelA'" disabled [nbpStyle]="_nbpStyle.PRIMARY">
</nbp-button>
<nbp-button [nbpLabel]="'labelB'" disabled [nbpStyle]="_nbpStyle.PRIMARY"
[nbpIcon]="'isp-font-servizio-vorrei'">
</nbp-button>
</div>
<h4>Secondary</h4>
<div>
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.SECONDARY">
</nbp-button>
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpIcon]="'isp-font-servizio-vorrei'">
</nbp-button>
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpStyleType]="'OUTLINE'">
</nbp-button>
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpStyleType]="'OUTLINE'"
[nbpIcon]="'isp-font-servizio-vorrei'">
</nbp-button>
</div>
<h3>Checkbox (nbp-checkbox)</h3>
<h4>Default</h4>
<div>
<nbp-checkbox [id]="'D-1'" [name]="'D-1'" [value]="'valueA'" [nbpLabel]="'Default'"></nbp-checkbox>
<nbp-checkbox [id]="'D-3'" [name]="'D-3'" [nbpLabel]="'Default checked'" [checked]="'true'"></nbp-checkbox>
<nbp-checkbox [id]="'D-4'" [name]="'D-4'" [value]="'valueB'" [nbpLabel]="'Default disabled'"
disabled></nbp-checkbox>
<nbp-checkbox [id]="'D-4'" [name]="'D-4'" [value]="'valzueB'" [nbpLabel]="'Default disabled'" [checked]="'true'"
disabled></nbp-checkbox>
</div>
<h4>Primary</h4>
<div>
<nbp-checkbox [id]="'D-1'" [name]="'D-1'" [nbpStyle]="_nbpStyle.PRIMARY" [value]="'valueA'"
[nbpLabel]="'Primary'"></nbp-checkbox>
<nbp-checkbox [id]="'Db-3'" [name]="'Db-3'" [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary checked'"
[checked]="'true'"></nbp-checkbox>
<nbp-checkbox [id]="'Db-4'" [name]="'Db-4'" [nbpStyle]="_nbpStyle.PRIMARY" [value]="'valueB'"
[nbpLabel]="'Primary disabled'" disabled></nbp-checkbox>
<nbp-checkbox [id]="'Db-4'" [name]="'Db-4'" [nbpStyle]="_nbpStyle.PRIMARY" [value]="'valueB'"
[nbpLabel]="'Primary disabled'" [checked]="'true'" disabled></nbp-checkbox>
</div>
<h4>Inline</h4>
<div>
<nbp-checkbox [id]="'Inline-1'" [name]="'Inline-1'" [nbpStyle]="'default'" [nbpDisplayInline]="'true'"
[nbpLabel]="'labelA'"></nbp-checkbox>
<nbp-checkbox [id]="'Inline-3'" [name]="'Inline-3'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpDisplayInline]="'true'"
[nbpLabel]="'labelC'"></nbp-checkbox>
</div>
<h3>Radio (nbp-radio)</h3>
<h4>Default</h4>
<div>
<nbp-radio [(ngModel)]="radioModelDefault" value="primary" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpLabel]="'Default'"></nbp-radio>
<nbp-radio [(ngModel)]="radioModelDefault" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpLabel]="'Default checked'" [checked]="true"></nbp-radio>
<nbp-radio [(ngModel)]="radioModelDefault" value="disabled" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpLabel]="'Default disabled'" disabled></nbp-radio>
<nbp-radio [(ngModel)]="radioModelDefault" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpLabel]="'Default disabled checked'" [checked]="true" disabled></nbp-radio>
</div>
<h4>Primary</h4>
<div>
<nbp-radio [(ngModel)]="radioModelPrimary" value="primary" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpLabel]="'Primary'"></nbp-radio>
<nbp-radio [(ngModel)]="radioModelPrimary" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpLabel]="'Primary checked'" [checked]="true"></nbp-radio>
<nbp-radio [(ngModel)]="radioModelPrimary" value="disabled" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpLabel]="'Primary disabled'" disabled></nbp-radio>
<nbp-radio [(ngModel)]="radioModelPrimary" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpLabel]="'Primary disabled checked'" [checked]="true" disabled></nbp-radio>
</div>
<h3>Toggle (nbp-input-container + nbp-toggle)</h3>
<h4>Default</h4>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle checked'">
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="true" [showLabel]="false"></nbp-toggle>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle'">
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="false" [showLabel]="false"></nbp-toggle>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle checked disabled'">
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="true" [showLabel]="false"
[disabledToggle]="true"></nbp-toggle>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle disabled'">
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="false" [showLabel]="false"
[disabledToggle]="true"></nbp-toggle>
</nbp-input-container>
</div>
<h4>Primary</h4>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle checked'">
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="true" [showLabel]="false"></nbp-toggle>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle'">
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="false" [showLabel]="false"></nbp-toggle>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle checked disabled'">
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="true" [showLabel]="false"
[disabledToggle]="true"></nbp-toggle>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle disabled'">
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="false" [showLabel]="false"
[disabledToggle]="true"></nbp-toggle>
</nbp-input-container>
</div>
<h3>Accordion (nbp-accordion)</h3>
<h4>Primary</h4>
<div>
<nbp-accordion [nbpTitle]="accordionTitle" [nbpStyle]="_nbpStyle.DEFAULT" [nbpBorder]="true"
[nbpCollapsed]="false" [showTooltip]="tooltipFlag" [tooltipSize]="_nbpSize.MD"
[tooltipVisibility]="tooltipVisibility" [tooltipText]="accordionTooltip" [tooltipIcon]="tooltipIcona">
Contenuto accordion
</nbp-accordion>
</div>
<h3>Modal (nbp-modal)</h3>
<div>
<nbp-button id="modal-default-button-2" class="my-2" [nbpLabel]="'Open modal'" [nbpStyle]="_nbpStyle.PRIMARY"
(nbpClick)='_openModal(_modalDef1, _nbpSize.MD, _nbpStyle.PRIMARY)'>
</nbp-button>
<nbp-button id="modal-default-button-2" class="my-2" [nbpLabel]="'Open modal'" [nbpStyle]="_nbpStyle.PRIMARY"
(nbpClick)='_openModal(_secButtModale1, _nbpSize.MD, _nbpStyle.PRIMARY)'>
</nbp-button>
</div>
<nbp-modal id="modal-default-1" #defModale1 [nbpButtons]="singleButton" nbpTitle='Basic modal' [nbpSize]="_size"
(nbpOnButtonClicked)="onButtonClicked($event)">
<div>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus in quam tortor.
Etiam eu dolor arcu. Pellentesque
habitant
morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Integer eu rhoncus
orci. Etiam tincidunt
augue molestie enim sagittis, sed varius sem
pharetra. Aliquam erat volutpat. Sed sit amet
nunc eu dui bibendum
imperdiet non vel ligula. Fusce augue ex,
ornare finibus cursus eget, ultrices bibendum
mauris. Morbi consequat
vitae eros vel rhoncus.
</div>
</nbp-modal>
<nbp-modal id="modal-sec-butt-1" #secButtModale1 [nbpButtons]="twoButton" nbpTitle='Attenzione'
(nbpOnButtonClicked)="onButtonClicked($event)" (nbpOnClose)="onButtonClicked($event)">
<div>
<h2>Sei sicuro di volerlo eliminare?</h2>
</div>
</nbp-modal>
<h3>Tooltip (nbp-tooltip)</h3>
<h4>Default</h4>
<div *ngFor="let position of positions">
<span style="margin-right: 5px;">{{ position }}</span>
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpVisibilityStrategy]="'hover'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
[nbpText]="tooltipText">
<span class="tooltip-icon {{tooltipIcon}}"></span>
</nbp-tooltip>
</div>
<h4>Primary</h4>
<div *ngFor="let position of positions">
<span style="margin-right: 5px;">{{ position }}</span>
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpVisibilityStrategy]="'hover'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
[nbpText]="tooltipText">
<span class="tooltip-icon {{tooltipIcon}}"></span>
</nbp-tooltip>
</div>
<h3>Tooltip popover (nbp-tooltip)</h3>
<h4>Default</h4>
<div *ngFor="let position of positions">
<span style="margin-right: 5px;">{{ position }}</span>
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpVisibilityStrategy]="'click'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
[nbpText]="tooltipText" [nbpTitle]="tooltipTitle">
<span class="tooltip-icon {{tooltipIcon}}"></span>
</nbp-tooltip>
</div>
<h4>Primary</h4>
<div *ngFor="let position of positions">
<span style="margin-right: 5px;">{{ position }}</span>
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpVisibilityStrategy]="'click'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
[nbpTitle]="tooltipTitle" [nbpText]="tooltipText">
<span class="tooltip-icon {{tooltipIcon}}"></span>
</nbp-tooltip>
</div>
<h3>Button generation (nbp-button-generation)</h3>
<h4>Default</h4>
<div>
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.DEFAULT"
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpIcon]="'ispv2-font-gear'">
</nbp-button-generation>
</div>
<h4>Primary</h4>
<div>
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.PRIMARY"
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpIcon]="'ispv2-font-gear'">
</nbp-button-generation>
</div>
<h4>Secondary</h4>
<div>
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.SECONDARY"
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.SECONDARY"
[nbpIcon]="'ispv2-font-gear'">
</nbp-button-generation>
</div>
<h3>Button generation (nbp-button-generation [nbpIconPosition]="_iconPosition.TOP")</h3>
<h4>Default</h4>
<div>
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.DEFAULT"
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpIcon]="'ispv2-font-gear'" [nbpIconPosition]="_iconPosition.TOP">
</nbp-button-generation>
</div>
<h4>Primary</h4>
<div>
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.PRIMARY"
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpIcon]="'ispv2-font-gear'" [nbpIconPosition]="_iconPosition.TOP">
</nbp-button-generation>
</div>
<h4>Secondary</h4>
<div>
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.SECONDARY"
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.SECONDARY"
[nbpIcon]="'ispv2-font-gear'" [nbpIconPosition]="_iconPosition.TOP">
</nbp-button-generation>
</div>
<h3>Side Popup (nbp-fid-side-popup)</h3>
<div>
<nbp-button [nbpLabel]="'Apri Side Popup'" [nbpStyle]="_nbpStyle.PRIMARY" (nbpClick)="openSidePopup()">
</nbp-button>
<nbp-fid-side-popup [isOpen]="isSidePopupOpen" [hideOverlay]="true" [hideCloseButton]="true">
<nbp-button-generation [nbpLabel]="'Chiudi'" [nbpStyle]="_nbpStyle.PRIMARY"
(nbpClick)="closeSidePopup()">
</nbp-button-generation>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</nbp-fid-side-popup>
</div>
<h3>Button bar (nbp-fid-button-bar)</h3>
<div>
<nbp-fid-button-bar [nbpButtons]="nbpButtons"></nbp-fid-button-bar>
</div>
<h4>Button Bar in Card (nbp-card + nbp-fid-button-bar) (nbp-accordion + nbp-fid-button-bar)</h4>
<div>
<div style="width: 500px">
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
[templateRef]="templateCard">
</nbp-card>
<ng-template #templateCard>
<nbp-fid-button-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpButtons]="nbpButtons"></nbp-fid-button-bar>
</ng-template>
</div>
<nbp-accordion [nbpTitle]="accordionTitle" [nbpStyle]="_nbpStyle.DEFAULT" [nbpBorder]="true"
[nbpCollapsed]="false" [showTooltip]="tooltipFlag" [tooltipSize]="_nbpSize.MD"
[tooltipVisibility]="tooltipVisibility" [tooltipText]="accordionTooltip" [tooltipIcon]="tooltipIcona">
Contenuto accordion
<nbp-fid-button-bar [nbpStyle]="_nbpStyle.PRIMARY" [nbpButtons]="nbpButtons"></nbp-fid-button-bar>
</nbp-accordion>
</div>
</div>

@ -0,0 +1,12 @@
.new-part, h3 {
margin-top: 3rem;
font-weight: bold;
font-size: 14px;
color: #444;
padding: .1rem 0;
border-bottom: 1px solid #c00;
margin-bottom: .7rem;
&.first {
margin-top: 0;
}
}

@ -0,0 +1,136 @@
import { Component, ViewChild } from '@angular/core';
import { INbpButton, NbpBaseComponent, NbpButtonIconPosition, NbpDataSource, NbpSize, NbpStyle } from '@isp/xdce-widget';
@Component({
selector: 'showcase',
templateUrl: './showcase.component.html',
styleUrls: ['./showcase.component.scss']
})
export class ShowcaseComponent extends NbpBaseComponent {
_nbpStyle = NbpStyle;
_iconPosition = NbpButtonIconPosition;
_nbpSize = NbpSize;
_size: NbpSize;
isSidePopupOpen = false;
openSidePopup() {
this.isSidePopupOpen = true;
}
closeSidePopup() {
this.isSidePopupOpen = false;
}
radioModelDefault = 'R-DEF';
radioModelPrimary = 'R-PRI';
accordionTitle: string = "Avviso PB";
accordionString: string = "Sono una stringa";
tooltipFlag: boolean = true;
accordionTooltip: string = '';
tooltipVisibility: string = '';
tooltipIcona: string = '';
tooltipTitle: string = 'Title';
tooltipText: string = 'Lorem ipsum';
tooltipIcon: string = 'ispv2-font-circle-info';
positions = ['Top', 'Bottom', 'Left', 'Right'];
constructor() {
super()
}
@ViewChild('defModale1')
_modalDef1: any;
@ViewChild('secButtModale1')
_secButtModale1: any;
singleButton: INbpButton[] = [
{
id: "ok",
label: "Ok",
disabled: false,
visible: true,
style: NbpStyle.PRIMARY,
tabindex: 0,
}
];
twoButton: INbpButton[] = [
{
id: "ko",
label: "Annulla",
disabled: false,
visible: true,
style: NbpStyle.SECONDARY,
tabindex: 0
},
{
id: "ok",
label: "Conferma",
disabled: false,
visible: true,
style: NbpStyle.PRIMARY,
tabindex: 0
}
];
_openModal(modalComponent: any, size: NbpSize, style: NbpStyle) {
this._size = size;
modalComponent.open();
}
onButtonClicked(button: any) {
if (button['id'] === 'ko') {
this._secButtModale1.close();
}
if (button['id'] === 'ok') {
alert("ok");
this._modalDef1.close();
this._secButtModale1.close();
}
}
values = [
"First item",
"Second item",
"Third item",
"Fourth item",
"Fifth item",
"Sixth item"
];
datasource = new NbpDataSource<string>(this.values);
selectedValues: Array<string> = [];
cardTitle = 'Card Title';
cardDescr = 'Card Description';
nbpButtons: Array<INbpButton> = [
{
id: "portfolio",
label: "Portfolio",
disabled: false,
visible: true,
tabindex: 0,
style: NbpStyle.DEFAULT
},
{
id: "assets",
label: "Assets",
disabled: false,
visible: true,
tabindex: 0,
style: NbpStyle.DEFAULT
},
{
id: "pippo",
label: "Pippo",
disabled: false,
visible: true,
tabindex: 0,
style: NbpStyle.DEFAULT
}
];
}

@ -0,0 +1,183 @@
<div>
<p class="new-part">Tabbar (nbp-tab-bar):</p>
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
[nbpTabContent]="true">
</nbp-tab-bar>
<p class="new-part">Tabbar with title:</p>
<div class="nbp-tab-bar-title">
<div class="tab-bar-title">Title:</div>
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
[nbpTabContent]="true">
</nbp-tab-bar>
</div>
<p class="new-part">Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset) check devtools inspector
elements:</p>
<div class="nbp-tab-bar-title">
<div class="tab-bar-title">Title:</div>
<nbp-toggle-tabset>
<nbp-toggle-tab disabled="true" title="Scheda 0">
<h3>Scheda 0 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-toggle-tab>
<nbp-toggle-tab active="true" title="Scheda 1">
<h3>Scheda 1 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-toggle-tab>
<nbp-toggle-tab title="Scheda 2">
<h3>Scheda 2 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-toggle-tab>
<nbp-toggle-tab title="Scheda 3">
<h3>Scheda 3 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-toggle-tab>
</nbp-toggle-tabset>
</div>
<p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
<div>
<nbp-input-container [nbpLabel]="labelInput4" [nbpStyle]="_nbpStyle.PRIMARY" [infoText]="'Inserire un importo'">
<nbp-input-text id="input-text-primary-3" [name]="'importoPrimary'" [(ngModel)]="importoprovaR"
nbpInputType=nbpImporto [nbpFormat]="currency" [nbpShowValidation]="true" [placeholder]="'placeholder'"
[nbpErrorMessage]="errorMessageInput" [nbpRoundBorder]="false" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpIcon]="'ispv2-font-euro-sign'" [accessibleTextForIcon]="'euro'" [label]="labelInput4">
</nbp-input-text>
</nbp-input-container>
</div>
<p class="new-part">Calendar generic (nbp-input-container + nbp-calendar-generic)</p>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-calendar-generic [id]="'calendarDefault'" [name]="'calendarDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT" [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
[(ngModel)]="calendarModel">
</nbp-calendar-generic>
</nbp-input-container>
</div>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
</nbp-calendar-generic>
</nbp-input-container>
</div>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" [disabled]="true"
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
</nbp-calendar-generic>
</nbp-input-container>
</div>
<p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
</nbp-combo>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true" [disabled]="true">
</nbp-combo>
</nbp-input-container>
</div>
<p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-combo-filter [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
</nbp-combo-filter>
</nbp-input-container>
</div>
<p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
<div>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
<nbp-combo-multi [id]="'comboMultiIndent'" [name]="'comboMultiIndent'" [nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="datasource" [(ngModel)]="selectedValues" [dropdownVisible]="comboMultiVisible">
</nbp-combo-multi>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
<nbp-combo-multi [id]="'combomultiDefault'" [name]="'combomultiDefault'" [nbpStyle]="_nbpStyle.PRIMARY"
[nbpDataSource]="datasource" [(ngModel)]="selectedValues">
</nbp-combo-multi>
</nbp-input-container>
</div>
<p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
<div>
<nbp-input-container [nbpLabel]="'Textarea stile default'" [nbpStyle]="_nbpStyle.DEFAULT">
<nbp-textarea [name]="'default-a'" [(ngModel)]="contenutoEmpty" [required]="required"
[placeholder]="'placeholder'" [maxlength]="lunghezzamax" [minlength]="lunghezzamin"
[nbpStyle]="_nbpStyle.DEFAULT"></nbp-textarea>
</nbp-input-container>
</div>
<p class="new-part">Card (nbp-card)</p>
<div style="width: 250px">
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
[templateRef]="template4">
</nbp-card>
<ng-template #template4>
<div class="row">
<div class="col gap-1">
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
</nbp-button>
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
</nbp-button>
</div>
</div>
</ng-template>
</div>
<p class="new-part">Table (nbp-table)</p>
<div>
<nbp-table [scrollBar]="'auto'" ariaLabel="table" [nbpId]="'defTable1'" [nbpOptions]="tableOptions"
[nbpDataSource]="tableDs" [nbpAutoBind]="true" [nbpSelectionType]="tableSelectionType"
[nbpLayoutAuto]="true">
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField'
[nbpVisible]='true'>
</nbp-table-column>
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
[nbpSortable]="true" [nbpVisible]='true'>
</nbp-table-column>
</nbp-table>
</div>
<p class="new-part">Tree-table</p>
<div>
<!-- [paginationOptions]="table2PageConfig" -->
<isp-turbo-table [columns]="table2Columns" [datasource]="table2Data" [hasAccordionRows]="true"
[rowExpander]="table2RowExpander" tableMinWidth='35rem' ariaLabel="table with children"></isp-turbo-table>
</div>
<p class="new-part">Checkbox-table</p>
<nbp-table [scrollBar]="'auto'" [nbpId]="'defTable'" [nbpOptions]="simpleOptions"
[nbpDataSource]="campiStandardData" ariaLabel="multi selection table" [nbpAutoBind]="true"
[nbpSelectionType]="multi">
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField'
[nbpSortable]='true' [nbpVisible]='true'>
</nbp-table-column>
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
[nbpSortable]='true' [nbpVisible]='true'>
</nbp-table-column>
</nbp-table>
</div>

@ -0,0 +1,23 @@
@import "../../../assets/xdce-module-widget-fideuram/styles/_mixins";
.new-part,
h3 {
margin-top: 3rem;
font-weight: bold;
font-size: 14px;
color: #444;
padding: .1rem 0;
border-bottom: 1px solid #c00;
margin-bottom: .7rem;
&.first {
margin-top: 0;
}
}
.gap-1 {
gap: 1rem;
}
@include nbp-combo-multi-nth-child-indent("comboMultiIndent", 3);
@include nbp-combo-multi-nth-child-indent("comboMultiIndent", 4);

@ -0,0 +1,240 @@
import { Component, Injector } from '@angular/core';
import {
ColumnSettings, INbpTableOptions,
isRowModel, ITabItem, NbpBaseComponent,
NbpCalendarPattern, NbpCalendarPosition, NbpComboMultiComponent,
NbpDataSource, NbpStyle, NbpTableSelectionType, NgbDateStruct,
RowAction, RowDataExpander, RowModel,
NbpComboComponent
} from '@isp/xdce-widget';
@Component({
selector: 'showcase1',
templateUrl: './showcase1.component.html',
styleUrls: ['./showcase1.component.scss']
})
export class Showcase1Component extends NbpBaseComponent {
public _nbpStyle = NbpStyle;
//
// TABBAR
items: Array<ITabItem<void>> = [
{ icon: '', title: 'Calls', content: 'Calls' },
{ icon: '', title: 'Messages', content: 'Messages' }
];
currentSelectedIndex: number = 0;
longText: string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta enim sapien. Etiam interdum ullamcorper ullamcorper. Ut malesuada orci ac sapien tempor dignissim. Phasellus congue libero sit amet ex euismod pulvinar. Duis dolor tellus, convallis id odio vitae, iaculis feugiat lectus. Integer tempor ex ac justo dictum, at vehicula dui malesuada. Praesent eu turpis eros. Aliquam vel metus ac tellus eleifend iaculis. Nam venenatis eget sapien eget euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sagittis fermentum scelerisque. Sed luctus ut mi et molestie. Nullam ultricies, nisl aliquam rhoncus cursus, magna libero accumsan neque, id bibendum lorem mauris vitae libero. Proin sodales felis placerat mi venenatis gravida. Nam eu metus velit. Morbi in sapien ut urna vulputate sollicitudin. Nulla dictum eleifend enim, at hendrerit velit feugiat ac. Cras gravida a augue ut fermentum. Integer sagittis velit ut viverra scelerisque. Pellentesque sed magna at lectus interdum vehicula id vitae diam. Integer sed placerat nisi, non maximus eros. ";
//
//
// INPUT TEXT
errorMessageInput: string = 'Il campo da inserire non è valido';
labelInput4: string = 'Importo';
currency: string = 'currency';
importoprovaR: string;
//
// CALENDAR GENERIC
_nbpCalendarPosition = NbpCalendarPosition;
_nbpCalendarPattern = NbpCalendarPattern;
calendarModel: NgbDateStruct = null;
startDate: NgbDateStruct = { year: 2023, month: 3, day: 15 };
endDate: NgbDateStruct = { year: 2023, month: 8, day: 15 };
//
//
// COMBO
comboValues = [
"First item",
"Second item",
"Third item",
"Fourth item",
"Fifth item",
"Sixth item"
];
comboDatasource = new NbpDataSource<string>(this.comboValues);
comboSelectedValue = null;
//
values = [
"First item",
"Second item",
"Third item",
"Fourth item",
"Fifth item",
"Sixth item"
];
comboMultiVisible = true;
datasource = new NbpDataSource<string>(this.values);
selectedValues: Array<string> = [];
//
// TEXTAREA
lunghezzamax = 30;
lunghezzamin = 10;
required = 'required';
contenutoEmpty = 'contenutoEmpty';
//
// CARD
cardTitle = 'Lorem ipsum ';
cardSubtitle = 'Lorem ipsum dolor sit amet';
cardDescr = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
'Pellentesque facilisis quam in odio tincidunt bibendum vel vitae leo. ' +
'Sed est risus, semper eu egestas sed, vulputate luctus neque. ' +
'Pellentesque facilisis quam in odio tincidunt bibendum vel vitae leo. ' +
'Sed est risus, semper eu egestas sed, vulputate luctus neque. Praesent vestibulum tinciodation.';
//
//
// TABLE data
tableSelectionType: NbpTableSelectionType = NbpTableSelectionType.NONE;
tableOptions: INbpTableOptions = { sortable: true };
tableRows = [ //
{ 'headerField': "", 'headerField2': "test" },
{ 'headerField': "test1", 'headerField2': "test1" },
{ 'headerField': "test2", 'headerField2': "test2" },
{ 'headerField': "test3", 'headerField2': "test3" },
{ 'headerField': "test4", 'headerField2': "test4" },
{ 'headerField': "test5", 'headerField2': "test5" },
{ 'headerField': "test6", 'headerField2': "test6" },
{ 'headerField': "test7", 'headerField2': "test7" },
{ 'headerField': "test8", 'headerField2': "test8" } //
];
tableDs: NbpDataSource<any> = new NbpDataSource<any>(this.tableRows);
//
//
table2Columns : Array<ColumnSettings> = [
{ field: 'brand', header: 'Brand', width: '25%', sortable: true },
{ field: 'year', header: 'Year', width: '25%', sortable: true },
{ field: 'color', header: 'Color', width: '25%', sortable: true },
{ field: 'vin', header: 'VIN', width: '25%', sortable: true },
];
table2Rows = [
[
{
id: '0', brand: "Citroën", year: 2012,
color: "Sono il colore molto lungo Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat", vin: "dsad231ff",
child: [
{
id: '00', brand: "00 aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla", year: 2012,
color: "Sono il colore molto lungo Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat",
vin: "dsad231ff"
},
{ id: '01', brand: "01", year: 2012, color: "Orange", vin: "dsad231ff"},
{id: '01', brand: "01", year: 2012, color: "Orange", vin: "dsad231ff", child: [
{id: '010', brand: "010", year: 2012, color: "Orange", vin: "dsad231ff", status: {checked: false, disabled: false, hideCheckbox: false}},
{id: '011', brand: "011", year: 2012, color: "Orange", vin: "dsad231ff"},
{id: '012', brand: "012", year: 2012, color: "Orange", vin: "dsad231ff"}
]}
]
},
{
id: '1', brand: "Audi", year: 2011, color: "Black", vin: "gwregre345", child: [
{ id: '10', brand: "10", year: 2012, color: "Orange", vin: "dsad231ff" },
{ id: '11', brand: "11", year: 2012, color: "Orange", vin: "dsad231ff" },
{ id: '12', brand: "12", year: 2012, color: "Orange", vin: "dsad231ff" }
]
},
{ id: '13', brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
{ id: '14', brand: "BMW", year: 2003, color: "Blue", vin: "j6w54qgh" },
{ id: '15', brand: "Mercedes", year: 1995, color: "Orange", vin: "hrtwy34" }
],
[
{ id: '10', brand: "Cadillac", year: 2012, color: "Orange", vin: "dsad231ff" },
{ id: '11', brand: "Chery", year: 2011, color: "Black", vin: "gwregre345" },
{ id: '12', brand: "Chevrolet", year: 2005, color: "Gray", vin: "h354htr" },
{ id: '13', brand: "Chrysler", year: 2003, color: "Blue", vin: "j6w54qgh" }
],
[
{ id: '20', brand: "Maybach", year: 2012, color: "Orange", vin: "dsad231ff" },
{ id: '21', brand: "Maybach", year: 2011, color: "Black", vin: "gwregre345" },
{ id: '22', brand: "Maserati", year: 2005, color: "Gray", vin: "h354htr" },
{ id: '23', brand: "Pagani", year: 2003, color: "Blue", vin: "j6w54qgh" },
{ id: '24', brand: "Opel", year: 1995, color: "Orange", vin: "hrtwy34" }
]
];
table2Data: NbpDataSource<any> = new NbpDataSource<any>();
table2RowExpander = new RowExpanderTreeExpandedTest();
//
//
// TABLE 3
multi: NbpTableSelectionType = NbpTableSelectionType.MULTI;
simpleOptions: INbpTableOptions = { sortable: true };
oggetti = [{ 'headerField': "", 'headerField2': "test" },
{ 'headerField': "test1", 'headerField2': "test1" },
{ 'headerField': "test2", 'headerField2': "test2" },
{ 'headerField': "test3", 'headerField2': "test3" },
{ 'headerField': "test4", 'headerField2': "test4" }];
campiStandardData: NbpDataSource<any>;
//
constructor(injector: Injector) {
super(injector);
// table2
this.setDataRowExpander(this.table2Rows[0], 0);
this.campiStandardData = new NbpDataSource<any>(this.oggetti);
}
setDataRowExpander(array: Array<any>, pageNumber?: number, sortField?: string[], pageSize?: number): void {
array = array.map(convertPageToRowModel);
this.table2Data.setData(array, pageNumber, sortField, pageSize);
}
}
export class RowExpanderTreeExpandedTest implements RowDataExpander {
startExpanded = false;
getChild(data: RowModel): RowModel[] {
NbpComboMultiComponent
return data.body.child ? (<RowModel[]>data.body.child)
: null
}
}
export function convertPageToRowModel(body: any): RowModel {
let actionRow: RowAction[] = [
{
actionName: 'delete',
icon: '',
label: 'DELETE'
},
{
actionName: 'edit',
icon: '',
label: 'EDIT'
},
{
actionName: 'download',
icon: '',
label: 'DOWNLOAD'
}
]
if (isRowModel(body)) {
return body;
}
if (body && body.child && body.child.length) {
body.child = body.child.map(convertPageToRowModel)
}
let checked = !!body.status && body.status.checked;
let disabled = !!body.status && body.status.disabled;
let hideCheckbox = !!body.status && body.status.hideCheckbox;
let highlight = !!body.status && body.status.highlight;
let customHighlight = !!body.status && body.status.customHighlight;
let highlightText = !!body.status && body.status.highlightText;
let data = { ...body };
delete data.status;
return new RowModel(body.id, data, checked, disabled, hideCheckbox, null, actionRow, highlight, customHighlight, highlightText);
}

@ -0,0 +1,194 @@
<h1>Widget Fideuram Showcase</h1>
<h3>Spinner (using data-message setted from setSpinnerMessage method)</h3>
<div class="widget-fideuram">
<isp-spinner #testCssMessage name="testCssMessage" isp-spinner-animation [id]="'testCssMessage'"
[spinnerId]="'testCssMessage'" [fixed]="false" [spinnerDiameter]="'90'" [zIndex]="999" [show]="true">
</isp-spinner>
</div>
<h3>Spinner (with message prop)</h3>
<div class="widget-fideuram">
<isp-spinner #testPropMessage name="testPropMessage" isp-spinner-animation [id]="'testPropMessage'"
[spinnerId]="'testPropMessage'" [message]="'Caricamento dati ...'" [fixed]="false" [spinnerDiameter]="'90'"
[zIndex]="999" [show]="true">
</isp-spinner>
</div>
<div class="showcase-container widget-fideuram combo-container-showcase">
<h3>Combo (nbp-fid-combo) <sup>NEW</sup></h3>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Combo NEW'">
<nbp-fid-combo
[id]="'combo1'"
[name]="'combo1'"
[nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="combo1DataSource"
[(ngModel)]="combo1Value"
[nbpKeyField]="'value'"
[nbpViewField]="'label'"
[nbpShowEmptyValue]="true"
></nbp-fid-combo>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Combo NEW (required)'">
<nbp-fid-combo
[id]="'combo1req'"
[name]="'combo1req'"
[nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="combo1DataSource"
[nbpKeyField]="'value'"
[nbpViewField]="'label'"
[(ngModel)]="combo1Value"
[nbpShowEmptyValue]="false"
></nbp-fid-combo>
</nbp-input-container>
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Combo NEW (disabled)'">
<nbp-fid-combo
[id]="'combo1req'"
[name]="'combo1req'"
[nbpStyle]="_nbpStyle.DEFAULT"
[nbpDataSource]="combo1DataSource"
[nbpKeyField]="'value'"
[nbpViewField]="'label'"
[(ngModel)]="combo1Value"
[disabled]="true"
></nbp-fid-combo>
</nbp-input-container>
</div>
<div class="showcase-container">
<div class="showcase-container-left">
<showcase></showcase>
<showcase1></showcase1>
</div>
<div class="showcase-container-right widget-fideuram">
<showcase></showcase>
<showcase1></showcase1>
</div>
</div>
<div>
<h2>Components</h2>
<h3>Donut Chart</h3>
<div>
<div class="row">
<div class="col-12">
<nbp-fid-donut-chart></nbp-fid-donut-chart>
</div>
<div class="col-12">
<nbp-fid-donut-chart [config]="donutConfig" [data]="donutData"></nbp-fid-donut-chart>
</div>
</div>
</div>
<h3>Bar Chart</h3>
<div>
<div class="row">
<div class="col-12">
<nbp-fid-bar-chart></nbp-fid-bar-chart>
</div>
<div class="col-12">
<nbp-fid-bar-chart [config]="barConfig" [data]="barData"></nbp-fid-bar-chart>
</div>
</div>
</div>
<h3>Piramyd Chart</h3>
<div>
<div class="row">
<div class="col-12">
<nbp-fid-pyramid-chart></nbp-fid-pyramid-chart>
</div>
</div>
</div>
<h3>SidePopup</h3>
<div>
<!-- Esempio 1: Popup semplice con bottoni -->
<nbp-button nbpLabel="Apri Popup Base" [nbpStyle]="NbpStyle.PRIMARY" (nbpClick)="showBasicPopup = true">
</nbp-button>
<nbp-fid-side-popup [(isOpen)]="showBasicPopup" [nbpTitle]="'Esempio Base'" [nbpSize]="NbpSize.MD"
[nbpStyle]="NbpStyle.PRIMARY" [nbpButtons]="basicButtons" (nbpOnButtonClick)="onBasicButtonClick($event)">
<div class="popup-content">
<p>Questo è un esempio di popup base con due bottoni.</p>
<p>Il contenuto può essere qualsiasi elemento HTML.</p>
</div>
</nbp-fid-side-popup>
<!-- Esempio 2: Popup con form -->
<nbp-button nbpLabel="Apri Form Popup" [nbpStyle]="NbpStyle.SECONDARY" (nbpClick)="showFormPopup = true">
</nbp-button>
<nbp-fid-side-popup [(isOpen)]="showFormPopup" [nbpTitle]="'Form Example'" [nbpSize]="NbpSize.LG"
[nbpStyle]="NbpStyle.SECONDARY" [nbpButtons]="formButtons">
<div class="popup-content">
<form #myForm="ngForm">
<nbp-input-text [(ngModel)]="formData.name" name="name" nbpLabel="Nome" required>
</nbp-input-text>
<nbp-input-text [(ngModel)]="formData.email" name="email" nbpLabel="Email" required>
</nbp-input-text>
<nbp-textarea [(ngModel)]="formData.message" name="message" nbpLabel="Messaggio">
</nbp-textarea>
</form>
</div>
</nbp-fid-side-popup>
<!-- Esempio 3: Popup piccolo con solo icona di chiusura -->
<nbp-button nbpLabel="Chiudi" [nbpStyle]="NbpStyle.PRIMARY" (nbpClick)="showInfoPopup = true">
</nbp-button>
<nbp-fid-side-popup [(isOpen)]="showInfoPopup" [nbpTitle]="'Informazioni'" [nbpSize]="NbpSize.SM"
[nbpStyle]="NbpStyle.DEFAULT">
<div class="popup-content">
<p>Questo è un popup informativo semplice.</p>
<p>Non ha bottoni nel footer, solo l'icona di chiusura.</p>
</div>
</nbp-fid-side-popup>
<h3>Font Awesome Icon</h3>
<div>
<i class="fa fa-leaf fa-fw"></i>
</div>
</div>
<h3>Table</h3>
<div>
<nbp-fid-table #agGrid style="display: block; width: 100%; height: 500px;" id="myGrid" class="ag-theme-balham"
[modules]="modules" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowData]="rowData"
[multiSortKey]="multiSortKey"></nbp-fid-table>
</div>
<h3>Fideuram Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-fid-toggle-tabset)</h3>
<div class="nbp-tab-bar-title widget-fideuram">
<div class="tab-bar-title">Title:</div>
<nbp-fid-toggle-tabset>
<nbp-fid-toggle-tab disabled="true" title="Scheda 0">
<h3>Scheda 0 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-fid-toggle-tab>
<nbp-fid-toggle-tab [tabTemplate]="tabTemplate" active="true" title="Scheda 1">
<h3>Scheda 1 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-fid-toggle-tab>
<nbp-fid-toggle-tab title="Scheda 2">
<h3>Scheda 2 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-fid-toggle-tab>
<nbp-fid-toggle-tab title="Scheda 3">
<h3>Scheda 3 - Selezionata</h3>
<span>{{ longText }}</span>
</nbp-fid-toggle-tab>
</nbp-fid-toggle-tabset>
<ng-template #tabTemplate>
Tab Template
<nbp-tooltip [name]="'tooltipWithIconInTab'" [nbpStyle]="NbpStyle.DEFAULT"
[nbpVisibilityStrategy]="'hover'" [nbpAlign]="NbpStyle.LEFT" [nbpText]="'Sono un tooltip'">
<span class="fa fa-info-circle primary-color-100"></span>
</nbp-tooltip>
</ng-template>
</div>
</div>

@ -0,0 +1,59 @@
@import "../../../assets/xdce-module-widget-fideuram/styles/_mixins";
.showcase-container {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
h3 {
margin-top: 3rem;
font-weight: bold;
font-size: 14px;
color: #444;
padding: .1rem 0;
border-bottom: 1px solid #c00;
margin-bottom: .7rem;
width: 100%;
flex-grow: 1;
}
}
.combo-container-showcase {
display: flex;
gap: 1rem;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
& > * {
flex-grow: .25;
}
}
.showcase-container-left {
flex-grow: 1;
}
.showcase-container-right {
flex-grow: 1;
.isp-corporate-mode-wrapper .dropdown-list > .dropdown-list-item:nth-child(3){
padding-left: 15px;
border-top: unset;
font-weight: normal;
}
}
.popup-content {
padding: 20px;
}
nbp-button {
margin-right: 10px;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,153 @@
/* eslint-disable */
// https://github.com/filipesilva/angular-quickstart-lib/blob/master/inline-resources.js
'use strict';
const fs = require('fs');
const path = require('path');
const glob = require('glob');
const sass = require('node-sass');
const tildeImporter = require('node-sass-tilde-importer');
/**
* Simple Promiseify function that takes a Node API and return a version that supports promises.
* We use promises instead of synchronized functions to make the process less I/O bound and
* faster. It also simplifies the code.
*/
function promiseify(fn) {
return function () {
const args = [].slice.call(arguments, 0);
return new Promise((resolve, reject) => {
fn.apply(this, args.concat([function (err, value) {
if (err) {
reject(err);
} else {
resolve(value);
}
}]));
});
};
}
const readFile = promiseify(fs.readFile);
const writeFile = promiseify(fs.writeFile);
/**
* Inline resources in a tsc/ngc compilation.
* @param projectPath {string} Path to the project.
*/
function inlineResources(projectPath) {
// Match only TypeScript files in projectPath.
const files = glob.sync('**/*.ts', {cwd: projectPath});
// For each file, inline the templates and styles under it and write the new file.
return Promise.all(files.map(filePath => {
const fullFilePath = path.join(projectPath, filePath);
return readFile(fullFilePath, 'utf-8')
.then(content => inlineResourcesFromString(content, url => {
// Resolve the template url.
return path.join(path.dirname(fullFilePath), url);
}))
.then(content => writeFile(fullFilePath, content))
.catch(err => {
console.error('An error occured: ', err);
});
}));
}
/**
* Inline resources from a string content.
* @param content {string} The source file's content.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @returns {string} The content with resources inlined.
*/
function inlineResourcesFromString(content, urlResolver) {
// Curry through the inlining functions.
return [
inlineTemplate,
inlineStyle,
removeModuleId
].reduce((content, fn) => fn(content, urlResolver), content);
}
/**
* Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
* replace with `template: ...` (with the content of the file included).
* @param content {string} The source file's content.
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @return {string} The content with all templates inlined.
*/
function inlineTemplate(content, urlResolver) {
return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function (m, templateUrl) {
const templateFile = urlResolver(templateUrl);
const templateContent = fs.readFileSync(templateFile, 'utf-8');
return `template: \`${templateContent}\``;
});
}
/**
* Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
* replace with `styles: [...]` (with the content of the file included).
* @param urlResolver {Function} A resolver that takes a URL and return a path.
* @param content {string} The source file's content.
* @return {string} The content with all styles inlined.
*/
function inlineStyle(content, urlResolver) {
return content.replace(/styleUrls\s*:\s*(\[[\s\S]*?\])/gm, function (m, styleUrls) {
const urls = eval(styleUrls);
return 'styles: ['
+ urls.map(styleUrl => {
const styleFile = urlResolver(styleUrl);
const originContent = fs.readFileSync(styleFile, 'utf-8');
const styleContent = styleFile.endsWith('.scss') ? buildSass(originContent, styleFile) : originContent;
const shortenedStyle = styleContent
.replace(/([\n\r]\s*)+/gm, ' ')
.replace(/"/g, '\\"');
return `"${shortenedStyle}"`;
})
.join(',\n')
+ ']';
});
}
/**
* build sass content to css
* @param content {string} the css content
* @param sourceFile {string} the scss file sourceFile
* @return {string} the generated css, empty string if error occured
*/
function buildSass(content, sourceFile) {
try {
const result = sass.renderSync({
data: content,
file: sourceFile,
importer: tildeImporter
});
return result.css.toString()
} catch (e) {
console.error('\x1b[41m');
console.error('at ' + sourceFile + ':' + e.line + ":" + e.column);
console.error(e.formatted);
console.error('\x1b[0m');
return "";
}
}
/**
* Remove every mention of `moduleId: module.id`.
* @param content {string} The source file's content.
* @returns {string} The content with all moduleId: mentions removed.
*/
function removeModuleId(content) {
return content.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
}
module.exports = inlineResources;
module.exports.inlineResourcesFromString = inlineResourcesFromString;
// Run inlineResources if module is being called directly from the CLI with arguments.
if (require.main === module && process.argv.length > 2) {
console.log('Inlining resources from project:', process.argv[2]);
return inlineResources(process.argv[2]);
}

16
tsconfig.json Normal file

@ -0,0 +1,16 @@
{
"compilerOptions": {
"baseUrl": "./src",
"experimentalDecorators": true,
"moduleResolution": "node",
"rootDir": "./src",
"lib": [
"es2017",
"dom"
],
"skipLibCheck": true,
"types": [],
"target": "es5",
"sourceMap": true
}
}

104
tslint.json Normal file

@ -0,0 +1,104 @@
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"label-position": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
"static-before-instance",
"variables-before-functions"
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-inferrable-types": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector": [true, "attribute", "", "camelCase"],
"component-selector": [true, "element", "", "kebab-case"],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}