first commit
This commit is contained in:
commit
a6d4083e16
28
.angular.json
Normal file
28
.angular.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"xdce-module-widget-fideuram-v1": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "xdce-module-widget-fideuram-v1",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
},
|
||||
"xdce-schematics:xdce-ispbase-component": {
|
||||
"moduleName": "xdce-module-widget-fideuram-v1"
|
||||
}
|
||||
}
|
||||
}
|
||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
|
||||
.tmp
|
||||
build
|
||||
docs
|
||||
target
|
||||
24
changefile.yml
Normal file
24
changefile.yml
Normal file
@ -0,0 +1,24 @@
|
||||
config:
|
||||
node: "prod && linux"
|
||||
|
||||
build:
|
||||
type: "npm_xdce"
|
||||
skiptest: true
|
||||
loglevel: "info" # available: info, debug, error
|
||||
node_version: "10.24.1"
|
||||
|
||||
deployment:
|
||||
openshift:
|
||||
active: false
|
||||
docker:
|
||||
active: false
|
||||
|
||||
notification:
|
||||
email: "fid.application.cm@fideuram.it" # available: indirizzo email
|
||||
when: failure # available: always|success|failure
|
||||
|
||||
quality:
|
||||
sonar:
|
||||
active: true
|
||||
unittest:
|
||||
active: false
|
||||
BIN
fid_git.zip
Normal file
BIN
fid_git.zip
Normal file
Binary file not shown.
58
local-gulpfile.js
Normal file
58
local-gulpfile.js
Normal file
@ -0,0 +1,58 @@
|
||||
var gulp = require('gulp');
|
||||
var path = require('path');
|
||||
var fileSystem = require('fs');
|
||||
var sass = require('gulp-sass');
|
||||
|
||||
/**
|
||||
* task that compiles scss files under target/assets/styles/ and writes only styles.css (the only file that should be published).
|
||||
* All other scss files are deleted from target/assets/styles/.
|
||||
*/
|
||||
gulp.task(
|
||||
"custom:after-assets-copy",
|
||||
() => {
|
||||
var styleDest = path.join(configuration.distAssetsFolder, configuration.packageName, "styles");
|
||||
return gulp.src([`${styleDest}/*.scss`, `^${styleDest}/_*.scss`])
|
||||
.pipe(sass({
|
||||
outputStyle: 'compressed',
|
||||
includePaths: [`${styleDest}/"`]
|
||||
}))
|
||||
.pipe(gulp.dest(styleDest))
|
||||
.on('end', function () {
|
||||
return fileSystem.readdirSync(styleDest).forEach((file) => {
|
||||
var curPath = path.join(styleDest, file);
|
||||
if (fileSystem.lstatSync(curPath).isDirectory()) {
|
||||
emptyFolder(curPath);
|
||||
fileSystem.rmdirSync(curPath);
|
||||
} else if (file.endsWith(".scss")){
|
||||
fileSystem.unlinkSync(curPath);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
function emptyFolder(directoryPath) {
|
||||
if (fileSystem.existsSync(directoryPath)) {
|
||||
fileSystem.readdirSync(directoryPath).forEach(function (file) {
|
||||
var curPath = path.join(directoryPath, file);
|
||||
if (fileSystem.lstatSync(curPath).isDirectory()) {
|
||||
emptyFolder(curPath);
|
||||
fileSystem.rmdirSync(curPath);
|
||||
} else {
|
||||
fileSystem.unlinkSync(curPath);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
gulp.task('custom:after-all', function (){
|
||||
var mainTask = process.argv.slice(2)[0];
|
||||
if (mainTask === 'build:watch_local') {
|
||||
var dest = path.join(process.cwd(), '..', 'pdca0-deploy-arch', 'node_modules', '@isp', 'xdce-module-widget-fideuram-v1');
|
||||
if (fileSystem.existsSync(dest)){
|
||||
emptyFolder(dest);
|
||||
}
|
||||
return gulp.src(`${configuration.distFolder}/**`)
|
||||
.pipe(gulp.dest(dest));
|
||||
}
|
||||
});
|
||||
19176
package-lock.json
generated
Normal file
19176
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
100
package.json
Normal file
100
package.json
Normal file
@ -0,0 +1,100 @@
|
||||
{
|
||||
"name": "@isp/xdce-module-widget-fideuram-v1",
|
||||
"version": "0.1.0-snapshot.0",
|
||||
"scripts": {
|
||||
"git:push": "git push",
|
||||
"release:major": "standard-version --skip.commit true --skip.tag true -r major && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -r major",
|
||||
"release:minor": "standard-version --skip.commit true --skip.tag true -r minor && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -r minor",
|
||||
"release:patch": "standard-version --skip.commit true --skip.tag true -r patch && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -r patch",
|
||||
"release:alpha": "standard-version --skip.commit true --skip.tag true -p alpha && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -p alpha",
|
||||
"release:rc": "standard-version --skip.commit true --skip.tag true -p rc && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -p rc",
|
||||
"release:beta": "standard-version --skip.commit true --skip.tag true -p beta && git add package.json package-lock.json CHANGELOG.md && cd src && standard-version --commit-all --skip.tag true -p beta",
|
||||
"build:dev": "gulp build:local --verbose --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
|
||||
"build": "gulp build --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
|
||||
"build:watch": "gulp --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
|
||||
"build:watch_local": "gulp build:watch_local --cwd . --gulpfile ./node_modules/@isp/xdce-build-utils/gulpfile.js",
|
||||
"docs": "npm run docs:build",
|
||||
"docs:build": "compodoc -p tsconfig.json -n xdce-module-tutorial -d docs --hideGenerator",
|
||||
"docs:serve": "npm run docs:build -- -s",
|
||||
"docs:watch": "npm run docs:build -- -s -w",
|
||||
"lint": "tslint --type-check --project tsconfig.json src/**/*.ts",
|
||||
"lite": "lite-server",
|
||||
"playground:build": "tsc -p playground -w",
|
||||
"playground": "concurrently \"npm run build:watch\" \"npm run playground:build\" \"npm run lite\"",
|
||||
"test": "tsc && karma start"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "isp.com"
|
||||
},
|
||||
"author": {
|
||||
"name": "xdce-schematics",
|
||||
"email": "xdce-schematics@isp.com"
|
||||
},
|
||||
"keywords": [
|
||||
"angular"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "isp.com/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "7.1.0",
|
||||
"@angular/compiler": "7.1.0",
|
||||
"@angular/compiler-cli": "7.1.0",
|
||||
"@angular/core": "7.1.0",
|
||||
"@angular/forms": "7.1.0",
|
||||
"@angular/platform-browser": "7.1.0",
|
||||
"@angular/platform-browser-dynamic": "7.1.0",
|
||||
"@angular/router": "7.1.0",
|
||||
"@isp/xdce-arch-core": "1.50.30",
|
||||
"@isp/xdce-arch-core-base": "1.21.8",
|
||||
"@isp/xdce-widget": "1.125.2",
|
||||
"ag-grid-angular": "22.1.1",
|
||||
"ag-grid-community": "22.1.1",
|
||||
"@ag-grid-community/all-modules": "22.1.1",
|
||||
"d3": "^5.16.0",
|
||||
"zone.js": "0.8.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@compodoc/compodoc": "1.1.5",
|
||||
"@compodoc/gulp-compodoc": "0.0.8",
|
||||
"@ngx-translate/core": "11.0.1",
|
||||
"@types/jasmine": "2.8.6",
|
||||
"@types/jasminewd2": "2.0.3",
|
||||
"@types/node": "6.0.101",
|
||||
"codelyzer": "4.0.2",
|
||||
"gulp": "3.9.1",
|
||||
"gulp-concat": "2.6.1",
|
||||
"gulp-rename": "1.2.2",
|
||||
"gulp-rollup": "2.16.2",
|
||||
"gulp-sourcemaps": "2.6.4",
|
||||
"jasmine-core": "2.8.0",
|
||||
"jasmine-spec-reporter": "4.2.1",
|
||||
"karma": "2.0.0",
|
||||
"karma-chrome-launcher": "2.2.0",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "1.4.1",
|
||||
"karma-jasmine": "1.1.1",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"lite-server": "2.3.0",
|
||||
"node-sass": "4.9.0",
|
||||
"node-sass-tilde-importer": "1.0.1",
|
||||
"node-watch": "0.5.7",
|
||||
"protractor": "5.3.2",
|
||||
"rollup": "0.59.1",
|
||||
"rollup-plugin-sourcemaps": "0.4.2",
|
||||
"run-sequence": "1.2.2",
|
||||
"rxjs": "6.1.0",
|
||||
"rxjs-compat": "6.1.0",
|
||||
"systemjs": "0.20.19",
|
||||
"ts-node": "5.0.1",
|
||||
"tslint": "5.9.1",
|
||||
"tsickle": "0.34.0",
|
||||
"typescript": "3.1.6",
|
||||
"@isp/xdce-build-utils": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
}
|
||||
7
sonar-project.properties
Normal file
7
sonar-project.properties
Normal file
@ -0,0 +1,7 @@
|
||||
sonar.language=ts
|
||||
sonar.sources=src
|
||||
sonar.sourceEncoding=UTF-8
|
||||
sonar.exclusions=target/**,docs/**,**/*.spec.ts, **/jestGlobalMocks.ts, **/setupJest.ts
|
||||
sonar.typescript.lcov.reportPaths=coverage/lcov.info
|
||||
sonar.test =src
|
||||
sonar.test.inclusions=**/*.spec.ts
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"moduleDefaults": {
|
||||
|
||||
},
|
||||
"apis" : {
|
||||
|
||||
}
|
||||
}
|
||||
8
src/assets/xdce-module-widget-fideuram/env/dev/apicatalog/widget-fideuram/api.json
vendored
Normal file
8
src/assets/xdce-module-widget-fideuram/env/dev/apicatalog/widget-fideuram/api.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"moduleDefaults": {
|
||||
|
||||
},
|
||||
"apis" : {
|
||||
|
||||
}
|
||||
}
|
||||
8
src/assets/xdce-module-widget-fideuram/env/svil/apicatalog/widget-fideuram/api.json
vendored
Normal file
8
src/assets/xdce-module-widget-fideuram/env/svil/apicatalog/widget-fideuram/api.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"moduleDefaults": {
|
||||
|
||||
},
|
||||
"apis" : {
|
||||
|
||||
}
|
||||
}
|
||||
8
src/assets/xdce-module-widget-fideuram/env/test/apicatalog/widget-fideuram/api.json
vendored
Normal file
8
src/assets/xdce-module-widget-fideuram/env/test/apicatalog/widget-fideuram/api.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"moduleDefaults": {
|
||||
|
||||
},
|
||||
"apis" : {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
||||
0
src/assets/xdce-module-widget-fideuram/img/.empty
Normal file
0
src/assets/xdce-module-widget-fideuram/img/.empty
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"auths":[
|
||||
|
||||
]
|
||||
}
|
||||
19
src/assets/xdce-module-widget-fideuram/styles/_fonts.scss
Normal file
19
src/assets/xdce-module-widget-fideuram/styles/_fonts.scss
Normal file
@ -0,0 +1,19 @@
|
||||
// Open Sans Variable Font Declarations
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../webfonts/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype-variations');
|
||||
font-weight: 300 800; // Supports weight range from Light (300) to ExtraBold (800)
|
||||
font-stretch: 75% 100%; // Supports width variations from Condensed to Normal
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../webfonts/OpenSans-Italic-VariableFont_wdth\,wght.ttf') format('truetype-variations');
|
||||
font-weight: 300 800; // Supports weight range from Light (300) to ExtraBold (800)
|
||||
font-stretch: 75% 100%; // Supports width variations from Condensed to Normal
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@mixin nbp-combo-multi-nth-child-indent($id, $num) {
|
||||
::ng-deep .isp-corporate-mode-wrapper:has(#{"#" + $id}) .dropdown-list>.dropdown-list-item:nth-child(#{$num}) {
|
||||
padding-left: 15px !important;
|
||||
border-top: unset !important;
|
||||
.span-ellipsis {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,747 @@
|
||||
// @import url("../../../../../xdce-widget/partial_scss/lib/nbp/scss/_widget-ui.style.scss");
|
||||
|
||||
$btn-map: (
|
||||
primary-bg-color: map-get($orange-palette, 100),
|
||||
primary-border-color: map-get($orange-palette, 100),
|
||||
primary-color: map-get($white-palette, 100),
|
||||
primary-bg-color-h: map-get($orange-palette, 150),
|
||||
primary-border-color-h: map-get($orange-palette, 150),
|
||||
|
||||
secondary-bg-color: map-get($white-palette, 100),
|
||||
secondary-border-color: map-get($orange-palette, 100),
|
||||
secondary-color: map-get($orange-palette, 100),
|
||||
secondary-bg-color-h: map-get($gray-palette, 100),
|
||||
);
|
||||
|
||||
$checkbox-map: (
|
||||
checked-bg-color: map-get($gray-palette, 150),
|
||||
border-color: map-get($gray-palette, 150),
|
||||
unchecked-bg-color: map-get($white-palette, 100)
|
||||
);
|
||||
|
||||
@mixin isp-button-colors($name,
|
||||
$bg-color, $border-color, $color,
|
||||
$bg-color-h, $border-color-h, $color-h,
|
||||
$bg-color-a, $border-color-a, $color-a,
|
||||
$bg-color-o, $border-color-o, $color-o,
|
||||
$bg-color-oh, $border-color-oh, $color-oh,
|
||||
) {
|
||||
.isp-button#{if($name != "", ".isp-" + $name, "")} {
|
||||
background-color: $bg-color;
|
||||
border-color: $border-color;
|
||||
color: $color;
|
||||
|
||||
&.on,
|
||||
&:hover:not([disabled]):not(.touch) {
|
||||
background-color: $bg-color-h;
|
||||
border-color: $border-color-h;
|
||||
color: $color-h;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $bg-color-a;
|
||||
border-color: $border-color-a;
|
||||
color: $color-a;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.outline-style {
|
||||
background-color: $bg-color-o;
|
||||
border-color: $border-color-o;
|
||||
color: $color-o;
|
||||
|
||||
&.on,
|
||||
&:hover:not([disabled]):not(.touch) {
|
||||
background-color: $bg-color-oh;
|
||||
border-color: $border-color-oh;
|
||||
color: $color-oh;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: map-get($gray-palette, 25);
|
||||
}
|
||||
|
||||
#fideuram .widget-fideuram {
|
||||
*[class*="-mode-wrapper"] {
|
||||
@include isp-button-colors("primary",
|
||||
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
|
||||
map-get($btn-map, "primary-bg-color-h"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-color"),
|
||||
map-get($btn-map, "primary-bg-color-h"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-color"),
|
||||
map-get($btn-map, "primary-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-bg-color"),
|
||||
map-get($btn-map, "primary-color"), map-get($btn-map, "primary-border-color-h"), map-get($btn-map, "primary-bg-color-h"));
|
||||
|
||||
@include isp-button-colors("secondary",
|
||||
map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
|
||||
map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
|
||||
map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
|
||||
map-get($btn-map, "secondary-bg-color"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"),
|
||||
map-get($btn-map, "secondary-bg-color-h"), map-get($btn-map, "secondary-border-color"), map-get($btn-map, "secondary-color"), );
|
||||
}
|
||||
|
||||
nbp-button {
|
||||
@include isp-button-colors("",
|
||||
transparent, transparent, map-get($btn-map, "primary-border-color"),
|
||||
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
|
||||
transparent, transparent, map-get($btn-map, "primary-border-color"),
|
||||
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"),
|
||||
map-get($btn-map, "primary-bg-color"), map-get($btn-map, "primary-border-color"), map-get($btn-map, "primary-color"));
|
||||
}
|
||||
|
||||
nbp-fid-button-bar {
|
||||
.nbp-fid-button-bar>*:not(:last-child) {
|
||||
.isp-corporate-mode-wrapper {
|
||||
.isp-button {
|
||||
border-right-color: map-get($white-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-button .isp-corporate-mode-wrapper {
|
||||
@include isp-button-colors("",
|
||||
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
|
||||
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
|
||||
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
|
||||
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200),
|
||||
map-get($gray-palette, 75), map-get($gray-palette, 75), map-get($gray-palette, 200));
|
||||
}
|
||||
}
|
||||
|
||||
nbp-button-generation .isp-corporate-mode-wrapper {
|
||||
.isp-default {
|
||||
.button-container .button-icon {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
.button-label,
|
||||
.button-label-icon {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.isp-primary {
|
||||
.button-container .button-icon {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
|
||||
.button-label,
|
||||
.button-label-icon {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.isp-secondary {
|
||||
.button-container .button-icon {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
.button-label,
|
||||
.button-label-icon {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.button-container .button-icon {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
|
||||
.button-label,
|
||||
.button-label-icon {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-checkbox .isp-corporate-mode-wrapper {
|
||||
& .checked .isp-checkbox-input {
|
||||
background-color: map-get($blue-palette, 150) !important;
|
||||
border-color: map-get($blue-palette, 150) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($blue-palette, 200) !important;
|
||||
border-color: map-get($blue-palette, 200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .isp-primary.checked .isp-checkbox-input {
|
||||
background-color: map-get($blue-palette, 150) !important;
|
||||
border-color: map-get($blue-palette, 150) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($blue-palette, 200) !important;
|
||||
border-color: map-get($blue-palette, 200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: map-get($gray-palette, 150);
|
||||
}
|
||||
|
||||
.isp-checkbox-input {
|
||||
border-color: map-get($gray-palette, 150) !important;
|
||||
background-color: map-get($white-palette, 100);
|
||||
|
||||
.check-icon svg {
|
||||
fill: map-get($white-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-radio .isp-corporate-mode-wrapper {
|
||||
.radio-label {
|
||||
color: map-get($gray-palette, 150);
|
||||
}
|
||||
|
||||
& .checked .isp-radio-input {
|
||||
border-color: map-get($gray-palette, 150);
|
||||
|
||||
&:hover {
|
||||
border-color: map-get($gray-palette, 200);
|
||||
}
|
||||
}
|
||||
|
||||
& .isp-primary {
|
||||
.radio-label {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
|
||||
&.checked .isp-radio-input {
|
||||
border-color: map-get($blue-palette, 100);
|
||||
|
||||
.circle-icon {
|
||||
background-color: map-get($blue-palette, 100);
|
||||
|
||||
&:hover {
|
||||
border-color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked .radio-label {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.isp-radio-input {
|
||||
border-color: map-get($gray-palette, 150);
|
||||
background-color: map-get($white-palette, 100);
|
||||
|
||||
.circle-icon {
|
||||
background-color: map-get($gray-palette, 150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nbp-tab-bar-title {
|
||||
.tab-bar-title {
|
||||
color: map-get($gray-palette, 200);
|
||||
}
|
||||
}
|
||||
|
||||
nbp-modal .isp-corporate-mode-wrapper {
|
||||
.isp-modal-close {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
.isp-modal-container {
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
.nbp-modal-title {
|
||||
color: map-get($blue-palette, 100);
|
||||
|
||||
&:before {
|
||||
border-color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-tooltip .isp-corporate-mode-wrapper {
|
||||
|
||||
.tooltip-content,
|
||||
.popover-content {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
background-color: map-get($white-palette, 100);
|
||||
color: map-get($gray-palette, 150);
|
||||
|
||||
.tooltip-title {
|
||||
color: map-get($gray-palette, 150);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
&.top {
|
||||
border-bottom-color: map-get($gray-palette, 75);
|
||||
|
||||
&:after {
|
||||
border-top-color: map-get($gray-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-left-color: map-get($gray-palette, 75);
|
||||
|
||||
&:after {
|
||||
border-right-color: map-get($gray-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-top-color: map-get($gray-palette, 75);
|
||||
|
||||
&:after {
|
||||
border-bottom-color: map-get($gray-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-right-color: map-get($gray-palette, 75);
|
||||
|
||||
&:after {
|
||||
border-left-color: map-get($gray-palette, 75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isp-primary {
|
||||
|
||||
.tooltip-content,
|
||||
.popover-content {
|
||||
|
||||
&,
|
||||
&.top,
|
||||
&.right,
|
||||
&.bottom,
|
||||
&.left {
|
||||
border-color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
&.top:after {
|
||||
border-top-color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
&.right:after {
|
||||
border-right-color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
&.bottom:after {
|
||||
border-bottom-color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
&.left:after {
|
||||
border-left-color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-tab-bar .isp-corporate-mode-wrapper .isp-tab-bar {
|
||||
.tab-container {
|
||||
border-right-color: map-get($gray-palette, 75);
|
||||
|
||||
.tab-title {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
|
||||
&.selectedTab {
|
||||
.tab-title {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-card .isp-corporate-mode-wrapper {
|
||||
.isp-card-container.isp-card.isp-default {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
h3.isp-card-title {
|
||||
color: map-get($blue-palette, 100);
|
||||
border-color: map-get($blue-palette, 100) !important;
|
||||
}
|
||||
}
|
||||
|
||||
nbp-input-text .isp-corporate-mode-wrapper .isp-input-text {
|
||||
input.textfield-box {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: map-get($blue-palette, 75);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: map-get($gray-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isp-corporate-mode-wrapper .isp-disabled {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
color: map-get($gray-palette, 150)
|
||||
}
|
||||
|
||||
nbp-calendar-generic .isp-corporate-mode-wrapper .isp-calendar-generic {
|
||||
.dropdown-menu {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
&.isp-disabled {
|
||||
input.form-control {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
color: map-get($gray-palette, 150)
|
||||
}
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
border-color: map-get($gray-palette, 100);
|
||||
|
||||
&[disabled] {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
color: map-get($gray-palette, 150);
|
||||
border-color: map-get($gray-palette, 100) !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: map-get($blue-palette, 75);
|
||||
|
||||
~.button-icon {
|
||||
border-color: map-get($blue-palette, 75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
border-left-color: map-get($gray-palette, 100);
|
||||
color: map-get($gray-palette, 200);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: map-get($white-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fid-date-picker-decorator-color() {
|
||||
border-color: map-get($gray-palette, 100);
|
||||
color: map-get($gray-palette, 200);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
.isp-main-datepicker {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.btn.btn-link.camillo {
|
||||
//border frecce
|
||||
@include fid-date-picker-decorator-color();
|
||||
}
|
||||
|
||||
.ngb-dp-month-name {
|
||||
color: map-get($gray-palette, 200);
|
||||
}
|
||||
|
||||
.header-navigation-date {
|
||||
@include fid-date-picker-decorator-color();
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
//giorni settimane
|
||||
color: map-get($gray-palette, 150) !important;
|
||||
|
||||
&:before {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
.isp-datepicker-routing-view .d-flex {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
|
||||
//giorni in numero
|
||||
&:not(.hidden) {
|
||||
@include fid-date-picker-decorator-color();
|
||||
|
||||
&>div {
|
||||
color: map-get($gray-palette, 200);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
|
||||
// &.disabled {
|
||||
// color: map-get($gray-palette, 200) !important;
|
||||
// background-color: map-get($gray-palette, 75) !important;
|
||||
// }
|
||||
|
||||
&:has(.is-today) {
|
||||
color: map-get($blue-palette, 100) !important;
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-palette, 200);
|
||||
background-color: map-get($gray-palette, 100);
|
||||
border-color: map-get($gray-palette, 150);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.bg-primary) {
|
||||
background-color: map-get($blue-palette, 75);
|
||||
color: map-get($white-palette, 100);
|
||||
|
||||
&>div {
|
||||
background-color: map-get($blue-palette, 75) !important;
|
||||
color: map-get($white-palette, 100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-combo,
|
||||
nbp-combo-filter,
|
||||
nbp-combo-multi {
|
||||
|
||||
.isp-corporate-mode-wrapper .isp-combo,
|
||||
.isp-corporate-mode-wrapper .isp-combo-filter,
|
||||
.isp-corporate-mode-wrapper .isp-combo-multi {
|
||||
input.form-control {
|
||||
border-color: map-get($gray-palette, 100);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: map-get($blue-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
.arrow-bottom {
|
||||
border-color: map-get($gray-palette, 200) transparent transparent transparent !important;
|
||||
}
|
||||
|
||||
.arrow-top {
|
||||
border-color: transparent transparent map-get($gray-palette, 200) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-list-wrapper {
|
||||
border-color: map-get($gray-palette, 150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-combo,
|
||||
nbp-combo-filter {
|
||||
|
||||
.isp-corporate-mode-wrapper .isp-combo,
|
||||
.isp-corporate-mode-wrapper .isp-combo-filter {
|
||||
.dropdown-list-item {
|
||||
&:hover {
|
||||
background-color: map-get($gray-palette, 150);
|
||||
color: map-get($white-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-combo-multi .isp-corporate-mode-wrapper {
|
||||
.isp-combo-multi .dropdown-list>.dropdown-list-item:first-child {
|
||||
background: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
.isp-combo-multi .dropdown-list-wrapper {
|
||||
border-color: map-get($gray-palette, 100);
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
>.dropdown-list-item:not(:first-child) {
|
||||
border-color: map-get($gray-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.isp-combo-multi input {
|
||||
background-color: map-get($gray-palette, 75);
|
||||
}
|
||||
|
||||
.dropdown-container:before {
|
||||
background-color: map-get($blue-palette, 150);
|
||||
border-color: map-get($blue-palette, 150);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($blue-palette, 200);
|
||||
border-color: map-get($blue-palette, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-toggle .isp-corporate-mode-wrapper {
|
||||
.isp-primary .div-toggle-barra.truck.active-toggle {
|
||||
background: map-get($orange-palette, 100);
|
||||
border-color: map-get($orange-palette, 100);
|
||||
}
|
||||
|
||||
.div-toggle-barra.truck.active-toggle {
|
||||
background: map-get($gray-palette, 150);
|
||||
border-color: map-get($gray-palette, 150);
|
||||
}
|
||||
|
||||
.div-toggle-barra.truck {
|
||||
background-color: map-get($white-palette, 100);
|
||||
border-color: map-get($gray-palette, 100);
|
||||
transition: all .5;
|
||||
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
|
||||
}
|
||||
|
||||
.div-toggle-slider.thumb {
|
||||
border-color: map-get($gray-palette, 100);
|
||||
background: map-get($white-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
nbp-fid-toggle-tabset .isp-corporate-mode-wrapper,
|
||||
nbp-toggle-tabset .isp-corporate-mode-wrapper {
|
||||
.tabs-container {
|
||||
>.tab-element.cursor-pointer:not(:last-child) {
|
||||
border-right-color: map-get($gray-palette, 100);
|
||||
}
|
||||
|
||||
.tab-element.cursor-pointer {
|
||||
&.active .tab-title {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nbp-textarea textarea {
|
||||
border-color: map-get($gray-palette, 75);
|
||||
color: map-get($gray-palette, 150);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: map-get($blue-palette, 75);
|
||||
}
|
||||
}
|
||||
|
||||
nbp-accordion .isp-corporate-mode-wrapper .isp-accordion {
|
||||
border: 1px solid map-get($gray-palette, 100);
|
||||
|
||||
.accordion-header {
|
||||
background-color: map-get($white-palette, 100);
|
||||
color: map-get($blue-palette, 100);
|
||||
border-bottom-color: map-get($blue-palette, 100) !important;
|
||||
}
|
||||
|
||||
.accordion-arrow {
|
||||
color: map-get($blue-palette, 100);
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
color: map-get($gray-palette, 150);
|
||||
}
|
||||
}
|
||||
|
||||
isp-turbo-table .isp-corporate-mode-wrapper .isp-turbo-table,
|
||||
nbp-table .isp-corporate-mode-wrapper .isp-table {
|
||||
table {
|
||||
thead {
|
||||
|
||||
th.table-label,
|
||||
th.header-table-class {
|
||||
color: map-get($gray-palette, 150);
|
||||
background: map-get($white-palette, 100);
|
||||
border-bottom-color: map-get($gray-palette, 50);
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
|
||||
tr.table-row,
|
||||
tr.isp-table-row {
|
||||
color: map-get($gray-palette, 150);
|
||||
background: map-get($white-palette, 100);
|
||||
|
||||
td.table-cell,
|
||||
td.isp-common-column,
|
||||
td.td-accordion-row {
|
||||
color: map-get($gray-palette, 150);
|
||||
border-bottom-color: map-get($gray-palette, 50) !important;
|
||||
}
|
||||
}
|
||||
|
||||
tr.isp-table-row.isp-corporate-mode-wrapper:has(.row-expander-column-content) {
|
||||
td {
|
||||
background-color: map-get($gray-palette, 50);
|
||||
}
|
||||
|
||||
&:has(.isp-common-column[style*="padding-left: 40px;"]) td {
|
||||
background-color: map-get($gray-palette, 25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isp-spinner {
|
||||
.spinner::after {
|
||||
background: map-get($black-palette, 200);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#canvasLoader {
|
||||
background: map-get($white-palette, 100);
|
||||
border-color: map-get($gray-palette, 150);
|
||||
}
|
||||
|
||||
#canvasLoader::after {
|
||||
color: map-get($orange-palette, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ag-theme-balham {
|
||||
color: map-get($gray-palette, 150);
|
||||
|
||||
.ag-header {
|
||||
background-color: map-get($white-palette, 100);
|
||||
border-color: map-get($gray-palette, 50);
|
||||
color: map-get($gray-palette, 150);
|
||||
}
|
||||
|
||||
.ag-row:not(.ag-row-first) {
|
||||
border-color: map-get($gray-palette, 50);
|
||||
}
|
||||
|
||||
.ag-row-odd {
|
||||
background-color: map-get($white-palette, 100);
|
||||
}
|
||||
}
|
||||
34
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_animated.scss
vendored
Normal file
34
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_animated.scss
vendored
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
25
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_bordered-pulled.scss
vendored
Normal file
25
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_bordered-pulled.scss
vendored
Normal file
@ -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; }
|
||||
}
|
||||
12
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_core.scss
vendored
Normal file
12
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_core.scss
vendored
Normal file
@ -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;
|
||||
|
||||
}
|
||||
6
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_fixed-width.scss
vendored
Normal file
6
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_fixed-width.scss
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
// Fixed Width Icons
|
||||
// -------------------------
|
||||
.#{$fa-css-prefix}-fw {
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
789
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_icons.scss
vendored
Normal file
789
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_icons.scss
vendored
Normal file
@ -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; }
|
||||
13
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_larger.scss
vendored
Normal file
13
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_larger.scss
vendored
Normal file
@ -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; }
|
||||
19
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_list.scss
vendored
Normal file
19
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_list.scss
vendored
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
60
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_mixins.scss
vendored
Normal file
60
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_mixins.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
15
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_path.scss
vendored
Normal file
15
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_path.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
20
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_rotated-flipped.scss
vendored
Normal file
20
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_rotated-flipped.scss
vendored
Normal file
@ -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;
|
||||
}
|
||||
5
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_screen-reader.scss
vendored
Normal file
5
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_screen-reader.scss
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
// Screen Readers
|
||||
// -------------------------
|
||||
|
||||
.sr-only { @include sr-only(); }
|
||||
.sr-only-focusable { @include sr-only-focusable(); }
|
||||
20
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_stacked.scss
vendored
Normal file
20
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_stacked.scss
vendored
Normal file
@ -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; }
|
||||
800
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_variables.scss
vendored
Normal file
800
src/assets/xdce-module-widget-fideuram/styles/font-awesome/_variables.scss
vendored
Normal file
@ -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";
|
||||
|
||||
18
src/assets/xdce-module-widget-fideuram/styles/font-awesome/font-awesome.scss
vendored
Normal file
18
src/assets/xdce-module-widget-fideuram/styles/font-awesome/font-awesome.scss
vendored
Normal file
@ -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";
|
||||
1214
src/assets/xdce-module-widget-fideuram/styles/style.scss
Normal file
1214
src/assets/xdce-module-widget-fideuram/styles/style.scss
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/assets/xdce-module-widget-fideuram/webfonts/FontAwesome.otf
Normal file
BIN
src/assets/xdce-module-widget-fideuram/webfonts/FontAwesome.otf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
114
src/index.ts
Normal file
114
src/index.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { XdceArchModule } from '@isp/xdce-arch-core';
|
||||
import { NbpModule } from '@isp/xdce-widget';
|
||||
|
||||
import { NbpBreadCrumbsComponent } from './widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component';
|
||||
export { NbpBreadCrumbsComponent } from './widgetfideuram/components/nbp-bread-crumbs/nbp-bread-crumbs.component';
|
||||
import { NbpFidBarChartComponent } from './widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component';
|
||||
export { NbpFidBarChartComponent } from './widgetfideuram/components/nbp-fid-bar-chart/nbp-fid-bar-chart.component';
|
||||
import { NbpFidButtonBarComponent } from './widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component';
|
||||
export { NbpFidButtonBarComponent } from './widgetfideuram/components/nbp-fid-button-bar/nbp-fid-button-bar.component';
|
||||
import { NbpFidDonutChartComponent } from './widgetfideuram/components/nbp-fid-donut-chart/nbp-fid-donut-chart.component';
|
||||
export { NbpFidDonutChartComponent } from './widgetfideuram/components/nbp-fid-donut-chart/nbp-fid-donut-chart.component';
|
||||
import { NbpFidPyramidChartComponent } from './widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component';
|
||||
export { NbpFidPyramidChartComponent } from './widgetfideuram/components/nbp-fid-pyramid-chart/nbp-fid-pyramid-chart.component';
|
||||
import { NbpFidSidePopupComponent } from './widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component';
|
||||
export { NbpFidSidePopupComponent } from './widgetfideuram/components/nbp-fid-side-popup/nbp-fid-side-popup.component';
|
||||
import { NbpFidTableComponent } from './widgetfideuram/components/nbp-fid-table/nbp-fid-table.component';
|
||||
export { NbpFidTableComponent } from './widgetfideuram/components/nbp-fid-table/nbp-fid-table.component';
|
||||
import { NbpFidToggleTabComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.a11y';
|
||||
export { NbpFidToggleTabComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.a11y';
|
||||
import { NbpFidToggleTabComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.noa11y';
|
||||
export { NbpFidToggleTabComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component.noa11y';
|
||||
import { NbpFidToggleTabComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component';
|
||||
export { NbpFidToggleTabComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tab.component';
|
||||
import { NbpFidToggleTabsetComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.a11y';
|
||||
export { NbpFidToggleTabsetComponentA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.a11y';
|
||||
import { NbpFidToggleTabsetComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.noa11y';
|
||||
export { NbpFidToggleTabsetComponentNOA11Y } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component.noa11y';
|
||||
import { NbpFidToggleTabsetComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component';
|
||||
export { NbpFidToggleTabsetComponent } from './widgetfideuram/components/nbp-fid-toggle-tabset/nbp-fid-toggle-tabset.component';
|
||||
import { NbpFidComboComponent } from './widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component';
|
||||
export { NbpFidComboComponent } from './widgetfideuram/components/nbp-fid-combo/nbp-fid-combo.component';
|
||||
|
||||
import { ShowcaseComponent } from './widgetfideuram/components/showcase/showcase.component';
|
||||
export { ShowcaseComponent } from './widgetfideuram/components/showcase/showcase.component';
|
||||
import { Showcase1Component } from './widgetfideuram/components/showcase/showcase1.component';
|
||||
export { Showcase1Component } from './widgetfideuram/components/showcase/showcase1.component';
|
||||
import { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component';
|
||||
export { WidgetFideuramShowcaseComponent } from './widgetfideuram/components/widget-fideuram-showcase/widget-fideuram-showcase.component';
|
||||
|
||||
import { AgGridModule, AngularFrameworkComponentWrapper, AngularFrameworkOverrides } from 'ag-grid-angular';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
export { AgGridModule } from 'ag-grid-angular';
|
||||
|
||||
export { DATE_STRING_FORMAT, formatDate, formatNumber, setSpinnerMessage, clearSpinnerMessage } from './widgetfideuram/Utils';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
XdceArchModule,
|
||||
NbpModule,
|
||||
AgGridModule,
|
||||
FormsModule,
|
||||
],
|
||||
declarations: [
|
||||
NbpBreadCrumbsComponent,
|
||||
NbpFidBarChartComponent,
|
||||
NbpFidButtonBarComponent,
|
||||
NbpFidComboComponent,
|
||||
NbpFidDonutChartComponent,
|
||||
NbpFidPyramidChartComponent,
|
||||
NbpFidSidePopupComponent,
|
||||
NbpFidTableComponent,
|
||||
NbpFidToggleTabComponentA11Y,
|
||||
NbpFidToggleTabComponentNOA11Y,
|
||||
NbpFidToggleTabComponent,
|
||||
NbpFidToggleTabsetComponentA11Y,
|
||||
NbpFidToggleTabsetComponentNOA11Y,
|
||||
NbpFidToggleTabsetComponent,
|
||||
ShowcaseComponent,
|
||||
Showcase1Component,
|
||||
WidgetFideuramShowcaseComponent,
|
||||
],
|
||||
exports: [
|
||||
NbpBreadCrumbsComponent,
|
||||
NbpFidBarChartComponent,
|
||||
NbpFidButtonBarComponent,
|
||||
NbpFidComboComponent,
|
||||
NbpFidDonutChartComponent,
|
||||
NbpFidPyramidChartComponent,
|
||||
NbpFidSidePopupComponent,
|
||||
NbpFidTableComponent,
|
||||
NbpFidToggleTabComponentA11Y,
|
||||
NbpFidToggleTabComponentNOA11Y,
|
||||
NbpFidToggleTabComponent,
|
||||
NbpFidToggleTabsetComponentA11Y,
|
||||
NbpFidToggleTabsetComponentNOA11Y,
|
||||
NbpFidToggleTabsetComponent,
|
||||
ShowcaseComponent,
|
||||
Showcase1Component,
|
||||
WidgetFideuramShowcaseComponent,
|
||||
AgGridModule
|
||||
],
|
||||
providers: [
|
||||
AngularFrameworkOverrides,
|
||||
AngularFrameworkComponentWrapper
|
||||
],
|
||||
entryComponents: [
|
||||
NbpFidToggleTabComponentA11Y,
|
||||
NbpFidToggleTabComponentNOA11Y,
|
||||
NbpFidToggleTabsetComponentA11Y,
|
||||
NbpFidToggleTabsetComponentNOA11Y,
|
||||
NbpFidToggleTabComponent,
|
||||
NbpFidToggleTabsetComponent
|
||||
]
|
||||
})
|
||||
export class XdceWidgetFideuramModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return {
|
||||
ngModule: XdceWidgetFideuramModule,
|
||||
providers: []
|
||||
};
|
||||
}
|
||||
}
|
||||
30
src/package.json
Normal file
30
src/package.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@isp/xdce-module-widget-fideuram-v1",
|
||||
"version": "0.1.0-snapshot.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "isp.com"
|
||||
},
|
||||
"author": {
|
||||
"name": "xdce-schematics",
|
||||
"email": "xdce-schematics@isp.com"
|
||||
},
|
||||
"keywords": [
|
||||
"angular"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "isp.com/issues"
|
||||
},
|
||||
"main": "xdce-module-widget-fideuram-v1.umd.js",
|
||||
"module": "xdce-module-widget-fideuram-v1.js",
|
||||
"jsnext:main": "xdce-module-widget-fideuram-v1.js",
|
||||
"typings": "xdce-module-widget-fideuram-v1.d.ts",
|
||||
"peerDependencies": {
|
||||
"@angular/core": "^6.0.0",
|
||||
"@ngx-translate/core": "^10.0.0",
|
||||
"@ngx-translate/http-core": "^10.0.0",
|
||||
"rxjs": "^6.1.0",
|
||||
"zone.js": "^0.8.4"
|
||||
}
|
||||
}
|
||||
32
src/tsconfig.es5.json
Normal file
32
src/tsconfig.es5.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"module": "es2015",
|
||||
"target": "es5",
|
||||
"baseUrl": ".",
|
||||
"stripInternal": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"outDir": "../build",
|
||||
"rootDir": ".",
|
||||
"lib": [
|
||||
"es2015",
|
||||
"dom"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [],
|
||||
"sourceMap": true
|
||||
},
|
||||
"exclude": ["./src/e2e"],
|
||||
"angularCompilerOptions": {
|
||||
"annotateForClosureCompiler": true,
|
||||
"strictMetadataEmit": false,
|
||||
"skipTemplateCodegen": true,
|
||||
"flatModuleOutFile": "xdce-module-widget-fideuram-v1.js",
|
||||
"flatModuleId": "@isp/xdce-module-widget-fideuram-v1"
|
||||
},
|
||||
"files": [
|
||||
"./index.ts"
|
||||
]
|
||||
}
|
||||
18
src/tsconfig.spec.json
Normal file
18
src/tsconfig.spec.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "./tsconfig.es5.json",
|
||||
"compilerOptions": {
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"outDir": "../out-tsc/spec",
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"baseUrl": "",
|
||||
"types": [
|
||||
"jest",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
45
src/widgetfideuram/Utils.ts
Normal file
45
src/widgetfideuram/Utils.ts
Normal file
@ -0,0 +1,45 @@
|
||||
export const DATE_STRING_FORMAT = 'dd/MM/yyyy';
|
||||
|
||||
// formatter.ts
|
||||
export function formatDate(date: Date): string {
|
||||
const day = date.getDate();
|
||||
const month = date.getMonth() + 1;
|
||||
const year = date.getFullYear().toString();
|
||||
|
||||
const dayStr = day < 10 ? '0' + day : '' + day;
|
||||
const monthStr = month < 10 ? '0' + month : '' + month;
|
||||
|
||||
return `${dayStr}/${monthStr}/${year}`;
|
||||
}
|
||||
|
||||
export function formatNumber(number: number): string {
|
||||
const numberFormatter = new Intl.NumberFormat('it-IT', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
|
||||
return numberFormatter.format(number);
|
||||
}
|
||||
|
||||
export function setSpinnerMessage(message: string, name: string = 'mainSpinner'): void {
|
||||
const ispSpinner = _getSpinner(name);
|
||||
|
||||
if (ispSpinner) {
|
||||
ispSpinner.setAttribute('data-message', message);
|
||||
}
|
||||
}
|
||||
|
||||
export function clearSpinnerMessage(name: string = 'mainSpinner'): void {
|
||||
const ispSpinner = _getSpinner(name);
|
||||
|
||||
if (ispSpinner) {
|
||||
ispSpinner.setAttribute('data-message', "");
|
||||
}
|
||||
}
|
||||
|
||||
function _getSpinner(name: string){
|
||||
const spinners = document.getElementsByName(name);
|
||||
const spinnerArray = Array.from(spinners);
|
||||
|
||||
return spinnerArray.find(spinner => spinner.tagName.toLowerCase() === 'isp-spinner');
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
Componente BreadCrumbs
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NbpBaseComponent } from '@isp/xdce-widget';
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-bread-crumbs',
|
||||
templateUrl: './nbp-bread-crumbs.component.html',
|
||||
styleUrls: ['./nbp-bread-crumbs.component.scss']
|
||||
})
|
||||
export class NbpBreadCrumbsComponent extends NbpBaseComponent {
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<div #chart class="nbp-fid-bar-chart"></div>
|
||||
@ -0,0 +1,3 @@
|
||||
.nbp-fid-bar-chart {
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,261 @@
|
||||
import { Component, ElementRef, HostListener, Input, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { NbpBaseComponent } from '@isp/xdce-widget';
|
||||
import * as d3 from 'd3';
|
||||
|
||||
export interface NbpFidBarChartConfig {
|
||||
valueKey: string;
|
||||
labelKey: string;
|
||||
colorKey?: string;
|
||||
colors?: string[];
|
||||
format?: (value: number) => string;
|
||||
lineHeight?: number;
|
||||
chartFontSize?: number;
|
||||
symbol?: string;
|
||||
ticks?: number;
|
||||
}
|
||||
|
||||
function formatAsIs(value: number): string {
|
||||
const numStr = '' + value;
|
||||
const length = (numStr.split('.')[1] || '').length || 0;
|
||||
|
||||
return new Intl.NumberFormat('it-IT', {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: length
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const DEFAULT_CONFIG: NbpFidBarChartConfig = {
|
||||
valueKey: 'value',
|
||||
labelKey: 'label',
|
||||
colors: ['#1F4E79', '#D3D3D3', '#6280a4', '#A9A9A9', '#3CB371', '#FFD700', '#FF6347', '#FF0000'],
|
||||
lineHeight: 40,
|
||||
chartFontSize: 14,
|
||||
symbol: '',
|
||||
ticks: 10,
|
||||
format: formatAsIs
|
||||
}
|
||||
|
||||
let counter = 0;
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-bar-chart',
|
||||
templateUrl: './nbp-fid-bar-chart.component.html',
|
||||
styleUrls: ['./nbp-fid-bar-chart.component.scss']
|
||||
})
|
||||
export class NbpFidBarChartComponent extends NbpBaseComponent {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
@ViewChild('chart') chart: ElementRef;
|
||||
|
||||
colors: string[] = [
|
||||
'#1F4E79',
|
||||
'#D3D3D3',
|
||||
'#6280a4',
|
||||
'#A9A9A9',
|
||||
'#3CB371',
|
||||
'#FFD700',
|
||||
'#FF6347',
|
||||
'#FF0000'
|
||||
];
|
||||
|
||||
@Input() data: any[] = [
|
||||
{ description: "Monetario", perce: 9.7654, color: "#A6CE39" },
|
||||
{ description: "Obbligazionario", perce: 44.0842, color: "#2C6693" },
|
||||
{ description: "Azionario", perce: 39.6174, color: "#D94235" },
|
||||
{ description: "Monetario Valute Estere", perce: 1.5651, color: "#CCCCCC" },
|
||||
{ description: "Alternative", perce: 3.54, color: "#a3a3a3" },
|
||||
{ description: "pippo", perce: 1000.54, color: "#987654" },
|
||||
{ description: "pluto", perce: 3.54, color: "#234567" },
|
||||
{ description: "paperino", perce: 3333.54, color: "#3741ab" },
|
||||
{ description: "ciccio", perce: 525.54, color: "#38892a" },
|
||||
{ description: "lupusinfabula", perce: 3.54, color: "#ae45eb" },
|
||||
{ description: "aaaa", perce: 11.54, color: "#8399ae" },
|
||||
{ description: "eeee", perce: 15.54, color: "#BBBBBB" },
|
||||
{ description: "Altro", perce: 9.45, color: "#AAAAAA" }
|
||||
];
|
||||
|
||||
@Input() config: NbpFidBarChartConfig = {
|
||||
labelKey: 'description',
|
||||
valueKey: 'perce',
|
||||
colorKey: 'color'
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.init();
|
||||
this.setColors();
|
||||
}
|
||||
|
||||
private init(): void {
|
||||
this.config = {
|
||||
...DEFAULT_CONFIG,
|
||||
...this.config
|
||||
};
|
||||
|
||||
if (this.config.symbol) {
|
||||
this.data = this.data.map((d: any) => ({
|
||||
...d,
|
||||
[this.config.labelKey]: `${d[this.config.labelKey]} (${this.config.symbol})`
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private d3colors: any;
|
||||
|
||||
private setColors(): void {
|
||||
if (this.config.colorKey) {
|
||||
this.colors = this.data.map((d: any, i: number): string => d[this.config.colorKey] ? d[this.config.colorKey] : this.config.colors[i]);
|
||||
} else if (this.config.colors) {
|
||||
this.colors = this.config.colors;
|
||||
}
|
||||
|
||||
this.d3colors = d3
|
||||
.scaleOrdinal()
|
||||
.domain(this.data.map((d: any) => d[this.config.labelKey].toString()))
|
||||
.range(this.colors);
|
||||
}
|
||||
|
||||
private totalWidth: number = null;
|
||||
private totalHeight: number = null;
|
||||
private maxLabelWidth: number = null;
|
||||
private maxValueWidth: number = null;
|
||||
|
||||
private margin = { top: 20, right: null, bottom: 20, left: null };
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.calcWidth();
|
||||
this.createChart();
|
||||
}
|
||||
|
||||
private calcWidth(): void {
|
||||
if (this.chart && this.chart.nativeElement && this.data && this.data.length > 0) {
|
||||
// Crea un elemento SVG temporaneo
|
||||
const tempSvg = d3.select('body').append('svg')
|
||||
.style('visibility', 'hidden')
|
||||
.style('position', 'fixed')
|
||||
.style('z-index', '-1');
|
||||
|
||||
// Calcola la larghezza massima delle etichette
|
||||
const maxLabelWidth = d3.max(this.data.map((d: any) => {
|
||||
const label = this.config.symbol ? `${d[this.config.labelKey]} (${this.config.symbol})` : d[this.config.labelKey].toString();
|
||||
const text = tempSvg.append('text')
|
||||
.text(label)
|
||||
.style('font-size', `${this.config.chartFontSize}px`) // Assicurati di usare la stessa dimensione del font
|
||||
|
||||
const bbox = text.node().getBBox();
|
||||
text.remove(); // Rimuovi l'elemento temporaneo
|
||||
return bbox.width;
|
||||
})) || 0;
|
||||
|
||||
const maxValueWidth = d3.max(this.data.map((d: any) => {
|
||||
const text = tempSvg.append('text')
|
||||
.text(this.config.format(d[this.config.valueKey]))
|
||||
.style('font-size', `${this.config.chartFontSize}px`) // Assicurati di usare la stessa dimensione del font
|
||||
|
||||
const bbox = text.node().getBBox();
|
||||
text.remove(); // Rimuovi l'elemento temporaneo
|
||||
return bbox.width;
|
||||
})) || 0;
|
||||
|
||||
tempSvg.remove(); // Rimuovi l'elemento SVG temporaneo
|
||||
|
||||
this.maxLabelWidth = maxLabelWidth;
|
||||
this.maxValueWidth = maxValueWidth;
|
||||
this.margin.right = this.maxValueWidth + 10;
|
||||
this.margin.left = this.maxLabelWidth + 10;
|
||||
this.totalWidth = this.chart.nativeElement.offsetWidth - this.margin.left - this.margin.right;
|
||||
this.totalHeight = this.config.lineHeight * this.data.length - this.margin.top - this.margin.bottom;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize() {
|
||||
this.calcWidth();
|
||||
this.updateBars();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['data'] || changes['config']) {
|
||||
this.ngOnInit();
|
||||
this.updateBars();
|
||||
}
|
||||
}
|
||||
|
||||
private createChart(): void {
|
||||
if (!this.data || !this.data.length) return;
|
||||
|
||||
const margin = this.margin;
|
||||
const width = this.totalWidth;
|
||||
const height = this.totalHeight;
|
||||
|
||||
const svg = d3.select(this.chart.nativeElement)
|
||||
.append('svg')
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom)
|
||||
.append('g')
|
||||
.attr('transform', `translate(${margin.left}, ${margin.top})`);
|
||||
|
||||
const xMin = d3.min([{ [this.config.valueKey]: 0 }, ...this.data], (d: any) => d[this.config.valueKey]) || 0;
|
||||
const xMax = d3.max(this.data, (d: any) => d[this.config.valueKey]) || 0;
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([xMin - (xMin < 0 ? this.maxValueWidth : 10), xMax * 1.1])
|
||||
.range([0, width]);
|
||||
|
||||
const yScale = d3.scaleBand()
|
||||
.domain(this.data.map((d: any) => d[this.config.labelKey]))
|
||||
.range([0, height])
|
||||
.padding(0.3);
|
||||
|
||||
const xAxis = d3.axisBottom(xScale).ticks(this.config.ticks);
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
svg.append('g')
|
||||
.call(xAxis)
|
||||
.attr('transform', `translate(0, ${height})`)
|
||||
.selectAll('text')
|
||||
.style('font-size', this.config.chartFontSize);
|
||||
|
||||
svg.append('g')
|
||||
.call(yAxis)
|
||||
.selectAll('text')
|
||||
.style('font-size', this.config.chartFontSize);
|
||||
|
||||
// Aggiunta linea dell'asse 0 se ci sono valori negativi
|
||||
if (xMin < 0) {
|
||||
svg.append('line')
|
||||
.attr('x1', xScale(0))
|
||||
.attr('x2', xScale(0))
|
||||
.attr('y1', 0)
|
||||
.attr('y2', height)
|
||||
.attr('stroke', 'black')
|
||||
.attr('stroke-width', 1);
|
||||
}
|
||||
|
||||
svg.selectAll('.bar')
|
||||
.data(this.data)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('class', 'bar')
|
||||
.attr('x', (d: any) => xScale(Math.min(0, d[this.config.valueKey])))
|
||||
.attr('y', (d: any) => yScale(d[this.config.labelKey]) || 0)
|
||||
.attr('width', (d: any) => Math.abs(xScale(d[this.config.valueKey]) - xScale(0)))
|
||||
.attr('height', yScale.bandwidth())
|
||||
.attr('fill', (d: any) => this.d3colors(d[this.config.labelKey]));
|
||||
|
||||
svg.selectAll('.label')
|
||||
.data(this.data)
|
||||
.enter()
|
||||
.append('text')
|
||||
.attr('x', (d: any) => xScale(d[this.config.valueKey]) + (d[this.config.valueKey] < 0 ? -5 : 5))
|
||||
.attr('y', (d: any) => (yScale(d[this.config.labelKey]) || 0) + yScale.bandwidth() / 2)
|
||||
.attr('dy', '0.35em')
|
||||
.attr('text-anchor', (d: any) => (d[this.config.valueKey] < 0 ? 'end' : 'start'))
|
||||
.text((d: any) => this.config.format(d[this.config.valueKey]));
|
||||
}
|
||||
|
||||
private updateBars() {
|
||||
d3.select(this.chart.nativeElement).selectAll("*").remove();
|
||||
this.createChart();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
<div class="nbp-fid-button-bar">
|
||||
<nbp-button *ngFor="let btn of nbpButtons" [nbpLabel]="btn.label" [nbpStyle]="btn.style || _nbpStyle.DEFAULT"
|
||||
[disabled]="btn.disabled" [nbpIcon]="btn.icon" [tabindex]="btn.tabindex"
|
||||
[alternativeAriaLabel]="btn.alternativeAriaLabel" [invertIconPosition]="btn.invertIconPosition"
|
||||
[iconAriaLabel]="btn.iconAriaLabel" (nbpClick)="onButtonClick(btn)">
|
||||
</nbp-button>
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
.nbp-fid-button-bar {
|
||||
display: flex;
|
||||
|
||||
--nbp-button-bar-border-color: white;
|
||||
--nbp-button-bar-background-color: #e3e7e9;
|
||||
|
||||
> nbp-button {
|
||||
flex-grow: 1;
|
||||
|
||||
.isp-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: var(--nbp-button-bar-background-color);
|
||||
padding: 10px 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child){
|
||||
.isp-button {
|
||||
border-right: 1px solid var(--nbp-button-bar-border-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { INbpButton, NbpBaseComponent, NbpStyle } from '@isp/xdce-widget';
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-button-bar',
|
||||
templateUrl: './nbp-fid-button-bar.component.html',
|
||||
styleUrls: ['./nbp-fid-button-bar.component.scss']
|
||||
})
|
||||
export class NbpFidButtonBarComponent extends NbpBaseComponent {
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
private _nbpStyle: NbpStyle = NbpStyle.DEFAULT;
|
||||
@Input()
|
||||
set nbpStyle(value: NbpStyle) {
|
||||
this._nbpStyle = value;
|
||||
}
|
||||
get nbpStyle(): NbpStyle {
|
||||
return this._nbpStyle;
|
||||
}
|
||||
|
||||
|
||||
private _nbpButtons: Array<INbpButton> = undefined;
|
||||
@Input()
|
||||
set nbpButtons(value: Array<INbpButton>) {
|
||||
this._nbpButtons = value.map((btn: INbpButton) => ({...btn, style: this._nbpStyle}));
|
||||
}
|
||||
get nbpButtons(): Array<INbpButton> {
|
||||
return this._nbpButtons;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
<select class="nbp-fid-combo" (change)="onChange($event)" [disabled]="disabled">
|
||||
<option *ngIf="nbpShowEmptyValue"
|
||||
[selected]="ngModel === _emptyValue"
|
||||
[value]="_emptyValue">{{_emptyLabel}}</option>
|
||||
<option *ngFor="let op of _options"
|
||||
[value]="optStrValue(op)"
|
||||
[selected]="selected(op)"
|
||||
>{{optLabel(op)}}</option>
|
||||
</select>
|
||||
@ -0,0 +1,24 @@
|
||||
.nbp-fid-combo {
|
||||
border: 1px solid;
|
||||
border-color: #DDE6E9; // map-get($gray-palette, 100);
|
||||
// background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
|
||||
// background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' width='10px' height='10px' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;
|
||||
// background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' width='10px' height='10px' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/></g></svg>") no-repeat;
|
||||
// background-position: calc(100% - 0.75em) center !important;
|
||||
|
||||
background: #fff;
|
||||
// -moz-appearance:none !important;
|
||||
// -webkit-appearance: none !important;
|
||||
// appearance: none !important;
|
||||
min-width: 2em;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 1px;
|
||||
padding-right: 1em !important;
|
||||
width: 100%;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: #66AFE9; // map-get($blue-palette, 100);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,148 @@
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import {
|
||||
NbpBaseComponent,
|
||||
NbpStyle,
|
||||
NbpDataSource
|
||||
} from '@isp/xdce-widget';
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-combo',
|
||||
templateUrl: './nbp-fid-combo.component.html',
|
||||
styleUrls: ['./nbp-fid-combo.component.scss']
|
||||
})
|
||||
export class NbpFidComboComponent extends NbpBaseComponent {
|
||||
constructor(){
|
||||
super()
|
||||
}
|
||||
|
||||
@Input() nbpViewField : string = null;
|
||||
@Input() nbpKeyField : string = null;
|
||||
|
||||
_emptyLabel: string = '';
|
||||
_emptyValue: string = null;
|
||||
_options: Array<any> = [];
|
||||
|
||||
private _model: any;
|
||||
@Input()
|
||||
set ngModel(value: any) {
|
||||
this._model = value;
|
||||
if (this._nbpShowEmptyValue && this._model !== null && !this.nbpViewField) {
|
||||
this._emptyValue = this._model;
|
||||
this._emptyLabel = this._model;
|
||||
}
|
||||
}
|
||||
|
||||
@Output() ngModelChange = new EventEmitter<any>();
|
||||
get ngModel(): any {
|
||||
return this._model;
|
||||
}
|
||||
|
||||
private _nbpStyle: NbpStyle = NbpStyle.DEFAULT;
|
||||
@Input()
|
||||
set nbpStyle(value: NbpStyle) {
|
||||
this._nbpStyle = value;
|
||||
}
|
||||
get nbpStyle(): NbpStyle {
|
||||
return this._nbpStyle;
|
||||
}
|
||||
|
||||
private _nbpShowEmptyValue: boolean = true;
|
||||
@Input()
|
||||
set nbpShowEmptyValue(value: boolean) {
|
||||
this._nbpShowEmptyValue = value;
|
||||
}
|
||||
get nbpShowEmptyValue(): boolean {
|
||||
return this._nbpShowEmptyValue;
|
||||
}
|
||||
|
||||
private _disabled: boolean = false;
|
||||
@Input()
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = value;
|
||||
}
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
|
||||
private _nbpDataSource: NbpDataSource<any> = new NbpDataSource<any>();
|
||||
@Input()
|
||||
set nbpDataSource(value: NbpDataSource<any>) {
|
||||
this._nbpDataSource = value;
|
||||
this._readOptions();
|
||||
}
|
||||
get nbpDataSource(): NbpDataSource<any> {
|
||||
return this._nbpDataSource;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this._readOptions();
|
||||
}
|
||||
|
||||
optStrValue(opt: any) {
|
||||
if (!opt)
|
||||
return "";
|
||||
if (typeof (opt) === "string")
|
||||
return opt;
|
||||
const v = this.nbpKeyField ? opt[this.nbpKeyField] : opt;
|
||||
if (v === null || v === undefined)
|
||||
return "";
|
||||
return "" + v;
|
||||
}
|
||||
|
||||
optValue(opt: any) {
|
||||
if (!opt)
|
||||
return null;
|
||||
if (typeof (opt) === "string")
|
||||
return opt;
|
||||
const v = this.nbpKeyField ? opt[this.nbpKeyField] : opt;
|
||||
if (v === null || v === undefined)
|
||||
return null;
|
||||
return v;
|
||||
}
|
||||
|
||||
|
||||
optLabel(opt: any) {
|
||||
if (!opt)
|
||||
return '';
|
||||
if (typeof (opt) === "string")
|
||||
return opt;
|
||||
|
||||
const l = this.nbpViewField ? opt[this.nbpViewField] : opt;
|
||||
if (l === null || l === undefined)
|
||||
return '';
|
||||
return "" + l;
|
||||
}
|
||||
|
||||
private _readOptions() {
|
||||
this._options = this.nbpDataSource ? this.nbpDataSource.arrayData : [];
|
||||
if (!this._options)
|
||||
this._options = [];
|
||||
}
|
||||
|
||||
|
||||
selected(op : any) {
|
||||
return this.optValue(op) === this.ngModel;
|
||||
}
|
||||
|
||||
onChange(event: Event) {
|
||||
if (this._disabled)
|
||||
return;
|
||||
|
||||
const selectElement = event.target as HTMLSelectElement;
|
||||
const val = selectElement.value || '';
|
||||
let sel = null;
|
||||
const arr = this._options;
|
||||
for (let a of arr) {
|
||||
const v = this.optValue(a);
|
||||
const sv = this.optStrValue(a);
|
||||
if (sv === val) {
|
||||
sel = v;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.ngModel = sel;
|
||||
this.ngModelChange.emit(this.ngModel);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<figure [id]="uniqueId"></figure>
|
||||
<div class="row" style="margin-left: 15%;">
|
||||
<div class="col">
|
||||
<div *ngFor="let item of data; let $index = index;" class="nbp-fid-donut-chart-legend">
|
||||
<svg width="20" height="20" style="margin-bottom:-6px;">
|
||||
<rect width="15" height="15" [attr.fill]="colors[$index]"></rect>
|
||||
</svg>
|
||||
<span>{{item[config.labelKey]}} - {{formatter ? formatter(item[config.valueKey]) : item[config.valueKey]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,189 @@
|
||||
import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { NbpBaseComponent } from '@isp/xdce-widget';
|
||||
import * as d3 from 'd3';
|
||||
|
||||
|
||||
export interface NbpFidDonutChartConfig {
|
||||
valueKey: string;
|
||||
labelKey: string;
|
||||
legendKey: string;
|
||||
colorKey?: string;
|
||||
colors?: string[];
|
||||
format?: (value: number) => string;
|
||||
}
|
||||
|
||||
let counter = 0;
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-donut-chart',
|
||||
templateUrl: './nbp-fid-donut-chart.component.html',
|
||||
styleUrls: ['./nbp-fid-donut-chart.component.scss']
|
||||
})
|
||||
export class NbpFidDonutChartComponent extends NbpBaseComponent implements OnInit, AfterViewInit, OnChanges {
|
||||
constructor() {
|
||||
super();
|
||||
this.uniqueId = `nbp-fid-donut-chart-${++counter}`;
|
||||
}
|
||||
|
||||
uniqueId: string = null;
|
||||
|
||||
@Input() config: NbpFidDonutChartConfig = {
|
||||
valueKey: 'valore',
|
||||
labelKey: 'tipo',
|
||||
legendKey: 'name',
|
||||
colorKey: 'fill',
|
||||
colors: null
|
||||
};
|
||||
|
||||
colors: string[] = [
|
||||
'#1F4E79',
|
||||
'#D3D3D3',
|
||||
'#6280a4',
|
||||
'#A9A9A9',
|
||||
'#3CB371',
|
||||
'#FFD700',
|
||||
'#FF6347',
|
||||
'#FF0000'
|
||||
]
|
||||
|
||||
@Input() data: any = [
|
||||
{ name: 'Prodotti E-S-G', fill: '#1F4E79', tipo: 'Strumenti sostenibili', valore: 30 },
|
||||
{ name: 'Prodotti non E-S-G', fill: '#D3D3D3', tipo: 'Strumenti non sostenibili', valore: 40 },
|
||||
{ name: 'Altri prodotti', fill: '#6280a4', tipo: 'Altri strumenti', valore: 20 },
|
||||
{ name: 'aaaaa', fill: '#A9A9A9', tipo: 'xxxxx', valore: 10 },
|
||||
];
|
||||
|
||||
formatter = (value: number): string => {
|
||||
const formatter = new Intl.NumberFormat('it-IT', {
|
||||
style: 'decimal',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
return `${formatter.format(value)} %`;
|
||||
};
|
||||
|
||||
svg: any;
|
||||
margin = { top: 10, right: 30, bottom: 30, left: 30 };
|
||||
width: number = 261;
|
||||
height: number = 140;
|
||||
radius: number = Math.min(this.width, this.height) / 4;
|
||||
d3colors: any;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.formatter = this.config.format || this.formatter;
|
||||
this.setColors();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
console.log('[NbpFidDonutChartComponent] ngAfterViewInit', this);
|
||||
this.createSvg();
|
||||
this.drawChart();
|
||||
}
|
||||
|
||||
setColors(): void {
|
||||
if (this.config.colorKey) {
|
||||
this.colors = this.data.map((d: any, i: number): string => d[this.config.colorKey] ? d[this.config.colorKey] : this.colors[i]);
|
||||
} else if (this.config.colors) {
|
||||
this.colors = this.config.colors;
|
||||
}
|
||||
|
||||
this.d3colors = d3
|
||||
.scaleOrdinal()
|
||||
.domain(this.data.map((d: any) => d[this.config.valueKey].toString()))
|
||||
.range(this.colors);
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['data'] || changes['config']) {
|
||||
this.ngOnInit();
|
||||
this.updateChart();
|
||||
}
|
||||
}
|
||||
|
||||
createSvg(): void {
|
||||
console.log('createSvg', this);
|
||||
this.svg = d3
|
||||
.select(`figure#${this.uniqueId}`)
|
||||
.append('svg')
|
||||
.attr('viewBox', `0 0 ${this.width} 120`)
|
||||
.append('g')
|
||||
.attr(
|
||||
'transform',
|
||||
'translate(' + this.width / 1.9 + ',' + this.height / 2 + ')'
|
||||
);
|
||||
}
|
||||
|
||||
drawChart(): void {
|
||||
const pie = d3
|
||||
.pie<any>()
|
||||
.sort(null)
|
||||
.value((d: any) => Number(d[this.config.valueKey]));
|
||||
|
||||
const data_ready = pie(this.data);
|
||||
|
||||
console.log('data_ready', data_ready);
|
||||
|
||||
const arc = d3
|
||||
.arc()
|
||||
.innerRadius(this.radius * 0.4)
|
||||
.outerRadius(this.radius * 0.7);
|
||||
|
||||
const outerArc = d3
|
||||
.arc()
|
||||
.innerRadius(this.radius * 0.9)
|
||||
.outerRadius(this.radius * 0.9);
|
||||
|
||||
this.svg
|
||||
.selectAll('allSlices')
|
||||
.data(data_ready)
|
||||
.enter()
|
||||
.append('path')
|
||||
.attr('d', arc)
|
||||
.attr('fill', (d: any) => this.d3colors(d.data[this.config.valueKey]))
|
||||
.attr('stroke', 'white')
|
||||
.style('stroke-width', '0px');
|
||||
|
||||
this.svg
|
||||
.selectAll('allPolylines')
|
||||
.data(data_ready)
|
||||
.enter()
|
||||
.append('polyline')
|
||||
.attr('stroke', '#656565')
|
||||
.style('fill', 'none')
|
||||
.attr('stroke-width', 1)
|
||||
.attr('points', (d: any) => {
|
||||
const posA = arc.centroid(d);
|
||||
const posB = outerArc.centroid(d);
|
||||
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
|
||||
posB[0] = this.radius * 0.95 * (midangle < Math.PI ? 1 : -1);
|
||||
return [posA, posB];
|
||||
});
|
||||
|
||||
// Draw labels
|
||||
this.svg
|
||||
.selectAll('allLabels')
|
||||
.data(data_ready)
|
||||
.enter()
|
||||
.append('text')
|
||||
.style('fill', '#656565')
|
||||
.text((d: any) => `${d.data[this.config.labelKey]} (${this.formatter(d.data[this.config.valueKey])})`)
|
||||
.attr('font-size', '6px')
|
||||
.attr('transform', (d: any) => {
|
||||
const pos = outerArc.centroid(d);
|
||||
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
|
||||
pos[0] = this.radius * 0.99 * (midangle < Math.PI ? 1 : -1);
|
||||
return 'translate(' + pos + ')';
|
||||
})
|
||||
.style('text-anchor', (d: any) => {
|
||||
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
|
||||
return midangle < Math.PI ? 'start' : 'end';
|
||||
});
|
||||
}
|
||||
|
||||
private updateChart() {
|
||||
d3.select(`#${this.uniqueId}`).selectAll("*").remove();
|
||||
this.createSvg();
|
||||
this.drawChart();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
|
||||
<!-- <table class="pyramid-table">
|
||||
|
||||
<tbody>
|
||||
<tr *ngFor="let item of pyramidData; let i = index">
|
||||
<td class="label-column" [ngStyle]="{'background': item.color}">{{ item.label.charAt(0) }}</td>
|
||||
<td [ngStyle]="{ 'clip-path': getClipPath(i, pyramidData.length), 'background': item.color }">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table> -->
|
||||
|
||||
<table class="pyramid-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let column of pyramidColumns">
|
||||
{{ column.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="pyramid-body">
|
||||
<tr *ngFor="let item of pyramidData; let i = index">
|
||||
<td *ngFor="let column of pyramidColumns">
|
||||
<ng-container *ngIf="column.value === config.squareValue; else pyramidColumn">
|
||||
<span
|
||||
[ngStyle]="{ 'background': item[config.colorKey], 'color': 'white', 'padding': '5px', 'display': 'inline-block', 'text-align': 'center', 'width': '20px' }">
|
||||
{{ item[column.value] | slice:0:1 }}
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-template #pyramidColumn>
|
||||
<span *ngIf="column.value === 'pyramidSliceValue'; else normalColumn"
|
||||
[ngStyle]="{ 'clip-path': getClipPath(i, pyramidData.length), 'background':item[config.colorKey], 'display': 'block', 'height': '30px', 'width': '150px' }">
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template #normalColumn>
|
||||
{{ column.format(item[column.value]) }}
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot *ngIf="!!config.footerItem === true">
|
||||
<tr>
|
||||
<td *ngFor="let column of pyramidColumns">
|
||||
<ng-container *ngIf="config.footerItem[column.value] !== undefined">
|
||||
{{ column.format(config.footerItem[column.value]) }}
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
.pyramid-table {
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
|
||||
.pyramid-body tr {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
import { Component, Input, SimpleChanges } from '@angular/core';
|
||||
import { NbpBaseComponent } from '@isp/xdce-widget';
|
||||
|
||||
export interface NbpFidPyramidChartColumn {
|
||||
value: string;
|
||||
label: string;
|
||||
format: (val: number) => string;
|
||||
}
|
||||
|
||||
|
||||
export interface NbpFidPyramidChartConfig {
|
||||
squareValue: string;
|
||||
colorKey: string;
|
||||
footerItem: any;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-pyramid-chart',
|
||||
templateUrl: './nbp-fid-pyramid-chart.component.html',
|
||||
styleUrls: ['./nbp-fid-pyramid-chart.component.scss']
|
||||
})
|
||||
export class NbpFidPyramidChartComponent extends NbpBaseComponent {
|
||||
constructor() {
|
||||
super()
|
||||
}
|
||||
|
||||
@Input() columns: NbpFidPyramidChartColumn[] = [
|
||||
{ value: 'modello', label: 'Modello', format: (val: number) => val.toFixed(2) },
|
||||
{ value: 'attuale', label: 'Attuale', format: (val: number) => val.toFixed(2) },
|
||||
{ value: 'controvalore', label: 'Controvalore', format: (val: number) => val.toFixed(2) },
|
||||
];
|
||||
|
||||
@Input() data: any[] = [
|
||||
{ area: 'Exxxx', modello: 5.00, attuale: 1.04, controvalore: 502.37, colorKey: '#F44336' },
|
||||
{ area: 'Ixxxx', modello: 75.00, attuale: 95.92, controvalore: 46258.92, colorKey: '#FF9800' },
|
||||
{ area: 'Pxxx', modello: 0.00, attuale: 0.00, controvalore: 0.00, colorKey: '#FFC107' },
|
||||
{ area: 'Rxxx', modello: 10.00, attuale: 0.00, controvalore: 0.00, colorKey: '#3F51B5' },
|
||||
{ area: 'La', modello: 10.00, attuale: 3.04, controvalore: 1469.30, colorKey: '#673AB7' },
|
||||
];
|
||||
|
||||
@Input() config: NbpFidPyramidChartConfig = {
|
||||
squareValue: 'area',
|
||||
// colors: [],
|
||||
colorKey: 'colorKey',
|
||||
footerItem: {
|
||||
area: 'Patrimonio Fideuram',
|
||||
modello: 100.00,
|
||||
attuale: 100.00,
|
||||
controvalore: 48230.59,
|
||||
}
|
||||
};
|
||||
|
||||
pyramidColumns: any[] = [];
|
||||
pyramidData: any[] = [];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.updateChart();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['data'] || changes['config']) {
|
||||
this.updateChart();
|
||||
}
|
||||
}
|
||||
|
||||
updateChart(): void {
|
||||
this.pyramidColumns = [
|
||||
{ value: 'area', label: 'Area', format: (val: number) => val.toString() },
|
||||
{ value: 'pyramidSliceValue', label: '' }
|
||||
].concat(this.columns);
|
||||
|
||||
let pyramidSliceValue = 90;
|
||||
this.pyramidData = this.data.map(item => {
|
||||
let pyramidVal = pyramidSliceValue;
|
||||
pyramidSliceValue += 30;
|
||||
return {
|
||||
pyramidSliceValue: pyramidVal,
|
||||
...item
|
||||
};
|
||||
});
|
||||
|
||||
this.pyramidData.sort((a, b) => a.pyramidSliceValue - b.pyramidSliceValue);
|
||||
}
|
||||
|
||||
getClipPath(index: number, total: number): string {
|
||||
const baseWidth = 100;
|
||||
const step = baseWidth / total;
|
||||
|
||||
const widthOfTop = baseWidth - step * (total - (index + 1));
|
||||
const topLeftTop = (baseWidth - widthOfTop) / 2;
|
||||
const topRightTop = 100 - topLeftTop;
|
||||
const currentWidth = baseWidth - step * (total - 1 - index);
|
||||
const previousWidth = baseWidth - step * (total - index);
|
||||
|
||||
const topLeft = (baseWidth - previousWidth) / 2;
|
||||
const topRight = 100 - topLeft;
|
||||
const bottomLeft = (baseWidth - currentWidth) / 2;
|
||||
const bottomRight = 100 - bottomLeft;
|
||||
|
||||
if (index === 0) {
|
||||
return `polygon(50% 0%, ${topLeftTop}% 100%, ${topRightTop}% 100%)`;
|
||||
} else {
|
||||
return `polygon(${topLeft}% 0%, ${topRight}% 0%, ${bottomRight}% 100%, ${bottomLeft}% 100%)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="nbp-fid-side-popup-wrapper">
|
||||
<div class="nbp-fid-side-popup-overlay" *ngIf="!hideOverlay" [class.visible]="isOpen" [attr.aria-hidden]="!isOpen"
|
||||
(click)="onOverlayClick($event)">
|
||||
</div>
|
||||
|
||||
<div class="nbp-fid-side-popup-content" [class.open]="isOpen" [attr.aria-hidden]="!isOpen" role="dialog" aria-modal="true"
|
||||
[attr.aria-labelledby]="'popup-title-' + id" [ngClass]="{
|
||||
'nbp-size-sm': nbpSize === _size.SM,
|
||||
'nbp-size-md': nbpSize === _size.MD,
|
||||
'nbp-size-lg': nbpSize === _size.LG,
|
||||
'nbp-style-default': nbpStyle === _style.DEFAULT,
|
||||
'nbp-style-primary': nbpStyle === _style.PRIMARY,
|
||||
'nbp-style-secondary': nbpStyle === _style.SECONDARY
|
||||
}" (click)="$event.stopPropagation()">
|
||||
|
||||
<div class="nbp-side-popup-header">
|
||||
<h3 *ngIf="nbpTitle" [id]="'popup-title-' + id">{{nbpTitle}}</h3>
|
||||
<button class="nbp-close-button" *ngIf="!hideCloseButton" (click)="close()" aria-label="Chiudi"
|
||||
[attr.aria-controls]="'popup-content-' + id">
|
||||
|
||||
<span class="ispv2-font-xmark"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nbp-side-popup-body" [id]="'popup-content-' + id">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="nbp-side-popup-footer" *ngIf="nbpButtons && nbpButtons.length > 0">
|
||||
<nbp-button *ngFor="let btn of nbpButtons" [nbpLabel]="btn.label" [nbpStyle]="btn.style || _style.DEFAULT"
|
||||
[disabled]="btn.disabled" [nbpIcon]="btn.icon" [tabindex]="btn.tabindex"
|
||||
[alternativeAriaLabel]="btn.alternativeAriaLabel" [invertIconPosition]="btn.invertIconPosition"
|
||||
[iconAriaLabel]="btn.iconAriaLabel" (nbpClick)="onButtonClick(btn)">
|
||||
</nbp-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,97 @@
|
||||
.nbp-fid-side-popup-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
|
||||
// Colors
|
||||
--nbp-fid-side-popup-text-color: #656565;
|
||||
--nbp-fid-side-popup-background-color: #f5f7fa;
|
||||
|
||||
// Typography
|
||||
--nbp-fid-side-popup-font-size: 12px;
|
||||
}
|
||||
|
||||
.nbp-fid-side-popup-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
|
||||
&.visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nbp-fid-side-popup-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
bottom: 0;
|
||||
background: var(--nbp-fid-side-popup-background-color);
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: auto;
|
||||
transition: right 0.3s ease-in-out;
|
||||
|
||||
&.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.nbp-size-sm {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&.nbp-size-md {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
&.nbp-size-lg {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
// Styles
|
||||
// &.nbp-style-default { border-left: 4px solid var(--nbp-fid-side-popup-default-color); }
|
||||
// &.nbp-style-primary { border-left: 4px solid var(--nbp-fid-side-popup-primary-color); }
|
||||
// &.nbp-style-warning { border-left: 4px solid var(--nbp-fid-side-popup-warning-color); }
|
||||
// &.nbp-style-error { border-left: 4px solid var(--nbp-fid-side-popup-error-color); }
|
||||
}
|
||||
|
||||
.nbp-fid-side-popup-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid var(--nbp-fid-side-popup-border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nbp-fid-side-popup-body {
|
||||
padding: 15px;
|
||||
height: calc(100% - 120px);
|
||||
overflow-y: auto;
|
||||
color: var(--nbp-fid-side-popup-text-color);
|
||||
font-size: var(--nbp-fid-side-popup-font-size);
|
||||
}
|
||||
|
||||
.nbp-fid-side-popup-footer {
|
||||
padding: 15px;
|
||||
border-top: 1px solid var(--nbp-fid-side-popup-border-color);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nbp-close-button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
color: var(--nbp-fid-side-popup-text-color);
|
||||
}
|
||||
@ -0,0 +1,109 @@
|
||||
import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
|
||||
import { NbpBaseComponent, NbpStyle, NbpSize, INbpButton } from '@isp/xdce-widget/base';
|
||||
import { ISidePopup, ISidePopupButton } from './nbp-fid-side-popup.interfaces';
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-side-popup',
|
||||
templateUrl: './nbp-fid-side-popup.component.html',
|
||||
styleUrls: ['./nbp-fid-side-popup.component.scss']
|
||||
})
|
||||
export class NbpFidSidePopupComponent extends NbpBaseComponent implements ISidePopup {
|
||||
private static counter = 0;
|
||||
readonly id = `side-popup-${NbpFidSidePopupComponent.counter++}`;
|
||||
|
||||
_style = NbpStyle;
|
||||
_size = NbpSize;
|
||||
|
||||
private _isOpen = false;
|
||||
private _nbpTitle?: string;
|
||||
private _nbpSize: NbpSize = NbpSize.MD;
|
||||
private _nbpStyle: NbpStyle = NbpStyle.DEFAULT;
|
||||
private _nbpButtons: ISidePopupButton[] = [];
|
||||
private _hideOverlay = false;
|
||||
private _hideCloseButton = false;
|
||||
|
||||
@Input()
|
||||
set hideOverlay(value: boolean) {
|
||||
this._hideOverlay = value;
|
||||
}
|
||||
get hideOverlay(): boolean {
|
||||
return this._hideOverlay;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set hideCloseButton(value: boolean) {
|
||||
this._hideCloseButton = value;
|
||||
}
|
||||
get hideCloseButton(): boolean {
|
||||
return this._hideCloseButton;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set isOpen(value: boolean) {
|
||||
this._isOpen = value;
|
||||
}
|
||||
get isOpen(): boolean {
|
||||
return this._isOpen;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set nbpTitle(value: string) {
|
||||
this._nbpTitle = value;
|
||||
}
|
||||
get nbpTitle(): string {
|
||||
return this._nbpTitle;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set nbpSize(value: NbpSize) {
|
||||
this._nbpSize = value;
|
||||
}
|
||||
get nbpSize(): NbpSize {
|
||||
return this._nbpSize;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set nbpStyle(value: NbpStyle) {
|
||||
this._nbpStyle = value;
|
||||
}
|
||||
get nbpStyle(): NbpStyle {
|
||||
return this._nbpStyle;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set nbpButtons(value: ISidePopupButton[]) {
|
||||
this._nbpButtons = value;
|
||||
}
|
||||
get nbpButtons(): ISidePopupButton[] {
|
||||
return this._nbpButtons;
|
||||
}
|
||||
|
||||
@Output() isOpenChange = new EventEmitter<boolean>();
|
||||
@Output() nbpOnButtonClick = new EventEmitter<INbpButton>();
|
||||
@Output() closed = new EventEmitter<void>();
|
||||
|
||||
@HostListener('document:keydown.escape')
|
||||
handleEscape() {
|
||||
if (this.isOpen) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
this.isOpenChange.emit(false);
|
||||
this.closed.emit();
|
||||
}
|
||||
|
||||
onOverlayClick(event: MouseEvent) {
|
||||
if (event.target === event.currentTarget) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
onButtonClick(button: ISidePopupButton) {
|
||||
if (!button.disabled) {
|
||||
this.nbpOnButtonClick.emit(button);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import { NbpStyle, NbpSize, INbpButton } from '@isp/xdce-widget/base';
|
||||
|
||||
export interface ISidePopupButton extends INbpButton {
|
||||
layout?: string;
|
||||
}
|
||||
|
||||
export interface ISidePopup {
|
||||
isOpen: boolean;
|
||||
title?: string;
|
||||
size?: NbpSize;
|
||||
style?: NbpStyle;
|
||||
buttons?: ISidePopupButton[];
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
nbp-fid-table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { AgGridAngular } from 'ag-grid-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'nbp-fid-table',
|
||||
template: '<ng-container></ng-container>',
|
||||
styleUrls: ['./nbp-fid-table.component.scss']
|
||||
})
|
||||
export class NbpFidTableComponent extends AgGridAngular {
|
||||
|
||||
}
|
||||
@ -0,0 +1,274 @@
|
||||
@mixin a11y-on-focus-corporate-borders($yellow-offset: -4px, $black-offset: -6px) {
|
||||
&:focus-visible {
|
||||
position: relative;
|
||||
&::before{
|
||||
background: transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
top: $yellow-offset;
|
||||
left: $yellow-offset;
|
||||
right: $yellow-offset;
|
||||
bottom: $yellow-offset;
|
||||
border: 2px solid #fff599;
|
||||
}
|
||||
&::after{
|
||||
background: transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
top: $black-offset;
|
||||
left: $black-offset;
|
||||
right: $black-offset;
|
||||
bottom: $black-offset;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin a11y-on-focus-retail-borders($yellow-offset: -4px, $black-offset: -6px) {
|
||||
&:focus-visible {
|
||||
position: relative;
|
||||
&::before{
|
||||
background: transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
top: $yellow-offset;
|
||||
left: $yellow-offset;
|
||||
right: $yellow-offset;
|
||||
bottom: $yellow-offset;
|
||||
border: 2px solid #FCEE50;
|
||||
}
|
||||
&::after{
|
||||
background: transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
top: $black-offset;
|
||||
left: $black-offset;
|
||||
right: $black-offset;
|
||||
bottom: $black-offset;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:host(.isp-corporate-mode-a11y-wrapper) {
|
||||
.isp-tab-toggle {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 0.875rem;
|
||||
max-width: none;
|
||||
|
||||
.tabs-container {
|
||||
border-collapse: separate;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.tab-element {
|
||||
vertical-align: middle;
|
||||
font-size: 0.5625rem;
|
||||
font-weight: bold;
|
||||
height: 2.25rem;
|
||||
width: auto;
|
||||
min-width: 5rem;
|
||||
max-width: 13.75rem;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
&:focus-visible {
|
||||
&:not(.disabled) {
|
||||
@include a11y-on-focus-corporate-borders;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.35;
|
||||
|
||||
.tab-title {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:not(.first).active {
|
||||
&.inner+:not(.active) {
|
||||
//border-left-color:transparent;
|
||||
border-left: none;
|
||||
padding-left: 21px;
|
||||
|
||||
.tab-title {}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.last):not(.active) {
|
||||
//border-right-color:transparent;
|
||||
border-right: none;
|
||||
padding-right: 21px;
|
||||
|
||||
.tab-title {}
|
||||
}
|
||||
|
||||
&.first.active {
|
||||
&+.last:not(.active) {
|
||||
//border-left-color:transparent;
|
||||
border-left: none;
|
||||
padding-left: 21px;
|
||||
|
||||
.tab-title {}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: none;
|
||||
height: 0.875rem;
|
||||
width: auto;
|
||||
min-width: 2.5rem;
|
||||
max-width: 11.125rem;
|
||||
font-weight: normal;
|
||||
line-height: 0.875rem;
|
||||
|
||||
&.active-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-truncate-multiline {
|
||||
text-transform: none;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-shadow: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@include a11y-on-focus-corporate-borders();
|
||||
&:focus-visible {
|
||||
position: relative;
|
||||
z-index: 31;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.isp-tab-toggle {
|
||||
display: table;
|
||||
max-width: 59.6875rem;
|
||||
|
||||
.tabs-container {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.tab-element {
|
||||
display: table-cell;
|
||||
height: 3.125em;
|
||||
width: auto;
|
||||
max-width: 15rem;
|
||||
min-width: 14.375rem;
|
||||
text-align: center;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
vertical-align: middle;
|
||||
padding: 0px 19px;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
}
|
||||
i {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.tab-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-weight: 600;
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
line-height: 0.875rem;
|
||||
|
||||
span {
|
||||
font-size: 0.75em;
|
||||
width: max-content;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-truncate-multiline {
|
||||
text-transform: none;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-shadow: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.text-truncate-multiline {
|
||||
text-transform: none;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-shadow: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:not(.disabled) {
|
||||
@include a11y-on-focus-retail-borders;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.centre {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -0,0 +1,133 @@
|
||||
:host(.isp-corporate-mode-wrapper) {
|
||||
.isp-tab-toggle {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: 0.875rem;
|
||||
max-width: none;
|
||||
.tabs-container {
|
||||
border-collapse: separate;
|
||||
.tab-element {
|
||||
vertical-align: middle;
|
||||
font-size:0.75rem;
|
||||
font-weight:bold;
|
||||
height: 2.1875rem;
|
||||
width: auto;
|
||||
min-width: 5rem;
|
||||
max-width: 9rem;
|
||||
padding: 0.625rem 1.25rem 0.625rem 1.25rem;
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
.tab-title {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&:not(.first).active {
|
||||
&.inner+:not(.active) {
|
||||
//border-left-color:transparent;
|
||||
border-left: none;
|
||||
padding-left: 1.3125rem;
|
||||
.tab-title {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:not(.last):not(.active) {
|
||||
//border-right-color:transparent;
|
||||
border-right:none;
|
||||
padding-right: 1.3125rem;
|
||||
.tab-title {
|
||||
|
||||
}
|
||||
}
|
||||
&.first.active {
|
||||
&+.last:not(.active) {
|
||||
//border-left-color:transparent;
|
||||
border-left: none;
|
||||
padding-left: 1.3125rem;
|
||||
.tab-title {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 0.125rem 0 0 0.125rem;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
}
|
||||
i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.tab-title {
|
||||
text-transform: none;
|
||||
height: 0.75rem;
|
||||
width: auto;
|
||||
min-width: 2.5rem;
|
||||
max-width: 6.5rem;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight:bold;
|
||||
line-height: 0.75rem;
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isp-tab-toggle {
|
||||
display: table;
|
||||
max-width: 59.6875rem;
|
||||
.tabs-container {
|
||||
border-collapse: collapse;
|
||||
|
||||
.tab-element {
|
||||
display: table-cell;
|
||||
height: 3.125em;
|
||||
width: 15rem;
|
||||
text-align: center;
|
||||
border-width: 0.0625rem;
|
||||
border-style: solid;
|
||||
padding: 0.3125rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
width: 14.375rem;
|
||||
font-weight: 600;
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
span {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centre {
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
import { Component, Input, HostBinding, Injector, TemplateRef, ElementRef } from '@angular/core';
|
||||
import { NbpBaseComponent } from '@isp/xdce-widget/base'
|
||||
|
||||
@Component({
|
||||
template: '<ng-container *ngIf="active"><ng-container *ngTemplateOutlet="wngContent"></ng-container></ng-container>',
|
||||
styleUrls: ['./nbp-fid-tab-toggle.component.a11y.scss']
|
||||
})
|
||||
export class NbpFidToggleTabComponentA11Y extends NbpBaseComponent {
|
||||
|
||||
protected isA11Y = true;
|
||||
|
||||
wngContent: TemplateRef<any>;
|
||||
|
||||
@Input() tabTemplate: TemplateRef<any> = null;
|
||||
|
||||
/**
|
||||
* Titolo del tab
|
||||
*/
|
||||
@Input() title = '';
|
||||
|
||||
/**
|
||||
* Booleano che indica se il tab è selezionato inizialmente
|
||||
*/
|
||||
@Input() active = false;
|
||||
|
||||
/**
|
||||
* Booleano che indica se il tab è disabilitato
|
||||
*/
|
||||
@Input() disabled = false;
|
||||
|
||||
/**
|
||||
* Id del componente
|
||||
*/
|
||||
private _id: string = undefined;
|
||||
@Input()
|
||||
set id(value: string) {
|
||||
this._id = value;
|
||||
this.er.nativeElement.id = value;
|
||||
}
|
||||
get id(): string {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
|
||||
constructor(injector : Injector) {
|
||||
super(injector);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import { Component, Injector, Input, TemplateRef } from '@angular/core';
|
||||
import { NbpBaseComponent } from '@isp/xdce-widget/base';
|
||||
|
||||
@Component({
|
||||
template: '<ng-container *ngIf="active"><ng-container *ngTemplateOutlet="wngContent"></ng-container></ng-container>',
|
||||
styleUrls: ['./nbp-fid-tab-toggle.component.noa11y.scss']
|
||||
})
|
||||
export class NbpFidToggleTabComponentNOA11Y extends NbpBaseComponent {
|
||||
|
||||
wngContent: TemplateRef<any>;
|
||||
|
||||
@Input() tabTemplate: TemplateRef<any> = null;
|
||||
|
||||
/**
|
||||
* Titolo del tab
|
||||
*/
|
||||
@Input() title = '';
|
||||
|
||||
/**
|
||||
* Booleano che indica se il tab è selezionato inizialmente
|
||||
*/
|
||||
@Input() active = false;
|
||||
|
||||
/**
|
||||
* Booleano che indica se il tab è disabilitato
|
||||
*/
|
||||
@Input() disabled = false;
|
||||
|
||||
/**
|
||||
* Id del componente
|
||||
*/
|
||||
private _id: string = undefined;
|
||||
@Input()
|
||||
set id(value: string) {
|
||||
this._id = value;
|
||||
this.er.nativeElement.id = value;
|
||||
}
|
||||
get id(): string {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
constructor(injector : Injector) {
|
||||
super(injector);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
|
||||
import { Component, Input, TemplateRef, Type, ViewChild } from '@angular/core';
|
||||
|
||||
import { NbpBaseComponentA11YWrapper } from '@isp/xdce-widget/base';
|
||||
|
||||
import { NbpFidToggleTabComponentA11Y } from './nbp-fid-toggle-tab.component.a11y';
|
||||
import { NbpFidToggleTabComponentNOA11Y } from './nbp-fid-toggle-tab.component.noa11y';
|
||||
|
||||
|
||||
@Component({
|
||||
template: '<ng-container #componentContainer></ng-container><ng-template #wngContent><ng-content></ng-content></ng-template>',
|
||||
selector: "nbp-fid-toggle-tab",
|
||||
|
||||
})
|
||||
export class NbpFidToggleTabComponent extends NbpBaseComponentA11YWrapper<NbpFidToggleTabComponentA11Y, NbpFidToggleTabComponentNOA11Y> {
|
||||
|
||||
@ViewChild('wngContent')
|
||||
protected wngContent: TemplateRef<any>;
|
||||
|
||||
get A11Ycomponent(): Type<NbpFidToggleTabComponentA11Y> {
|
||||
return NbpFidToggleTabComponentA11Y;
|
||||
}
|
||||
|
||||
get noA11Ycomponent(): Type<NbpFidToggleTabComponentNOA11Y> {
|
||||
return NbpFidToggleTabComponentNOA11Y;
|
||||
}
|
||||
|
||||
|
||||
private _title: string = undefined;
|
||||
@Input()
|
||||
set title(value: string) {
|
||||
this._title = value;
|
||||
if (this.component) {
|
||||
this.component.title = value;
|
||||
}
|
||||
}
|
||||
get title(): string {
|
||||
return this._title;
|
||||
}
|
||||
|
||||
|
||||
private _active: boolean = undefined;
|
||||
@Input()
|
||||
set active(value: boolean) {
|
||||
this._active = value;
|
||||
if (this.component) {
|
||||
this.component.active = value;
|
||||
}
|
||||
}
|
||||
get active(): boolean {
|
||||
return this._active;
|
||||
}
|
||||
|
||||
|
||||
private _disabled: boolean = undefined;
|
||||
@Input()
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = value;
|
||||
if (this.component) {
|
||||
this.component.disabled = value;
|
||||
}
|
||||
}
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
|
||||
private _id: string = undefined;
|
||||
@Input()
|
||||
set id(value: string) {
|
||||
this._id = value;
|
||||
if (this.component) {
|
||||
this.component.id = value;
|
||||
}
|
||||
}
|
||||
get id(): string {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
private _tabTemplate: TemplateRef<any> = null;
|
||||
@Input()
|
||||
set tabTemplate(value: TemplateRef<any>) {
|
||||
this._tabTemplate = value;
|
||||
if (this.component) {
|
||||
this.component.tabTemplate = value;
|
||||
}
|
||||
}
|
||||
get tabTemplate(): TemplateRef<any> {
|
||||
return this._tabTemplate;
|
||||
}
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
super.ngOnInit();
|
||||
this.component.wngContent = this.wngContent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
<div #tabsContainer class="isp-tab-toggle"
|
||||
role="tablist"
|
||||
[attr.id]="'toggletablist-' + tabBarId"
|
||||
[ngClass]="{
|
||||
'isp-default': nbpStyle === _style.DEFAULT || _style.PRIMARY || _style.SECONDARY }">
|
||||
|
||||
<div class="tabs-container">
|
||||
<div *ngFor="let tab of tabs; let i = index; first as isFirst; last as isLast" class="tab-element"
|
||||
[class.disabled]="tab.disabled"
|
||||
[class.active]="tab.active"
|
||||
[class.first]="isFirst"
|
||||
[class.last]="isLast"
|
||||
[class.inner]="!(isFirst || isLast)"
|
||||
[attr.tabindex]="tab.active ? '0' : '-1'"
|
||||
[attr.id]="'toggletab-' + tabBarId + '-' + i"
|
||||
(focus)="focusSpan(i, tab.disabled)"
|
||||
(focusout)="focusoutSpan(i, tab.disabled)"
|
||||
(ispClick)="tabClicked($event, tab, i)"
|
||||
(keydown)="handleTablistKeydown($event, i)"
|
||||
[attr.aria-disabled]="tab.disabled"
|
||||
[attr.aria-selected]="tab.active ? true : false"
|
||||
[attr.aria-label]="tab.title"
|
||||
[attr.aria-controls]="'toggletab-tabpanel-' + tabBarId + '-' + i"
|
||||
role="tab">
|
||||
<div class="tab-title"
|
||||
[ngClass]="{'active-title': tab.active}"
|
||||
role="tabpanel"
|
||||
[attr.type]="'button'">
|
||||
<span #spanWithTooltip class="text-truncate-multiline"
|
||||
[ngClass]="{'disabled': tab.disabled}"
|
||||
[nbpEllipsisWithTooltip]="tab.title"
|
||||
[attr.id]="'toggletab-span-' + i">
|
||||
<ng-container *ngIf="tab.tabTemplate">
|
||||
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!tab.tabTemplate">
|
||||
<span>{{tab.title}}</span>
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div #tabPanels role="tabpanel">
|
||||
<!-- <ng-content [attr.role]="'tabpanel'"></ng-content> -->
|
||||
<ng-container *ngTemplateOutlet="wngContent"></ng-container>
|
||||
</div>
|
||||
@ -0,0 +1,257 @@
|
||||
import {
|
||||
Component,
|
||||
ContentChildren,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Injector,
|
||||
Input,
|
||||
Output,
|
||||
QueryList,
|
||||
TemplateRef,
|
||||
ViewChild,
|
||||
ViewChildren
|
||||
} from '@angular/core';
|
||||
import { LoggerService } from '@isp/xdce-arch-core-base';
|
||||
import { NbpBaseComponent, NbpStyle, WidgetMode } from '@isp/xdce-widget/base';
|
||||
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
|
||||
|
||||
let nextId = 0;
|
||||
|
||||
@Component({
|
||||
templateUrl: './nbp-fid-toggle-tabset.component.a11y.html',
|
||||
styleUrls: ['./nbp-fid-tab-toggle.component.a11y.scss']
|
||||
})
|
||||
export class NbpFidToggleTabsetComponentA11Y extends NbpBaseComponent {
|
||||
protected isA11Y = true;
|
||||
wngContent: TemplateRef<any>;
|
||||
|
||||
/**
|
||||
* (Opzionale) Enum per impostare lo stile del pulsante.
|
||||
* "DEFAULT" | "PRIMARY" | "SECONDRY"
|
||||
* Valore default: "DEFAULT"
|
||||
*/
|
||||
@Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;
|
||||
|
||||
/**
|
||||
* (Opzionale) String che definisce un identificativo univoco del tab bar
|
||||
* Utilizzato per gli attributi wai-aria
|
||||
*/
|
||||
@Input() tabBarId = `${++nextId}`;
|
||||
|
||||
/**
|
||||
* (Opzionale) input contenente il nome accessibile della tab bar
|
||||
*/
|
||||
@Input('aria-label') public ariaLabel: string;
|
||||
/**
|
||||
* (Opzionale) input contenente l'id dell'elemento DOM da associare come nome accessibile alla tab bar.
|
||||
* Se valorizzato, {@link ariaLabel} sara' ignorato dallo screen-reader.
|
||||
*/
|
||||
@Input('aria-labelledby') public ariaLabelledBy: string;
|
||||
|
||||
_selectedTabIndex = 0;
|
||||
/**
|
||||
* Indice della scheda selezionata
|
||||
*/
|
||||
@Input()
|
||||
set nbpSelectedIndex(value: number) {
|
||||
if (this._selectedTabIndex !== value) {
|
||||
this._selectedTabIndex = value;
|
||||
this.nbpSelectedIndexChange.emit(this._selectedTabIndex);
|
||||
}
|
||||
}
|
||||
get nbpSelectedIndex(): number {
|
||||
return this._selectedTabIndex;
|
||||
}
|
||||
_style: any = NbpStyle;
|
||||
// @Input() vertical ;
|
||||
@Output() onSelect = new EventEmitter();
|
||||
@Output() nbpSelectedIndexChange = new EventEmitter<number>();
|
||||
|
||||
@ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;
|
||||
|
||||
@ViewChild('tabsContainer') tabsContainer: ElementRef;
|
||||
@ViewChild('tabPanels', { read: ElementRef }) tabPanels: ElementRef;
|
||||
@ViewChildren('spanWithTooltip') spanRefs: QueryList<ElementRef>;
|
||||
|
||||
|
||||
ngAfterContentInit() {
|
||||
const actives = this.tabs.filter(t => t.active);
|
||||
if (actives.length > 1) {
|
||||
this.loggerService.error(`Multiple active tabs set 'active'`);
|
||||
} else if (!actives.length && this.tabs.length) {
|
||||
this.tabs.first.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (this.tabPanels && this.tabPanels.nativeElement) {
|
||||
const tabs: HTMLCollection = this.tabPanels.nativeElement.children;
|
||||
const tabsArray = Array.from(tabs);
|
||||
tabsArray.forEach((tab, index) => {
|
||||
tab.id = `toggletab-tabpanel-${this.tabBarId}-${index}`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
focusSpan(index: string, disabled: boolean): void {
|
||||
const spanId: string = 'toggletab-span-' + index;
|
||||
const spanRef = this.spanRefs.find(ref => ref.nativeElement.id === spanId);
|
||||
if (spanRef && !disabled) {
|
||||
spanRef.nativeElement.dispatchEvent(new Event('focusin'));
|
||||
}
|
||||
}
|
||||
|
||||
focusoutSpan(index: string, disabled: boolean): void {
|
||||
const spanId: string = 'toggletab-span-' + index;
|
||||
const spanRef = this.spanRefs.find(ref => ref.nativeElement.id === spanId);
|
||||
if (spanRef && !disabled) {
|
||||
spanRef.nativeElement.dispatchEvent(new Event('focusout'));
|
||||
}
|
||||
}
|
||||
|
||||
tabClicked(event: any, tab: NbpFidToggleTabComponent, index: number) {
|
||||
event.preventDefault();
|
||||
|
||||
if (tab.disabled) {
|
||||
return;
|
||||
}
|
||||
this.tabs.forEach(element => element.active = false);
|
||||
tab.active = true;
|
||||
this.selectTab(index, tab.disabled);
|
||||
this.onSelect.emit(tab);
|
||||
}
|
||||
|
||||
selectTab(index: number, disabledTab: boolean) {
|
||||
if (this._selectedTabIndex !== index && !disabledTab) {
|
||||
this.nbpSelectedIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
constructor(private loggerService: LoggerService, injector: Injector) {
|
||||
super(injector);
|
||||
}
|
||||
isCorporate() {
|
||||
return WidgetMode.CORPORATE === this.widgetMode;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Metodo per la navigazione da tastiera e l'attivazione del focus tra le varie tabs.
|
||||
* Lettura al keydown degli eventi ArrowLeft e ArrowRight per spostarsi a sinistra e a destra tra le tab;
|
||||
* Home e End per passare alla prima e ultima tab.
|
||||
*/
|
||||
handleTablistKeydown(event: KeyboardEvent, currentTabIndex: number) {
|
||||
let nextTabIndex: number = undefined;
|
||||
const nbpItemsLength: number = this.tabs.length;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowLeft':
|
||||
event.preventDefault();
|
||||
nextTabIndex = this.getLeftTabIndex(event, currentTabIndex, nbpItemsLength);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
event.preventDefault();
|
||||
nextTabIndex = this.getRightTabIndex(event, currentTabIndex, nbpItemsLength);
|
||||
break;
|
||||
case 'Home':
|
||||
event.preventDefault();
|
||||
nextTabIndex = this.getFirstTabIndex(event, 0, nbpItemsLength);
|
||||
break;
|
||||
case 'End':
|
||||
event.preventDefault();
|
||||
nextTabIndex = this.getLastTabIndex(event, nbpItemsLength - 1, nbpItemsLength);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (nextTabIndex !== undefined) {
|
||||
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
|
||||
if (nextTabElement) {
|
||||
nextTabElement.focus();
|
||||
this.scrollIntoViewIfNeeded(nextTabElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Metodo per passare al tab a sinistra,
|
||||
* Se currentTabIndex è il primo tab della tablist il nextTabIndex ricavato sarà l'ultimo a destra
|
||||
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
|
||||
* ricavando il primo tab a sinistra selezionabile
|
||||
*/
|
||||
private getLeftTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
|
||||
let nextTabIndex: number = (currentTabIndex - 1 + nbpItemsLength) % nbpItemsLength;
|
||||
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
|
||||
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
|
||||
return nextTabIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metodo per passare al tab a destra,
|
||||
* Se currentTabIndex è l'ultimo tab della tablist il nextTabIndex ricavato sarà l'ultimo a sinistra
|
||||
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
|
||||
* ricavando il primo tab a destra selezionabile
|
||||
*/
|
||||
private getRightTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
|
||||
let nextTabIndex: number = (currentTabIndex + 1) % nbpItemsLength;
|
||||
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
|
||||
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
|
||||
return nextTabIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metodo per passare al primo tab a sinistra,
|
||||
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
|
||||
* ricavando il tab più a sinistra selezionabile
|
||||
*/
|
||||
private getFirstTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
|
||||
let nextTabIndex: number = currentTabIndex;
|
||||
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
|
||||
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
|
||||
return nextTabIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metodo per passare all'ultimo tab a sinistra,
|
||||
* Il metodo invoca checkTabDisabled per controllare se nextTabIndex sia disabled,
|
||||
* ricavando il tab più a destra selezionabile
|
||||
*/
|
||||
private getLastTabIndex(event: KeyboardEvent, currentTabIndex: number, nbpItemsLength: number): number {
|
||||
let nextTabIndex: number = currentTabIndex;
|
||||
let nextTabElement = document.getElementById(`toggletab-${this.tabBarId}-${nextTabIndex}`);
|
||||
nextTabIndex = this.checkTabDisabled(event, nextTabElement, nextTabIndex, nbpItemsLength);
|
||||
return nextTabIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metodo per controllare lo stato disabled del tab,
|
||||
* Nel caso in cui lo stato sia disabled, il controllo del tab verrà passato al successivo
|
||||
*/
|
||||
private checkTabDisabled(event: KeyboardEvent, nextTabElement: HTMLElement, nextTabIndex: number, nbpItemsLength: number): number {
|
||||
const isDisabled = nextTabElement.className.includes('disabled');
|
||||
if (isDisabled) {
|
||||
if (event.key === 'Home') {
|
||||
nextTabIndex = this.getFirstTabIndex(event, nextTabIndex + 1, nbpItemsLength);
|
||||
} else if (event.key === 'End') {
|
||||
nextTabIndex = this.getLastTabIndex(event, nextTabIndex - 1, nbpItemsLength);
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
nextTabIndex = this.getLeftTabIndex(event, nextTabIndex, nbpItemsLength);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
nextTabIndex = this.getRightTabIndex(event, nextTabIndex, nbpItemsLength);
|
||||
}
|
||||
}
|
||||
return nextTabIndex;
|
||||
}
|
||||
|
||||
private scrollIntoViewIfNeeded(nextTabElement: HTMLElement) {
|
||||
let container = this.tabsContainer.nativeElement;
|
||||
let overLeft = nextTabElement.offsetLeft - container.offsetLeft < container.scrollLeft,
|
||||
overRight = (nextTabElement.offsetLeft - container.offsetLeft + nextTabElement.clientWidth)
|
||||
> (container.scrollLeft + container.clientWidth);
|
||||
|
||||
if (overLeft || overRight) {
|
||||
container.scrollLeft = nextTabElement.offsetLeft - container.offsetLeft - container.clientWidth / 2 + nextTabElement.clientWidth / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
<div class="isp-tab-toggle" [ngClass]="{
|
||||
'isp-default': nbpStyle === _style.DEFAULT,
|
||||
'isp-primary': nbpStyle === _style.PRIMARY,
|
||||
'isp-secondary': nbpStyle === _style.SECONDARY}">
|
||||
|
||||
<div class="tabs-container" [attr.role]="'tablist'">
|
||||
<div *ngFor="let tab of tabs; let i = index; first as isFirst; last as isLast" class="tab-element" [class.disabled]="tab.disabled" [class.active]="tab.active" [class.first]="isFirst" [class.last]="isLast" [class.inner]="!(isFirst || isLast)"
|
||||
(ispClick)="tabClicked(tab)">
|
||||
|
||||
<div class="tab-title" [attr.role]="'tab'" [attr.aria-selected]="tab.active ? true : false">
|
||||
<ng-container *ngIf="tab.tabTemplate">
|
||||
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!tab.tabTemplate">
|
||||
<span>{{tab.title}}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- <ng-content [attr.role]="'tabpanel'"></ng-content> -->
|
||||
<ng-container *ngTemplateOutlet="wngContent" [attr.role]="'tabpanel'"></ng-container>
|
||||
</div>
|
||||
@ -0,0 +1,74 @@
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
Output,
|
||||
ContentChildren,
|
||||
HostListener,
|
||||
EventEmitter,
|
||||
AfterContentInit,
|
||||
QueryList,
|
||||
HostBinding,
|
||||
Injector,
|
||||
TemplateRef
|
||||
} from '@angular/core';
|
||||
|
||||
import { NbpFidToggleTabComponentNOA11Y } from './nbp-fid-toggle-tab.component.noa11y';
|
||||
import { NbpStyle } from '@isp/xdce-widget/base';
|
||||
import { LoggerService } from '@isp/xdce-arch-core-base';
|
||||
import { NbpBaseComponent, WidgetMode } from '@isp/xdce-widget/base';
|
||||
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
|
||||
|
||||
@Component({
|
||||
templateUrl: './nbp-fid-toggle-tabset.component.noa11y.html',
|
||||
styleUrls: ['./nbp-fid-tab-toggle.component.noa11y.scss']
|
||||
})
|
||||
export class NbpFidToggleTabsetComponentNOA11Y extends NbpBaseComponent {
|
||||
|
||||
wngContent: TemplateRef<any>;
|
||||
|
||||
/**
|
||||
* (Opzionale) Enum per impostare lo stile del pulsante.
|
||||
* "DEFAULT" | "PRIMARY" | "SECONDRY"
|
||||
* Valore default: "DEFAULT"
|
||||
*/
|
||||
@Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;
|
||||
|
||||
@Input() tabTemplate: TemplateRef<any>;
|
||||
|
||||
_style: any = NbpStyle;
|
||||
|
||||
// @Input() vertical ;
|
||||
@Output() onSelect = new EventEmitter();
|
||||
@ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;
|
||||
|
||||
ngAfterContentInit () {
|
||||
const actives = this.tabs.filter(t => t.active);
|
||||
|
||||
if (actives.length > 1) {
|
||||
this.loggerService.error(`Multiple active tabs set 'active'`);
|
||||
} else if (!actives.length && this.tabs.length) {
|
||||
this.tabs.first.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
tabClicked(tab: NbpFidToggleTabComponentNOA11Y) {
|
||||
if(tab.disabled) {
|
||||
return;
|
||||
}
|
||||
this.tabs.forEach(element => element.active = false);
|
||||
tab.active = true;
|
||||
|
||||
this.onSelect.emit(tab);
|
||||
}
|
||||
|
||||
constructor(private loggerService : LoggerService, injector : Injector) {
|
||||
super(injector);
|
||||
}
|
||||
|
||||
isCorporate() {
|
||||
return WidgetMode.CORPORATE === this.widgetMode;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,111 @@
|
||||
|
||||
import { ChangeDetectorRef, Component, ContentChildren, EventEmitter, Injector, Input, Output, QueryList, TemplateRef, Type, ViewChild } from '@angular/core';
|
||||
|
||||
import { NbpBaseComponentA11YWrapper, NbpStyle } from '@isp/xdce-widget/base';
|
||||
|
||||
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
|
||||
import { NbpFidToggleTabsetComponentA11Y } from './nbp-fid-toggle-tabset.component.a11y';
|
||||
import { NbpFidToggleTabsetComponentNOA11Y } from './nbp-fid-toggle-tabset.component.noa11y';
|
||||
|
||||
|
||||
@Component({
|
||||
template: "<ng-container #componentContainer></ng-container><ng-template #wngContent><ng-content></ng-content></ng-template>",
|
||||
selector: "nbp-fid-toggle-tabset",
|
||||
|
||||
})
|
||||
export class NbpFidToggleTabsetComponent extends NbpBaseComponentA11YWrapper<NbpFidToggleTabsetComponentA11Y, NbpFidToggleTabsetComponentNOA11Y> {
|
||||
|
||||
private _cdr: ChangeDetectorRef;
|
||||
|
||||
constructor(private inj: Injector){
|
||||
super(inj);
|
||||
this._cdr = this.inj.get(ChangeDetectorRef);
|
||||
}
|
||||
|
||||
@ViewChild('wngContent', { read: TemplateRef })
|
||||
protected wngContent: TemplateRef<any>;
|
||||
|
||||
@ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;
|
||||
|
||||
|
||||
get A11Ycomponent(): Type<NbpFidToggleTabsetComponentA11Y> {
|
||||
return NbpFidToggleTabsetComponentA11Y;
|
||||
}
|
||||
|
||||
get noA11Ycomponent(): Type<NbpFidToggleTabsetComponentNOA11Y> {
|
||||
return NbpFidToggleTabsetComponentNOA11Y;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
super.ngOnInit();
|
||||
this.component.wngContent = this.wngContent;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.component.tabs = this.tabs;
|
||||
// needed to refresh the view when this widget is placed inside a component with a OnPush rendering strategy
|
||||
this._cdr.detectChanges();
|
||||
}
|
||||
|
||||
private _nbpStyle: NbpStyle = undefined;
|
||||
@Input()
|
||||
set nbpStyle(value: NbpStyle) {
|
||||
this._nbpStyle = value;
|
||||
if (this.component) {
|
||||
this.component.nbpStyle = value;
|
||||
}
|
||||
}
|
||||
get nbpStyle(): NbpStyle {
|
||||
return this._nbpStyle;
|
||||
}
|
||||
|
||||
private _tabBarId: string = undefined;
|
||||
@Input()
|
||||
set tabBarId(value: string) {
|
||||
this._tabBarId = value;
|
||||
if (this.component) {
|
||||
this.component.tabBarId = value;
|
||||
}
|
||||
}
|
||||
get tabBarId(): string {
|
||||
return this._tabBarId;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set _tabToggleId(value: string) {
|
||||
this._tabToggleId = value;
|
||||
if (this.component) {
|
||||
this.component.tabToggleId = value;
|
||||
}
|
||||
}
|
||||
get tabToggleId(): string {
|
||||
return this._tabToggleId;
|
||||
}
|
||||
private _ariaLabel = undefined;
|
||||
|
||||
@Input('aria-label')
|
||||
set ariaLabel(value: string) {
|
||||
this._ariaLabel = value;
|
||||
if (this.component) {
|
||||
this.component.ariaLabel = value;
|
||||
}
|
||||
}
|
||||
get ariaLabel(): string {
|
||||
return this._ariaLabel;
|
||||
}
|
||||
private _ariaLabelledBy = undefined;
|
||||
|
||||
@Input('aria-labelledby')
|
||||
set ariaLabelledBy(value: string) {
|
||||
this._ariaLabelledBy = value;
|
||||
if (this.component) {
|
||||
this.component.ariaLabelledBy = value;
|
||||
}
|
||||
}
|
||||
get ariaLabelledBy(): string {
|
||||
return this._ariaLabelledBy;
|
||||
}
|
||||
@Output() onSelect = new EventEmitter<any>();
|
||||
@Output() nbpSelectedIndexChange = new EventEmitter<number>();
|
||||
}
|
||||
|
||||
327
src/widgetfideuram/components/showcase/showcase.component.html
Normal file
327
src/widgetfideuram/components/showcase/showcase.component.html
Normal file
@ -0,0 +1,327 @@
|
||||
<div>
|
||||
<h3>Buttons (nbp-button)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div>
|
||||
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.DEFAULT">
|
||||
</nbp-button>
|
||||
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.DEFAULT" [nbpIcon]="'isp-font-servizio-vorrei'">
|
||||
</nbp-button>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.PRIMARY">
|
||||
</nbp-button>
|
||||
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.PRIMARY" [nbpIcon]="'isp-font-servizio-vorrei'">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-button [nbpLabel]="'labelA'" disabled [nbpStyle]="_nbpStyle.PRIMARY">
|
||||
</nbp-button>
|
||||
<nbp-button [nbpLabel]="'labelB'" disabled [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpIcon]="'isp-font-servizio-vorrei'">
|
||||
</nbp-button>
|
||||
</div>
|
||||
|
||||
|
||||
<h4>Secondary</h4>
|
||||
<div>
|
||||
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.SECONDARY">
|
||||
</nbp-button>
|
||||
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpIcon]="'isp-font-servizio-vorrei'">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-button [nbpLabel]="'labelA'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpStyleType]="'OUTLINE'">
|
||||
</nbp-button>
|
||||
<nbp-button [nbpLabel]="'labelB'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpStyleType]="'OUTLINE'"
|
||||
[nbpIcon]="'isp-font-servizio-vorrei'">
|
||||
</nbp-button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Checkbox (nbp-checkbox)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div>
|
||||
<nbp-checkbox [id]="'D-1'" [name]="'D-1'" [value]="'valueA'" [nbpLabel]="'Default'"></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'D-3'" [name]="'D-3'" [nbpLabel]="'Default checked'" [checked]="'true'"></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'D-4'" [name]="'D-4'" [value]="'valueB'" [nbpLabel]="'Default disabled'"
|
||||
disabled></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'D-4'" [name]="'D-4'" [value]="'valzueB'" [nbpLabel]="'Default disabled'" [checked]="'true'"
|
||||
disabled></nbp-checkbox>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-checkbox [id]="'D-1'" [name]="'D-1'" [nbpStyle]="_nbpStyle.PRIMARY" [value]="'valueA'"
|
||||
[nbpLabel]="'Primary'"></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'Db-3'" [name]="'Db-3'" [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary checked'"
|
||||
[checked]="'true'"></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'Db-4'" [name]="'Db-4'" [nbpStyle]="_nbpStyle.PRIMARY" [value]="'valueB'"
|
||||
[nbpLabel]="'Primary disabled'" disabled></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'Db-4'" [name]="'Db-4'" [nbpStyle]="_nbpStyle.PRIMARY" [value]="'valueB'"
|
||||
[nbpLabel]="'Primary disabled'" [checked]="'true'" disabled></nbp-checkbox>
|
||||
</div>
|
||||
|
||||
<h4>Inline</h4>
|
||||
<div>
|
||||
<nbp-checkbox [id]="'Inline-1'" [name]="'Inline-1'" [nbpStyle]="'default'" [nbpDisplayInline]="'true'"
|
||||
[nbpLabel]="'labelA'"></nbp-checkbox>
|
||||
<nbp-checkbox [id]="'Inline-3'" [name]="'Inline-3'" [nbpStyle]="_nbpStyle.SECONDARY" [nbpDisplayInline]="'true'"
|
||||
[nbpLabel]="'labelC'"></nbp-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Radio (nbp-radio)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div>
|
||||
<nbp-radio [(ngModel)]="radioModelDefault" value="primary" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpLabel]="'Default'"></nbp-radio>
|
||||
<nbp-radio [(ngModel)]="radioModelDefault" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpLabel]="'Default checked'" [checked]="true"></nbp-radio>
|
||||
<nbp-radio [(ngModel)]="radioModelDefault" value="disabled" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpLabel]="'Default disabled'" disabled></nbp-radio>
|
||||
<nbp-radio [(ngModel)]="radioModelDefault" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpLabel]="'Default disabled checked'" [checked]="true" disabled></nbp-radio>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-radio [(ngModel)]="radioModelPrimary" value="primary" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpLabel]="'Primary'"></nbp-radio>
|
||||
<nbp-radio [(ngModel)]="radioModelPrimary" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpLabel]="'Primary checked'" [checked]="true"></nbp-radio>
|
||||
<nbp-radio [(ngModel)]="radioModelPrimary" value="disabled" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpLabel]="'Primary disabled'" disabled></nbp-radio>
|
||||
<nbp-radio [(ngModel)]="radioModelPrimary" value="checked" [name]="'PriR'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpLabel]="'Primary disabled checked'" [checked]="true" disabled></nbp-radio>
|
||||
</div>
|
||||
|
||||
<h3>Toggle (nbp-input-container + nbp-toggle)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle checked'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="true" [showLabel]="false"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="false" [showLabel]="false"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle checked disabled'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="true" [showLabel]="false"
|
||||
[disabledToggle]="true"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default Toggle disabled'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.DEFAULT" [initialState]="false" [showLabel]="false"
|
||||
[disabledToggle]="true"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle checked'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="true" [showLabel]="false"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="false" [showLabel]="false"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle checked disabled'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="true" [showLabel]="false"
|
||||
[disabledToggle]="true"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Primary Toggle disabled'">
|
||||
<nbp-toggle [nbpStyle]="_nbpStyle.PRIMARY" [initialState]="false" [showLabel]="false"
|
||||
[disabledToggle]="true"></nbp-toggle>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<h3>Accordion (nbp-accordion)</h3>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-accordion [nbpTitle]="accordionTitle" [nbpStyle]="_nbpStyle.DEFAULT" [nbpBorder]="true"
|
||||
[nbpCollapsed]="false" [showTooltip]="tooltipFlag" [tooltipSize]="_nbpSize.MD"
|
||||
[tooltipVisibility]="tooltipVisibility" [tooltipText]="accordionTooltip" [tooltipIcon]="tooltipIcona">
|
||||
Contenuto accordion
|
||||
</nbp-accordion>
|
||||
</div>
|
||||
|
||||
<h3>Modal (nbp-modal)</h3>
|
||||
|
||||
<div>
|
||||
<nbp-button id="modal-default-button-2" class="my-2" [nbpLabel]="'Open modal'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
(nbpClick)='_openModal(_modalDef1, _nbpSize.MD, _nbpStyle.PRIMARY)'>
|
||||
</nbp-button>
|
||||
<nbp-button id="modal-default-button-2" class="my-2" [nbpLabel]="'Open modal'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
(nbpClick)='_openModal(_secButtModale1, _nbpSize.MD, _nbpStyle.PRIMARY)'>
|
||||
</nbp-button>
|
||||
</div>
|
||||
|
||||
<nbp-modal id="modal-default-1" #defModale1 [nbpButtons]="singleButton" nbpTitle='Basic modal' [nbpSize]="_size"
|
||||
(nbpOnButtonClicked)="onButtonClicked($event)">
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit. Phasellus in quam tortor.
|
||||
Etiam eu dolor arcu. Pellentesque
|
||||
habitant
|
||||
morbi tristique senectus et netus et malesuada
|
||||
fames ac turpis egestas. Integer eu rhoncus
|
||||
orci. Etiam tincidunt
|
||||
augue molestie enim sagittis, sed varius sem
|
||||
pharetra. Aliquam erat volutpat. Sed sit amet
|
||||
nunc eu dui bibendum
|
||||
imperdiet non vel ligula. Fusce augue ex,
|
||||
ornare finibus cursus eget, ultrices bibendum
|
||||
mauris. Morbi consequat
|
||||
vitae eros vel rhoncus.
|
||||
</div>
|
||||
</nbp-modal>
|
||||
|
||||
<nbp-modal id="modal-sec-butt-1" #secButtModale1 [nbpButtons]="twoButton" nbpTitle='Attenzione'
|
||||
(nbpOnButtonClicked)="onButtonClicked($event)" (nbpOnClose)="onButtonClicked($event)">
|
||||
<div>
|
||||
<h2>Sei sicuro di volerlo eliminare?</h2>
|
||||
</div>
|
||||
</nbp-modal>
|
||||
|
||||
<h3>Tooltip (nbp-tooltip)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div *ngFor="let position of positions">
|
||||
<span style="margin-right: 5px;">{{ position }}</span>
|
||||
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpVisibilityStrategy]="'hover'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
|
||||
[nbpText]="tooltipText">
|
||||
<span class="tooltip-icon {{tooltipIcon}}"></span>
|
||||
</nbp-tooltip>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div *ngFor="let position of positions">
|
||||
<span style="margin-right: 5px;">{{ position }}</span>
|
||||
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpVisibilityStrategy]="'hover'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
|
||||
[nbpText]="tooltipText">
|
||||
<span class="tooltip-icon {{tooltipIcon}}"></span>
|
||||
</nbp-tooltip>
|
||||
</div>
|
||||
|
||||
<h3>Tooltip popover (nbp-tooltip)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div *ngFor="let position of positions">
|
||||
<span style="margin-right: 5px;">{{ position }}</span>
|
||||
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpVisibilityStrategy]="'click'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
|
||||
[nbpText]="tooltipText" [nbpTitle]="tooltipTitle">
|
||||
<span class="tooltip-icon {{tooltipIcon}}"></span>
|
||||
</nbp-tooltip>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div *ngFor="let position of positions">
|
||||
<span style="margin-right: 5px;">{{ position }}</span>
|
||||
<nbp-tooltip [name]="'tooltipOnDedicatedTrigger'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpVisibilityStrategy]="'click'" [nbpAlign]="_nbpStyle.LEFT" [nbpPosition]="position"
|
||||
[nbpTitle]="tooltipTitle" [nbpText]="tooltipText">
|
||||
<span class="tooltip-icon {{tooltipIcon}}"></span>
|
||||
</nbp-tooltip>
|
||||
</div>
|
||||
|
||||
<h3>Button generation (nbp-button-generation)</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div>
|
||||
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.DEFAULT"
|
||||
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpIcon]="'ispv2-font-gear'">
|
||||
</nbp-button-generation>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.PRIMARY"
|
||||
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpIcon]="'ispv2-font-gear'">
|
||||
</nbp-button-generation>
|
||||
</div>
|
||||
|
||||
<h4>Secondary</h4>
|
||||
<div>
|
||||
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.SECONDARY"
|
||||
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.SECONDARY"
|
||||
[nbpIcon]="'ispv2-font-gear'">
|
||||
</nbp-button-generation>
|
||||
</div>
|
||||
|
||||
<h3>Button generation (nbp-button-generation [nbpIconPosition]="_iconPosition.TOP")</h3>
|
||||
|
||||
<h4>Default</h4>
|
||||
<div>
|
||||
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.DEFAULT"
|
||||
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpIcon]="'ispv2-font-gear'" [nbpIconPosition]="_iconPosition.TOP">
|
||||
</nbp-button-generation>
|
||||
</div>
|
||||
|
||||
<h4>Primary</h4>
|
||||
<div>
|
||||
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.PRIMARY"
|
||||
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpIcon]="'ispv2-font-gear'" [nbpIconPosition]="_iconPosition.TOP">
|
||||
</nbp-button-generation>
|
||||
</div>
|
||||
|
||||
<h4>Secondary</h4>
|
||||
<div>
|
||||
<nbp-button-generation id="button-generation-with-icon" [nbpStyleType]="_nbpStyle.SECONDARY"
|
||||
[nbpLabel]="'Text more icon button'" [ariaLabel]="'button aria label'" [nbpStyle]="_nbpStyle.SECONDARY"
|
||||
[nbpIcon]="'ispv2-font-gear'" [nbpIconPosition]="_iconPosition.TOP">
|
||||
</nbp-button-generation>
|
||||
</div>
|
||||
|
||||
<h3>Side Popup (nbp-fid-side-popup)</h3>
|
||||
<div>
|
||||
<nbp-button [nbpLabel]="'Apri Side Popup'" [nbpStyle]="_nbpStyle.PRIMARY" (nbpClick)="openSidePopup()">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-fid-side-popup [isOpen]="isSidePopupOpen" [hideOverlay]="true" [hideCloseButton]="true">
|
||||
<nbp-button-generation [nbpLabel]="'Chiudi'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
(nbpClick)="closeSidePopup()">
|
||||
</nbp-button-generation>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||
ex ea commodo consequat.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.</p>
|
||||
</nbp-fid-side-popup>
|
||||
</div>
|
||||
|
||||
<h3>Button bar (nbp-fid-button-bar)</h3>
|
||||
<div>
|
||||
<nbp-fid-button-bar [nbpButtons]="nbpButtons"></nbp-fid-button-bar>
|
||||
</div>
|
||||
|
||||
<h4>Button Bar in Card (nbp-card + nbp-fid-button-bar) (nbp-accordion + nbp-fid-button-bar)</h4>
|
||||
<div>
|
||||
<div style="width: 500px">
|
||||
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
|
||||
[templateRef]="templateCard">
|
||||
</nbp-card>
|
||||
<ng-template #templateCard>
|
||||
<nbp-fid-button-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpButtons]="nbpButtons"></nbp-fid-button-bar>
|
||||
</ng-template>
|
||||
</div>
|
||||
<nbp-accordion [nbpTitle]="accordionTitle" [nbpStyle]="_nbpStyle.DEFAULT" [nbpBorder]="true"
|
||||
[nbpCollapsed]="false" [showTooltip]="tooltipFlag" [tooltipSize]="_nbpSize.MD"
|
||||
[tooltipVisibility]="tooltipVisibility" [tooltipText]="accordionTooltip" [tooltipIcon]="tooltipIcona">
|
||||
Contenuto accordion
|
||||
|
||||
<nbp-fid-button-bar [nbpStyle]="_nbpStyle.PRIMARY" [nbpButtons]="nbpButtons"></nbp-fid-button-bar>
|
||||
</nbp-accordion>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
.new-part, h3 {
|
||||
margin-top: 3rem;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
padding: .1rem 0;
|
||||
border-bottom: 1px solid #c00;
|
||||
margin-bottom: .7rem;
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
136
src/widgetfideuram/components/showcase/showcase.component.ts
Normal file
136
src/widgetfideuram/components/showcase/showcase.component.ts
Normal file
@ -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
|
||||
}
|
||||
];
|
||||
}
|
||||
183
src/widgetfideuram/components/showcase/showcase1.component.html
Normal file
183
src/widgetfideuram/components/showcase/showcase1.component.html
Normal file
@ -0,0 +1,183 @@
|
||||
<div>
|
||||
|
||||
<p class="new-part">Tabbar (nbp-tab-bar):</p>
|
||||
|
||||
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
|
||||
[nbpTabContent]="true">
|
||||
</nbp-tab-bar>
|
||||
|
||||
<p class="new-part">Tabbar with title:</p>
|
||||
|
||||
<div class="nbp-tab-bar-title">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-tab-bar [nbpStyle]="_nbpStyle.DEFAULT" [nbpItems]="items" [(nbpSelectedIndex)]="currentSelectedIndex"
|
||||
[nbpTabContent]="true">
|
||||
</nbp-tab-bar>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-toggle-tabset) check devtools inspector
|
||||
elements:</p>
|
||||
<div class="nbp-tab-bar-title">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-toggle-tabset>
|
||||
<nbp-toggle-tab disabled="true" title="Scheda 0">
|
||||
<h3>Scheda 0 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab active="true" title="Scheda 1">
|
||||
<h3>Scheda 1 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab title="Scheda 2">
|
||||
<h3>Scheda 2 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
<nbp-toggle-tab title="Scheda 3">
|
||||
<h3>Scheda 3 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-toggle-tab>
|
||||
</nbp-toggle-tabset>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Input text (nbp-input-container + nbp-input-text):</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpLabel]="labelInput4" [nbpStyle]="_nbpStyle.PRIMARY" [infoText]="'Inserire un importo'">
|
||||
<nbp-input-text id="input-text-primary-3" [name]="'importoPrimary'" [(ngModel)]="importoprovaR"
|
||||
nbpInputType=nbpImporto [nbpFormat]="currency" [nbpShowValidation]="true" [placeholder]="'placeholder'"
|
||||
[nbpErrorMessage]="errorMessageInput" [nbpRoundBorder]="false" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpIcon]="'ispv2-font-euro-sign'" [accessibleTextForIcon]="'euro'" [label]="labelInput4">
|
||||
</nbp-input-text>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Calendar generic (nbp-input-container + nbp-calendar-generic)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic [id]="'calendarDefault'" [name]="'calendarDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpPlacement]="_nbpCalendarPosition.BOTTOM_LEFT" [nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA"
|
||||
[(ngModel)]="calendarModel">
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
|
||||
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-calendar-generic [id]="'calendarConstrainedDateInterval'" [name]="'calendarConstrainedDateInterval'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT" [nbpPlacement]="_nbpCalendarPosition.BOTTOM_RIGHT" [disabled]="true"
|
||||
[nbpLabelPattern]="_nbpCalendarPattern.GGMMAAAA" [(ngModel)]="calendarModel"
|
||||
[startDateEnabled]="startDate" [endDateEnabled]="endDate">
|
||||
</nbp-calendar-generic>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Combo (nbp-input-container + nbp-combo)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
|
||||
</nbp-combo>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true" [disabled]="true">
|
||||
</nbp-combo>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Combo Filter (nbp-input-container + nbp-combo-filter)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo-filter [id]="'comboDefault'" [name]="'comboDefault'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="comboDatasource" [(ngModel)]="comboSelectedValue" [nbpShowEmptyValue]="true">
|
||||
</nbp-combo-filter>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Combo Multi (nbp-input-container + nbp-combo-multi)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Default'">
|
||||
<nbp-combo-multi [id]="'comboMultiIndent'" [name]="'comboMultiIndent'" [nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="datasource" [(ngModel)]="selectedValues" [dropdownVisible]="comboMultiVisible">
|
||||
</nbp-combo-multi>
|
||||
</nbp-input-container>
|
||||
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.PRIMARY" [nbpLabel]="'Default'">
|
||||
<nbp-combo-multi [id]="'combomultiDefault'" [name]="'combomultiDefault'" [nbpStyle]="_nbpStyle.PRIMARY"
|
||||
[nbpDataSource]="datasource" [(ngModel)]="selectedValues">
|
||||
</nbp-combo-multi>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Textarea (nbp-input-container + nbp-textarea)</p>
|
||||
<div>
|
||||
<nbp-input-container [nbpLabel]="'Textarea stile default'" [nbpStyle]="_nbpStyle.DEFAULT">
|
||||
<nbp-textarea [name]="'default-a'" [(ngModel)]="contenutoEmpty" [required]="required"
|
||||
[placeholder]="'placeholder'" [maxlength]="lunghezzamax" [minlength]="lunghezzamin"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"></nbp-textarea>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Card (nbp-card)</p>
|
||||
<div style="width: 250px">
|
||||
<nbp-card [id]="'crd5'" [nbpStyle]="_nbpStyle.DEFAULT" [title]="cardTitle" [description]="cardDescr"
|
||||
[templateRef]="template4">
|
||||
</nbp-card>
|
||||
<ng-template #template4>
|
||||
<div class="row">
|
||||
<div class="col gap-1">
|
||||
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.FOURTH">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-button [nbpLabel]="'button'" [nbpStyle]="_nbpStyle.PRIMARY">
|
||||
</nbp-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Table (nbp-table)</p>
|
||||
<div>
|
||||
<nbp-table [scrollBar]="'auto'" ariaLabel="table" [nbpId]="'defTable1'" [nbpOptions]="tableOptions"
|
||||
[nbpDataSource]="tableDs" [nbpAutoBind]="true" [nbpSelectionType]="tableSelectionType"
|
||||
[nbpLayoutAuto]="true">
|
||||
|
||||
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField'
|
||||
[nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
|
||||
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
|
||||
[nbpSortable]="true" [nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
</nbp-table>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Tree-table</p>
|
||||
<div>
|
||||
<!-- [paginationOptions]="table2PageConfig" -->
|
||||
<isp-turbo-table [columns]="table2Columns" [datasource]="table2Data" [hasAccordionRows]="true"
|
||||
[rowExpander]="table2RowExpander" tableMinWidth='35rem' ariaLabel="table with children"></isp-turbo-table>
|
||||
</div>
|
||||
|
||||
<p class="new-part">Checkbox-table</p>
|
||||
<nbp-table [scrollBar]="'auto'" [nbpId]="'defTable'" [nbpOptions]="simpleOptions"
|
||||
[nbpDataSource]="campiStandardData" ariaLabel="multi selection table" [nbpAutoBind]="true"
|
||||
[nbpSelectionType]="multi">
|
||||
|
||||
<nbp-table-column nbpId='headerField' nbpTitle='Header field' nbpField='headerField'
|
||||
[nbpSortable]='true' [nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
|
||||
<nbp-table-column nbpId='headerField2' nbpTitle='Header field 2' nbpField='headerField2'
|
||||
[nbpSortable]='true' [nbpVisible]='true'>
|
||||
</nbp-table-column>
|
||||
|
||||
</nbp-table>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
@import "../../../assets/xdce-module-widget-fideuram/styles/_mixins";
|
||||
|
||||
.new-part,
|
||||
h3 {
|
||||
margin-top: 3rem;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
padding: .1rem 0;
|
||||
border-bottom: 1px solid #c00;
|
||||
margin-bottom: .7rem;
|
||||
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@include nbp-combo-multi-nth-child-indent("comboMultiIndent", 3);
|
||||
@include nbp-combo-multi-nth-child-indent("comboMultiIndent", 4);
|
||||
240
src/widgetfideuram/components/showcase/showcase1.component.ts
Normal file
240
src/widgetfideuram/components/showcase/showcase1.component.ts
Normal file
@ -0,0 +1,240 @@
|
||||
import { Component, Injector } from '@angular/core';
|
||||
import {
|
||||
ColumnSettings, INbpTableOptions,
|
||||
isRowModel, ITabItem, NbpBaseComponent,
|
||||
NbpCalendarPattern, NbpCalendarPosition, NbpComboMultiComponent,
|
||||
NbpDataSource, NbpStyle, NbpTableSelectionType, NgbDateStruct,
|
||||
RowAction, RowDataExpander, RowModel,
|
||||
NbpComboComponent
|
||||
} from '@isp/xdce-widget';
|
||||
|
||||
@Component({
|
||||
selector: 'showcase1',
|
||||
templateUrl: './showcase1.component.html',
|
||||
styleUrls: ['./showcase1.component.scss']
|
||||
})
|
||||
export class Showcase1Component extends NbpBaseComponent {
|
||||
|
||||
public _nbpStyle = NbpStyle;
|
||||
|
||||
//
|
||||
// TABBAR
|
||||
items: Array<ITabItem<void>> = [
|
||||
{ icon: '', title: 'Calls', content: 'Calls' },
|
||||
{ icon: '', title: 'Messages', content: 'Messages' }
|
||||
];
|
||||
currentSelectedIndex: number = 0;
|
||||
|
||||
longText: string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta enim sapien. Etiam interdum ullamcorper ullamcorper. Ut malesuada orci ac sapien tempor dignissim. Phasellus congue libero sit amet ex euismod pulvinar. Duis dolor tellus, convallis id odio vitae, iaculis feugiat lectus. Integer tempor ex ac justo dictum, at vehicula dui malesuada. Praesent eu turpis eros. Aliquam vel metus ac tellus eleifend iaculis. Nam venenatis eget sapien eget euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sagittis fermentum scelerisque. Sed luctus ut mi et molestie. Nullam ultricies, nisl aliquam rhoncus cursus, magna libero accumsan neque, id bibendum lorem mauris vitae libero. Proin sodales felis placerat mi venenatis gravida. Nam eu metus velit. Morbi in sapien ut urna vulputate sollicitudin. Nulla dictum eleifend enim, at hendrerit velit feugiat ac. Cras gravida a augue ut fermentum. Integer sagittis velit ut viverra scelerisque. Pellentesque sed magna at lectus interdum vehicula id vitae diam. Integer sed placerat nisi, non maximus eros. ";
|
||||
//
|
||||
|
||||
//
|
||||
// INPUT TEXT
|
||||
errorMessageInput: string = 'Il campo da inserire non è valido';
|
||||
labelInput4: string = 'Importo';
|
||||
currency: string = 'currency';
|
||||
importoprovaR: string;
|
||||
//
|
||||
|
||||
// CALENDAR GENERIC
|
||||
_nbpCalendarPosition = NbpCalendarPosition;
|
||||
_nbpCalendarPattern = NbpCalendarPattern;
|
||||
calendarModel: NgbDateStruct = null;
|
||||
|
||||
startDate: NgbDateStruct = { year: 2023, month: 3, day: 15 };
|
||||
endDate: NgbDateStruct = { year: 2023, month: 8, day: 15 };
|
||||
//
|
||||
|
||||
//
|
||||
// COMBO
|
||||
comboValues = [
|
||||
"First item",
|
||||
"Second item",
|
||||
"Third item",
|
||||
"Fourth item",
|
||||
"Fifth item",
|
||||
"Sixth item"
|
||||
];
|
||||
comboDatasource = new NbpDataSource<string>(this.comboValues);
|
||||
comboSelectedValue = null;
|
||||
//
|
||||
|
||||
values = [
|
||||
"First item",
|
||||
"Second item",
|
||||
"Third item",
|
||||
"Fourth item",
|
||||
"Fifth item",
|
||||
"Sixth item"
|
||||
];
|
||||
|
||||
comboMultiVisible = true;
|
||||
|
||||
datasource = new NbpDataSource<string>(this.values);
|
||||
|
||||
selectedValues: Array<string> = [];
|
||||
|
||||
//
|
||||
// TEXTAREA
|
||||
lunghezzamax = 30;
|
||||
lunghezzamin = 10;
|
||||
required = 'required';
|
||||
contenutoEmpty = 'contenutoEmpty';
|
||||
|
||||
//
|
||||
// CARD
|
||||
cardTitle = 'Lorem ipsum ';
|
||||
cardSubtitle = 'Lorem ipsum dolor sit amet';
|
||||
cardDescr = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
|
||||
'Pellentesque facilisis quam in odio tincidunt bibendum vel vitae leo. ' +
|
||||
'Sed est risus, semper eu egestas sed, vulputate luctus neque. ' +
|
||||
'Pellentesque facilisis quam in odio tincidunt bibendum vel vitae leo. ' +
|
||||
'Sed est risus, semper eu egestas sed, vulputate luctus neque. Praesent vestibulum tinciodation.';
|
||||
//
|
||||
|
||||
//
|
||||
// TABLE data
|
||||
tableSelectionType: NbpTableSelectionType = NbpTableSelectionType.NONE;
|
||||
tableOptions: INbpTableOptions = { sortable: true };
|
||||
tableRows = [ //
|
||||
{ 'headerField': "", 'headerField2': "test" },
|
||||
{ 'headerField': "test1", 'headerField2': "test1" },
|
||||
{ 'headerField': "test2", 'headerField2': "test2" },
|
||||
{ 'headerField': "test3", 'headerField2': "test3" },
|
||||
{ 'headerField': "test4", 'headerField2': "test4" },
|
||||
{ 'headerField': "test5", 'headerField2': "test5" },
|
||||
{ 'headerField': "test6", 'headerField2': "test6" },
|
||||
{ 'headerField': "test7", 'headerField2': "test7" },
|
||||
{ 'headerField': "test8", 'headerField2': "test8" } //
|
||||
];
|
||||
tableDs: NbpDataSource<any> = new NbpDataSource<any>(this.tableRows);
|
||||
//
|
||||
|
||||
|
||||
//
|
||||
table2Columns : Array<ColumnSettings> = [
|
||||
{ field: 'brand', header: 'Brand', width: '25%', sortable: true },
|
||||
{ field: 'year', header: 'Year', width: '25%', sortable: true },
|
||||
{ field: 'color', header: 'Color', width: '25%', sortable: true },
|
||||
{ field: 'vin', header: 'VIN', width: '25%', sortable: true },
|
||||
];
|
||||
table2Rows = [
|
||||
[
|
||||
{
|
||||
id: '0', brand: "Citroën", year: 2012,
|
||||
color: "Sono il colore molto lungo Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat", vin: "dsad231ff",
|
||||
child: [
|
||||
{
|
||||
id: '00', brand: "00 aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla", year: 2012,
|
||||
color: "Sono il colore molto lungo Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat",
|
||||
vin: "dsad231ff"
|
||||
},
|
||||
{ id: '01', brand: "01", year: 2012, color: "Orange", vin: "dsad231ff"},
|
||||
{id: '01', brand: "01", year: 2012, color: "Orange", vin: "dsad231ff", child: [
|
||||
{id: '010', brand: "010", year: 2012, color: "Orange", vin: "dsad231ff", status: {checked: false, disabled: false, hideCheckbox: false}},
|
||||
{id: '011', brand: "011", year: 2012, color: "Orange", vin: "dsad231ff"},
|
||||
{id: '012', brand: "012", year: 2012, color: "Orange", vin: "dsad231ff"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '1', brand: "Audi", year: 2011, color: "Black", vin: "gwregre345", child: [
|
||||
{ id: '10', brand: "10", year: 2012, color: "Orange", vin: "dsad231ff" },
|
||||
{ id: '11', brand: "11", year: 2012, color: "Orange", vin: "dsad231ff" },
|
||||
{ id: '12', brand: "12", year: 2012, color: "Orange", vin: "dsad231ff" }
|
||||
]
|
||||
},
|
||||
{ id: '13', brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
|
||||
{ id: '14', brand: "BMW", year: 2003, color: "Blue", vin: "j6w54qgh" },
|
||||
{ id: '15', brand: "Mercedes", year: 1995, color: "Orange", vin: "hrtwy34" }
|
||||
],
|
||||
[
|
||||
{ id: '10', brand: "Cadillac", year: 2012, color: "Orange", vin: "dsad231ff" },
|
||||
{ id: '11', brand: "Chery", year: 2011, color: "Black", vin: "gwregre345" },
|
||||
{ id: '12', brand: "Chevrolet", year: 2005, color: "Gray", vin: "h354htr" },
|
||||
{ id: '13', brand: "Chrysler", year: 2003, color: "Blue", vin: "j6w54qgh" }
|
||||
],
|
||||
[
|
||||
{ id: '20', brand: "Maybach", year: 2012, color: "Orange", vin: "dsad231ff" },
|
||||
{ id: '21', brand: "Maybach", year: 2011, color: "Black", vin: "gwregre345" },
|
||||
{ id: '22', brand: "Maserati", year: 2005, color: "Gray", vin: "h354htr" },
|
||||
{ id: '23', brand: "Pagani", year: 2003, color: "Blue", vin: "j6w54qgh" },
|
||||
{ id: '24', brand: "Opel", year: 1995, color: "Orange", vin: "hrtwy34" }
|
||||
]
|
||||
];
|
||||
table2Data: NbpDataSource<any> = new NbpDataSource<any>();
|
||||
table2RowExpander = new RowExpanderTreeExpandedTest();
|
||||
//
|
||||
|
||||
//
|
||||
// TABLE 3
|
||||
multi: NbpTableSelectionType = NbpTableSelectionType.MULTI;
|
||||
|
||||
simpleOptions: INbpTableOptions = { sortable: true };
|
||||
|
||||
oggetti = [{ 'headerField': "", 'headerField2': "test" },
|
||||
{ 'headerField': "test1", 'headerField2': "test1" },
|
||||
{ 'headerField': "test2", 'headerField2': "test2" },
|
||||
{ 'headerField': "test3", 'headerField2': "test3" },
|
||||
{ 'headerField': "test4", 'headerField2': "test4" }];
|
||||
|
||||
campiStandardData: NbpDataSource<any>;
|
||||
//
|
||||
|
||||
constructor(injector: Injector) {
|
||||
super(injector);
|
||||
// table2
|
||||
this.setDataRowExpander(this.table2Rows[0], 0);
|
||||
this.campiStandardData = new NbpDataSource<any>(this.oggetti);
|
||||
}
|
||||
|
||||
setDataRowExpander(array: Array<any>, pageNumber?: number, sortField?: string[], pageSize?: number): void {
|
||||
array = array.map(convertPageToRowModel);
|
||||
this.table2Data.setData(array, pageNumber, sortField, pageSize);
|
||||
}
|
||||
}
|
||||
|
||||
export class RowExpanderTreeExpandedTest implements RowDataExpander {
|
||||
startExpanded = false;
|
||||
getChild(data: RowModel): RowModel[] {
|
||||
NbpComboMultiComponent
|
||||
return data.body.child ? (<RowModel[]>data.body.child)
|
||||
: null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function convertPageToRowModel(body: any): RowModel {
|
||||
let actionRow: RowAction[] = [
|
||||
{
|
||||
actionName: 'delete',
|
||||
icon: '',
|
||||
label: 'DELETE'
|
||||
},
|
||||
{
|
||||
actionName: 'edit',
|
||||
icon: '',
|
||||
label: 'EDIT'
|
||||
},
|
||||
{
|
||||
actionName: 'download',
|
||||
icon: '',
|
||||
label: 'DOWNLOAD'
|
||||
}
|
||||
]
|
||||
if (isRowModel(body)) {
|
||||
return body;
|
||||
}
|
||||
if (body && body.child && body.child.length) {
|
||||
body.child = body.child.map(convertPageToRowModel)
|
||||
}
|
||||
let checked = !!body.status && body.status.checked;
|
||||
let disabled = !!body.status && body.status.disabled;
|
||||
let hideCheckbox = !!body.status && body.status.hideCheckbox;
|
||||
let highlight = !!body.status && body.status.highlight;
|
||||
let customHighlight = !!body.status && body.status.customHighlight;
|
||||
let highlightText = !!body.status && body.status.highlightText;
|
||||
let data = { ...body };
|
||||
delete data.status;
|
||||
return new RowModel(body.id, data, checked, disabled, hideCheckbox, null, actionRow, highlight, customHighlight, highlightText);
|
||||
}
|
||||
@ -0,0 +1,194 @@
|
||||
<h1>Widget Fideuram Showcase</h1>
|
||||
|
||||
<h3>Spinner (using data-message setted from setSpinnerMessage method)</h3>
|
||||
<div class="widget-fideuram">
|
||||
<isp-spinner #testCssMessage name="testCssMessage" isp-spinner-animation [id]="'testCssMessage'"
|
||||
[spinnerId]="'testCssMessage'" [fixed]="false" [spinnerDiameter]="'90'" [zIndex]="999" [show]="true">
|
||||
</isp-spinner>
|
||||
</div>
|
||||
|
||||
<h3>Spinner (with message prop)</h3>
|
||||
<div class="widget-fideuram">
|
||||
<isp-spinner #testPropMessage name="testPropMessage" isp-spinner-animation [id]="'testPropMessage'"
|
||||
[spinnerId]="'testPropMessage'" [message]="'Caricamento dati ...'" [fixed]="false" [spinnerDiameter]="'90'"
|
||||
[zIndex]="999" [show]="true">
|
||||
</isp-spinner>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="showcase-container widget-fideuram combo-container-showcase">
|
||||
<h3>Combo (nbp-fid-combo) <sup>NEW</sup></h3>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Combo NEW'">
|
||||
<nbp-fid-combo
|
||||
[id]="'combo1'"
|
||||
[name]="'combo1'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="combo1DataSource"
|
||||
[(ngModel)]="combo1Value"
|
||||
[nbpKeyField]="'value'"
|
||||
[nbpViewField]="'label'"
|
||||
[nbpShowEmptyValue]="true"
|
||||
></nbp-fid-combo>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Combo NEW (required)'">
|
||||
<nbp-fid-combo
|
||||
[id]="'combo1req'"
|
||||
[name]="'combo1req'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="combo1DataSource"
|
||||
[nbpKeyField]="'value'"
|
||||
[nbpViewField]="'label'"
|
||||
[(ngModel)]="combo1Value"
|
||||
[nbpShowEmptyValue]="false"
|
||||
></nbp-fid-combo>
|
||||
</nbp-input-container>
|
||||
<nbp-input-container [nbpStyle]="_nbpStyle.DEFAULT" [nbpLabel]="'Combo NEW (disabled)'">
|
||||
<nbp-fid-combo
|
||||
[id]="'combo1req'"
|
||||
[name]="'combo1req'"
|
||||
[nbpStyle]="_nbpStyle.DEFAULT"
|
||||
[nbpDataSource]="combo1DataSource"
|
||||
[nbpKeyField]="'value'"
|
||||
[nbpViewField]="'label'"
|
||||
[(ngModel)]="combo1Value"
|
||||
[disabled]="true"
|
||||
></nbp-fid-combo>
|
||||
</nbp-input-container>
|
||||
</div>
|
||||
|
||||
<div class="showcase-container">
|
||||
<div class="showcase-container-left">
|
||||
<showcase></showcase>
|
||||
<showcase1></showcase1>
|
||||
</div>
|
||||
<div class="showcase-container-right widget-fideuram">
|
||||
<showcase></showcase>
|
||||
<showcase1></showcase1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Components</h2>
|
||||
|
||||
<h3>Donut Chart</h3>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nbp-fid-donut-chart></nbp-fid-donut-chart>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<nbp-fid-donut-chart [config]="donutConfig" [data]="donutData"></nbp-fid-donut-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Bar Chart</h3>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nbp-fid-bar-chart></nbp-fid-bar-chart>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<nbp-fid-bar-chart [config]="barConfig" [data]="barData"></nbp-fid-bar-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Piramyd Chart</h3>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nbp-fid-pyramid-chart></nbp-fid-pyramid-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>SidePopup</h3>
|
||||
<div>
|
||||
<!-- Esempio 1: Popup semplice con bottoni -->
|
||||
<nbp-button nbpLabel="Apri Popup Base" [nbpStyle]="NbpStyle.PRIMARY" (nbpClick)="showBasicPopup = true">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-fid-side-popup [(isOpen)]="showBasicPopup" [nbpTitle]="'Esempio Base'" [nbpSize]="NbpSize.MD"
|
||||
[nbpStyle]="NbpStyle.PRIMARY" [nbpButtons]="basicButtons" (nbpOnButtonClick)="onBasicButtonClick($event)">
|
||||
<div class="popup-content">
|
||||
<p>Questo è un esempio di popup base con due bottoni.</p>
|
||||
<p>Il contenuto può essere qualsiasi elemento HTML.</p>
|
||||
</div>
|
||||
</nbp-fid-side-popup>
|
||||
|
||||
<!-- Esempio 2: Popup con form -->
|
||||
<nbp-button nbpLabel="Apri Form Popup" [nbpStyle]="NbpStyle.SECONDARY" (nbpClick)="showFormPopup = true">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-fid-side-popup [(isOpen)]="showFormPopup" [nbpTitle]="'Form Example'" [nbpSize]="NbpSize.LG"
|
||||
[nbpStyle]="NbpStyle.SECONDARY" [nbpButtons]="formButtons">
|
||||
<div class="popup-content">
|
||||
<form #myForm="ngForm">
|
||||
<nbp-input-text [(ngModel)]="formData.name" name="name" nbpLabel="Nome" required>
|
||||
</nbp-input-text>
|
||||
|
||||
<nbp-input-text [(ngModel)]="formData.email" name="email" nbpLabel="Email" required>
|
||||
</nbp-input-text>
|
||||
|
||||
<nbp-textarea [(ngModel)]="formData.message" name="message" nbpLabel="Messaggio">
|
||||
</nbp-textarea>
|
||||
</form>
|
||||
</div>
|
||||
</nbp-fid-side-popup>
|
||||
|
||||
<!-- Esempio 3: Popup piccolo con solo icona di chiusura -->
|
||||
<nbp-button nbpLabel="Chiudi" [nbpStyle]="NbpStyle.PRIMARY" (nbpClick)="showInfoPopup = true">
|
||||
</nbp-button>
|
||||
|
||||
<nbp-fid-side-popup [(isOpen)]="showInfoPopup" [nbpTitle]="'Informazioni'" [nbpSize]="NbpSize.SM"
|
||||
[nbpStyle]="NbpStyle.DEFAULT">
|
||||
<div class="popup-content">
|
||||
<p>Questo è un popup informativo semplice.</p>
|
||||
<p>Non ha bottoni nel footer, solo l'icona di chiusura.</p>
|
||||
</div>
|
||||
</nbp-fid-side-popup>
|
||||
<h3>Font Awesome Icon</h3>
|
||||
<div>
|
||||
<i class="fa fa-leaf fa-fw"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Table</h3>
|
||||
<div>
|
||||
<nbp-fid-table #agGrid style="display: block; width: 100%; height: 500px;" id="myGrid" class="ag-theme-balham"
|
||||
[modules]="modules" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowData]="rowData"
|
||||
[multiSortKey]="multiSortKey"></nbp-fid-table>
|
||||
</div>
|
||||
|
||||
<h3>Fideuram Toggle Tabset (.nbp-tab-bar-title + .tab-bar-title + nbp-fid-toggle-tabset)</h3>
|
||||
<div class="nbp-tab-bar-title widget-fideuram">
|
||||
<div class="tab-bar-title">Title:</div>
|
||||
<nbp-fid-toggle-tabset>
|
||||
<nbp-fid-toggle-tab disabled="true" title="Scheda 0">
|
||||
<h3>Scheda 0 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-fid-toggle-tab>
|
||||
<nbp-fid-toggle-tab [tabTemplate]="tabTemplate" active="true" title="Scheda 1">
|
||||
<h3>Scheda 1 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-fid-toggle-tab>
|
||||
<nbp-fid-toggle-tab title="Scheda 2">
|
||||
<h3>Scheda 2 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-fid-toggle-tab>
|
||||
<nbp-fid-toggle-tab title="Scheda 3">
|
||||
<h3>Scheda 3 - Selezionata</h3>
|
||||
<span>{{ longText }}</span>
|
||||
</nbp-fid-toggle-tab>
|
||||
</nbp-fid-toggle-tabset>
|
||||
|
||||
<ng-template #tabTemplate>
|
||||
Tab Template
|
||||
<nbp-tooltip [name]="'tooltipWithIconInTab'" [nbpStyle]="NbpStyle.DEFAULT"
|
||||
[nbpVisibilityStrategy]="'hover'" [nbpAlign]="NbpStyle.LEFT" [nbpText]="'Sono un tooltip'">
|
||||
<span class="fa fa-info-circle primary-color-100"></span>
|
||||
</nbp-tooltip>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
@import "../../../assets/xdce-module-widget-fideuram/styles/_mixins";
|
||||
|
||||
.showcase-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
|
||||
h3 {
|
||||
margin-top: 3rem;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
padding: .1rem 0;
|
||||
border-bottom: 1px solid #c00;
|
||||
margin-bottom: .7rem;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.combo-container-showcase {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
& > * {
|
||||
flex-grow: .25;
|
||||
}
|
||||
}
|
||||
|
||||
.showcase-container-left {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.showcase-container-right {
|
||||
flex-grow: 1;
|
||||
|
||||
.isp-corporate-mode-wrapper .dropdown-list > .dropdown-list-item:nth-child(3){
|
||||
padding-left: 15px;
|
||||
border-top: unset;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
nbp-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
153
tools/gulp/inline-resources.js
Normal file
153
tools/gulp/inline-resources.js
Normal file
@ -0,0 +1,153 @@
|
||||
/* eslint-disable */
|
||||
// https://github.com/filipesilva/angular-quickstart-lib/blob/master/inline-resources.js
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const glob = require('glob');
|
||||
const sass = require('node-sass');
|
||||
const tildeImporter = require('node-sass-tilde-importer');
|
||||
|
||||
/**
|
||||
* Simple Promiseify function that takes a Node API and return a version that supports promises.
|
||||
* We use promises instead of synchronized functions to make the process less I/O bound and
|
||||
* faster. It also simplifies the code.
|
||||
*/
|
||||
function promiseify(fn) {
|
||||
return function () {
|
||||
const args = [].slice.call(arguments, 0);
|
||||
return new Promise((resolve, reject) => {
|
||||
fn.apply(this, args.concat([function (err, value) {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(value);
|
||||
}
|
||||
}]));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const readFile = promiseify(fs.readFile);
|
||||
const writeFile = promiseify(fs.writeFile);
|
||||
|
||||
/**
|
||||
* Inline resources in a tsc/ngc compilation.
|
||||
* @param projectPath {string} Path to the project.
|
||||
*/
|
||||
function inlineResources(projectPath) {
|
||||
|
||||
// Match only TypeScript files in projectPath.
|
||||
const files = glob.sync('**/*.ts', {cwd: projectPath});
|
||||
|
||||
// For each file, inline the templates and styles under it and write the new file.
|
||||
return Promise.all(files.map(filePath => {
|
||||
const fullFilePath = path.join(projectPath, filePath);
|
||||
return readFile(fullFilePath, 'utf-8')
|
||||
.then(content => inlineResourcesFromString(content, url => {
|
||||
// Resolve the template url.
|
||||
return path.join(path.dirname(fullFilePath), url);
|
||||
}))
|
||||
.then(content => writeFile(fullFilePath, content))
|
||||
.catch(err => {
|
||||
console.error('An error occured: ', err);
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline resources from a string content.
|
||||
* @param content {string} The source file's content.
|
||||
* @param urlResolver {Function} A resolver that takes a URL and return a path.
|
||||
* @returns {string} The content with resources inlined.
|
||||
*/
|
||||
function inlineResourcesFromString(content, urlResolver) {
|
||||
// Curry through the inlining functions.
|
||||
return [
|
||||
inlineTemplate,
|
||||
inlineStyle,
|
||||
removeModuleId
|
||||
].reduce((content, fn) => fn(content, urlResolver), content);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline the templates for a source file. Simply search for instances of `templateUrl: ...` and
|
||||
* replace with `template: ...` (with the content of the file included).
|
||||
* @param content {string} The source file's content.
|
||||
* @param urlResolver {Function} A resolver that takes a URL and return a path.
|
||||
* @return {string} The content with all templates inlined.
|
||||
*/
|
||||
function inlineTemplate(content, urlResolver) {
|
||||
return content.replace(/templateUrl:\s*'([^']+?\.html)'/g, function (m, templateUrl) {
|
||||
const templateFile = urlResolver(templateUrl);
|
||||
const templateContent = fs.readFileSync(templateFile, 'utf-8');
|
||||
return `template: \`${templateContent}\``;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Inline the styles for a source file. Simply search for instances of `styleUrls: [...]` and
|
||||
* replace with `styles: [...]` (with the content of the file included).
|
||||
* @param urlResolver {Function} A resolver that takes a URL and return a path.
|
||||
* @param content {string} The source file's content.
|
||||
* @return {string} The content with all styles inlined.
|
||||
*/
|
||||
function inlineStyle(content, urlResolver) {
|
||||
return content.replace(/styleUrls\s*:\s*(\[[\s\S]*?\])/gm, function (m, styleUrls) {
|
||||
const urls = eval(styleUrls);
|
||||
return 'styles: ['
|
||||
+ urls.map(styleUrl => {
|
||||
const styleFile = urlResolver(styleUrl);
|
||||
const originContent = fs.readFileSync(styleFile, 'utf-8');
|
||||
const styleContent = styleFile.endsWith('.scss') ? buildSass(originContent, styleFile) : originContent;
|
||||
const shortenedStyle = styleContent
|
||||
.replace(/([\n\r]\s*)+/gm, ' ')
|
||||
.replace(/"/g, '\\"');
|
||||
return `"${shortenedStyle}"`;
|
||||
})
|
||||
.join(',\n')
|
||||
+ ']';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* build sass content to css
|
||||
* @param content {string} the css content
|
||||
* @param sourceFile {string} the scss file sourceFile
|
||||
* @return {string} the generated css, empty string if error occured
|
||||
*/
|
||||
function buildSass(content, sourceFile) {
|
||||
try {
|
||||
const result = sass.renderSync({
|
||||
data: content,
|
||||
file: sourceFile,
|
||||
importer: tildeImporter
|
||||
});
|
||||
return result.css.toString()
|
||||
} catch (e) {
|
||||
console.error('\x1b[41m');
|
||||
console.error('at ' + sourceFile + ':' + e.line + ":" + e.column);
|
||||
console.error(e.formatted);
|
||||
console.error('\x1b[0m');
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove every mention of `moduleId: module.id`.
|
||||
* @param content {string} The source file's content.
|
||||
* @returns {string} The content with all moduleId: mentions removed.
|
||||
*/
|
||||
function removeModuleId(content) {
|
||||
return content.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
|
||||
}
|
||||
|
||||
module.exports = inlineResources;
|
||||
module.exports.inlineResourcesFromString = inlineResourcesFromString;
|
||||
|
||||
// Run inlineResources if module is being called directly from the CLI with arguments.
|
||||
if (require.main === module && process.argv.length > 2) {
|
||||
console.log('Inlining resources from project:', process.argv[2]);
|
||||
return inlineResources(process.argv[2]);
|
||||
}
|
||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./src",
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"rootDir": "./src",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [],
|
||||
"target": "es5",
|
||||
"sourceMap": true
|
||||
}
|
||||
}
|
||||
104
tslint.json
Normal file
104
tslint.json
Normal file
@ -0,0 +1,104 @@
|
||||
{
|
||||
"rulesDirectory": [
|
||||
"node_modules/codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"curly": true,
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"label-position": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
"static-before-instance",
|
||||
"variables-before-functions"
|
||||
],
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-empty": false,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": false,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unused-expression": true,
|
||||
"no-unused-variable": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": [
|
||||
"always"
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"variable-name": false,
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"directive-selector": [true, "attribute", "", "camelCase"],
|
||||
"component-selector": [true, "element", "", "kebab-case"],
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user