first commit

.angular.json

@@ -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"
+    }
+  }
+}

.gitignore

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

changefile.yml

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

local-gulpfile.js

@@ -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));
+  }
+});

package.json

@@ -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"
+  }
+}

readme.md

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

sonar-project.properties

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

src/assets/xdce-module-widget-fideuram/apicatalog/widget-fideuram/api.json

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

src/assets/xdce-module-widget-fideuram/env/dev/apicatalog/widget-fideuram/api.json

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

src/assets/xdce-module-widget-fideuram/env/svil/apicatalog/widget-fideuram/api.json

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

src/assets/xdce-module-widget-fideuram/env/test/apicatalog/widget-fideuram/api.json

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

src/assets/xdce-module-widget-fideuram/i18n/widget-fideuram_en.json

@@ -0,0 +1,3 @@
+{
+
+}

src/assets/xdce-module-widget-fideuram/i18n/widget-fideuram_it-IT.json

@@ -0,0 +1,3 @@
+{
+
+}

src/assets/xdce-module-widget-fideuram/profilation/moduleAuths/widget-fideuram.json

@@ -0,0 +1,5 @@
+{
+    "auths":[
+        
+    ]
+}

src/assets/xdce-module-widget-fideuram/styles/_fonts.scss

@@ -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;
+}

src/assets/xdce-module-widget-fideuram/styles/_mixins.scss

@@ -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;
+        }
+    }
+}

src/assets/xdce-module-widget-fideuram/styles/_widget-fideuram_ui.styles.scss

@@ -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);
+    }
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_animated.scss

@@ -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);
+  }
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_bordered-pulled.scss

@@ -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; }
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_core.scss

@@ -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;
+
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_fixed-width.scss

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

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_icons.scss

@@ -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; }

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_larger.scss

@@ -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; }

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_list.scss

@@ -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);
+  }
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_mixins.scss

@@ -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;
+  }
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_path.scss

@@ -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;
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_rotated-flipped.scss

@@ -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;
+}

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_screen-reader.scss

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

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_stacked.scss

@@ -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; }

src/assets/xdce-module-widget-fideuram/styles/font-awesome/_variables.scss

@@ -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";
+

src/assets/xdce-module-widget-fideuram/styles/font-awesome/font-awesome.scss

@@ -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";

src/index.ts

@@ -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: []
+    };
+  }
+}

src/package.json

@@ -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"
+  }
+}

src/tsconfig.es5.json

@@ -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"
+  ]
+}

src/tsconfig.spec.json

@@ -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"
+  ]
+}

src/widgetfideuram/Utils.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');
+}

src/widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component.html

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

src/widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component.ts

@@ -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()
+    }
+}

src/widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component.html

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

src/widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component.scss

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

src/widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component.ts

@@ -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();
+    }
+}

src/widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component.html

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

src/widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component.scss

@@ -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;
+                }
+            }
+        }
+    }
+    
+}

src/widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component.ts

@@ -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;
+    }
+}

src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.html

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

src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.scss

@@ -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);
+    }
+}

src/widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component.ts

@@ -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);
+    }
+}

src/widgetfideuram/components/nbp-fid-donut-chart/nbp-fid-donut-chart.component.html

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

src/widgetfideuram/components/nbp-fid-donut-chart/nbp-fid-donut-chart.component.ts

@@ -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();
+    }
+}

src/widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component.html

@@ -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>
+  
+  

src/widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component.scss

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

src/widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component.ts

@@ -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%)`;
+        }
+    }
+}

src/widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component.html

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

src/widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component.scss

@@ -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);
+}

src/widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component.ts

@@ -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);
+    }
+  }
+}

src/widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.interfaces.ts

@@ -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[];
+}

src/widgetfideuram/components/nbp-fid-table/nbp-fid-table.component.scss

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

src/widgetfideuram/components/nbp-fid-table/nbp-fid-table.component.ts

@@ -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 {
+
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-tab-toggle.component.a11y.scss

@@ -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;
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-tab-toggle.component.noa11y.scss

@@ -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;
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.a11y.ts

@@ -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);
+  }
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.noa11y.ts

@@ -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);
+  }
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.ts

@@ -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;
+    }
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.a11y.html

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

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.a11y.ts

@@ -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;
+    }
+  }
+}

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.noa11y.html

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

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.noa11y.ts

@@ -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;
+  }
+
+}
+
+

src/widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.ts

@@ -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>();
+}
+

src/widgetfideuram/components/showcase/showcase.component.html

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

src/widgetfideuram/components/showcase/showcase.component.scss

@@ -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;
+  }
+}

src/widgetfideuram/components/showcase/showcase.component.ts

@@ -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
+        }
+    ];
+}

src/widgetfideuram/components/showcase/showcase1.component.html

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

src/widgetfideuram/components/showcase/showcase1.component.scss

@@ -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);

src/widgetfideuram/components/showcase/showcase1.component.ts

@@ -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);
+}

src/widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component.html

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

src/widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component.scss

@@ -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;
+}
+

tools/gulp/inline-resources.js

@@ -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]);
+}

tsconfig.json

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

tslint.json

@@ -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
+  }
+}