From 8ef741268f0eab8821e0dd301e98ae58082afd1d Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Tue, 26 Jun 2018 17:25:20 +0300 Subject: [PATCH] feat(theme): add Spinner component --- docs/assets/images/components/spinner.svg | 37 ++ docs/structure.ts | 19 +- package-lock.json | 402 ++++++++++++------ package.json | 6 +- .../spinner/_spinner.component.theme.scss | 82 ++++ .../components/spinner/spinner.component.scss | 36 ++ .../components/spinner/spinner.component.ts | 136 ++++++ .../components/spinner/spinner.directive.ts | 126 ++++++ .../components/spinner/spinner.module.ts | 21 + .../theme/components/spinner/spinner.spec.ts | 59 +++ .../components/tabset/tabset.component.scss | 1 - src/framework/theme/index.ts | 2 + .../theme/styles/global/_components.scss | 2 + .../theme/styles/themes/_cosmic.scss | 2 + .../theme/styles/themes/_default.scss | 19 + src/playground/playground-routing.module.ts | 30 ++ src/playground/playground.module.ts | 12 + .../spinner/spinner-button.component.ts | 62 +++ .../spinner/spinner-card.component.ts | 27 ++ .../spinner/spinner-colors.component.html | 42 ++ .../spinner/spinner-colors.component.ts | 15 + .../spinner/spinner-sizes.component.html | 41 ++ .../spinner/spinner-sizes.component.ts | 15 + .../spinner/spinner-tabs.component.ts | 42 ++ 24 files changed, 1082 insertions(+), 154 deletions(-) create mode 100644 docs/assets/images/components/spinner.svg create mode 100644 src/framework/theme/components/spinner/_spinner.component.theme.scss create mode 100644 src/framework/theme/components/spinner/spinner.component.scss create mode 100644 src/framework/theme/components/spinner/spinner.component.ts create mode 100644 src/framework/theme/components/spinner/spinner.directive.ts create mode 100644 src/framework/theme/components/spinner/spinner.module.ts create mode 100644 src/framework/theme/components/spinner/spinner.spec.ts create mode 100644 src/playground/spinner/spinner-button.component.ts create mode 100644 src/playground/spinner/spinner-card.component.ts create mode 100644 src/playground/spinner/spinner-colors.component.html create mode 100644 src/playground/spinner/spinner-colors.component.ts create mode 100644 src/playground/spinner/spinner-sizes.component.html create mode 100644 src/playground/spinner/spinner-sizes.component.ts create mode 100644 src/playground/spinner/spinner-tabs.component.ts diff --git a/docs/assets/images/components/spinner.svg b/docs/assets/images/components/spinner.svg new file mode 100644 index 0000000000..8b80395e31 --- /dev/null +++ b/docs/assets/images/components/spinner.svg @@ -0,0 +1,37 @@ + + + + 4132A270-0635-4179-BE32-E6BD0F1089CF + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/structure.ts b/docs/structure.ts index 0a66ef0b88..df51ddbad4 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -249,6 +249,14 @@ export const structure = [ 'NbCheckboxComponent', ], }, + { + type: 'tabs', + name: 'Spinner', + icon: 'spinner.svg', + source: [ + 'NbSpinnerDirective', + ], + }, { type: 'tabs', name: 'Progress Bar', @@ -316,17 +324,6 @@ export const structure = [ }, ], }, - { - type: 'page', - name: 'SpinnerService', - children: [ - { - type: 'block', - block: 'component', - source: 'NbSpinnerService', - }, - ], - }, { type: 'page', name: 'MediaBreakpoints', diff --git a/package-lock.json b/package-lock.json index c3f9e8d899..188e89fef5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2650,15 +2650,45 @@ } }, "browserstack-local": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/browserstack-local/-/browserstack-local-1.3.0.tgz", - "integrity": "sha1-/oDvBc6JVMTWJuNQLrYtYJA7Qjc=", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/browserstack-local/-/browserstack-local-1.3.3.tgz", + "integrity": "sha512-0X1bqi4NzY/7P1l3rOj5NKteH6DPgq+Mwnsj7G+t6p5lgr7R8kSBzblNyZp+HTu0YzyVZL2o/P6m+OJs0u50ng==", "dev": true, "requires": { - "https-proxy-agent": "^1.0.0", + "https-proxy-agent": "^2.2.1", "is-running": "^2.0.0", "sinon": "^1.17.6", "temp-fs": "^0.9.9" + }, + "dependencies": { + "agent-base": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.0.tgz", + "integrity": "sha512-c+R/U5X+2zz2+UCrCFv6odQzJdoqI+YecuhnAJLa1zYaMc13zPfwMwZrr91Pd1DYNo/yPRbiM4WVf9whgwFsIg==", + "dev": true, + "requires": { + "es6-promisify": "^5.0.0" + } + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "https-proxy-agent": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz", + "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==", + "dev": true, + "requires": { + "agent-base": "^4.1.0", + "debug": "^3.1.0" + } + } } }, "browserstacktunnel-wrapper": { @@ -4355,9 +4385,9 @@ } }, "cross-env": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.1.5.tgz", - "integrity": "sha512-GSiNTbvTU3pXzewRKGP0Y+rVP2CzifY2pqSEdtHzLLj41pRdkrgY7e4uSnBoR/pmYaqZr/lwwjg/Q4kNX30hWQ==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.1.6.tgz", + "integrity": "sha512-VWTDq+G4v383SzgRS7jsAVWqEWF0aKZpDz1GVjhONvPRgHB1LnxP2sXUVFKbykHkPSnfRKS8YdiDevWFwZmQ9g==", "dev": true, "requires": { "cross-spawn": "^5.1.0", @@ -4785,9 +4815,9 @@ "dev": true }, "deep-extend": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz", - "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true }, "deep-is": { @@ -5484,6 +5514,16 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz", "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=", "dev": true + }, + "ws": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz", + "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=", + "dev": true, + "requires": { + "options": ">=0.0.5", + "ultron": "1.0.x" + } } } }, @@ -5521,6 +5561,16 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz", "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=", "dev": true + }, + "ws": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz", + "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=", + "dev": true, + "requires": { + "options": ">=0.0.5", + "ultron": "1.0.x" + } } } }, @@ -6470,9 +6520,9 @@ } }, "firebase-tools": { - "version": "3.18.4", - "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-3.18.4.tgz", - "integrity": "sha1-SftA4eGnyXeSG3s+zhLajNsTlVA=", + "version": "3.18.6", + "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-3.18.6.tgz", + "integrity": "sha1-iSn562OmCjwMVNWamOJIXYyyUNA=", "dev": true, "requires": { "@google-cloud/functions-emulator": "^1.0.0-beta.4", @@ -6497,7 +6547,7 @@ "inquirer": "^0.12.0", "is": "^3.2.1", "jsonschema": "^1.0.2", - "jsonwebtoken": "^7.4.1", + "jsonwebtoken": "^8.2.1", "lodash": "^4.6.1", "minimatch": "^3.0.4", "open": "^0.0.5", @@ -6533,14 +6583,14 @@ "dev": true }, "tar": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.2.tgz", - "integrity": "sha512-BfkE9CciGGgDsATqkikUHrQrraBCO+ke/1f6SFAEMnxyyfN9lxC+nW1NFWMpqH865DhHIy9vQi682gk1X7friw==", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.4.tgz", + "integrity": "sha512-mq9ixIYfNF9SK0IS/h2HKMu8Q2iaCuhDDsZhdEag/FHv8fOaYld4vN7ouMgcSSt5WKZzPs8atclTcJm36OTh4w==", "dev": true, "requires": { "chownr": "^1.0.1", "fs-minipass": "^1.2.5", - "minipass": "^2.2.4", + "minipass": "^2.3.3", "minizlib": "^1.1.0", "mkdirp": "^0.5.0", "safe-buffer": "^5.1.2", @@ -8308,17 +8358,17 @@ } }, "google-auth-library": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-1.5.0.tgz", - "integrity": "sha512-xpibA/hkq4waBcpIkSJg4GiDAqcBWjJee3c47zj7xP3RQ0A9mc8MP3Vc9sc8SGRoDYA0OszZxTjW7SbcC4pJIA==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-1.6.1.tgz", + "integrity": "sha512-jYiWC8NA9n9OtQM7ANn0Tk464do9yhKEtaJ72pKcaBiEwn4LwcGYIYOfwtfsSm3aur/ed3tlSxbmg24IAT6gAg==", "dev": true, "requires": { "axios": "^0.18.0", "gcp-metadata": "^0.6.3", "gtoken": "^2.3.0", - "jws": "^3.1.4", + "jws": "^3.1.5", "lodash.isstring": "^4.0.1", - "lru-cache": "^4.1.2", + "lru-cache": "^4.1.3", "retry-axios": "^0.3.2" } }, @@ -10124,12 +10174,6 @@ "integrity": "sha1-Sj6XTsDLqQBNP8bN5yCeppNopiE=", "dev": true }, - "isemail": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.2.0.tgz", - "integrity": "sha1-vgPfjMPineTSxd9lASY/H6RZXpo=", - "dev": true - }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -10392,22 +10436,14 @@ } }, "jasmine": { - "version": "2.99.0", - "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.99.0.tgz", - "integrity": "sha1-jKctEC5jm4Z8ZImFbg4YqceqQrc=", + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.8.0.tgz", + "integrity": "sha1-awicChFXax8W3xG4AUbZHU6Lij4=", "dev": true, "requires": { "exit": "^0.1.2", "glob": "^7.0.6", - "jasmine-core": "~2.99.0" - }, - "dependencies": { - "jasmine-core": { - "version": "2.99.1", - "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.99.1.tgz", - "integrity": "sha1-5kAN8ea1bhMLYcS80JPap/boyhU=", - "dev": true - } + "jasmine-core": "~2.8.0" } }, "jasmine-core": { @@ -10422,6 +10458,13 @@ "integrity": "sha1-5dguaimiX2YsZA5MMnDC+acTh+c=", "requires": { "lodash": "3.10.0" + }, + "dependencies": { + "lodash": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.0.tgz", + "integrity": "sha1-k9UcZygopEFqEq9XIguoqHN+L7s=" + } } }, "jasmine-spec-reporter": { @@ -10445,18 +10488,6 @@ "integrity": "sha1-2t2e8BkkvHKLA/L3l5vb1i96Kqo=", "dev": true }, - "joi": { - "version": "6.10.1", - "resolved": "https://registry.npmjs.org/joi/-/joi-6.10.1.tgz", - "integrity": "sha1-TVDDGAeRIgAP5fFq8f+OGRe3fgY=", - "dev": true, - "requires": { - "hoek": "2.x.x", - "isemail": "1.x.x", - "moment": "2.x.x", - "topo": "1.x.x" - } - }, "join-path": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/join-path/-/join-path-1.1.1.tgz", @@ -10679,16 +10710,29 @@ "dev": true }, "jsonwebtoken": { - "version": "7.4.3", - "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-7.4.3.tgz", - "integrity": "sha1-d/UCHeBYtgWheD+hKD6ZgS5kVjg=", + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.2.2.tgz", + "integrity": "sha512-rFFq7ow/JpPzwgaz4IyRL9cp7f4ptjW92eZgsQyqkysLBmDjSSBhnKfQESoq0GU+qJXK/CQ0o4shgwbUPiFCdw==", "dev": true, "requires": { - "joi": "^6.10.1", - "jws": "^3.1.4", + "jws": "^3.1.5", + "lodash.includes": "^4.3.0", + "lodash.isboolean": "^3.0.3", + "lodash.isinteger": "^4.0.4", + "lodash.isnumber": "^3.0.3", + "lodash.isplainobject": "^4.0.6", + "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", - "ms": "^2.0.0", + "ms": "^2.1.1", "xtend": "^4.0.1" + }, + "dependencies": { + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true + } } }, "jsprim": { @@ -11331,9 +11375,10 @@ } }, "lodash": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.0.tgz", - "integrity": "sha1-k9UcZygopEFqEq9XIguoqHN+L7s=" + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", + "dev": true }, "lodash._basecopy": { "version": "3.0.1", @@ -11431,6 +11476,12 @@ "lodash._root": "^3.0.0" } }, + "lodash.includes": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz", + "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=", + "dev": true + }, "lodash.isarguments": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", @@ -11443,6 +11494,24 @@ "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", "dev": true }, + "lodash.isboolean": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz", + "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=", + "dev": true + }, + "lodash.isinteger": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz", + "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=", + "dev": true + }, + "lodash.isnumber": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz", + "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=", + "dev": true + }, "lodash.isobject": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.4.1.tgz", @@ -11452,6 +11521,12 @@ "lodash._objecttypes": "~2.4.1" } }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", + "dev": true + }, "lodash.isstring": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", @@ -12070,12 +12145,12 @@ } }, "minipass": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.1.tgz", - "integrity": "sha512-liT0Gjaz7OHXg2qsfefVFfryBE9uAsqVFWQ6wVf4KNMzI2edsrCDjdGDpTxRaykbxhSKHu/SDtRRcMEcCcTQ2g==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.3.tgz", + "integrity": "sha512-/jAn9/tEX4gnpyRATxgHEOV6xbcyxgT7iUnxo9Y3+OB0zX00TgKIv/2FZCf5brBbICcwbLqVv2ImjvWWrQMSYw==", "dev": true, "requires": { - "safe-buffer": "^5.1.1", + "safe-buffer": "^5.1.2", "yallist": "^3.0.0" }, "dependencies": { @@ -12195,12 +12270,6 @@ "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==", "dev": true }, - "moment": { - "version": "2.22.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz", - "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ==", - "dev": true - }, "morgan": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.0.tgz", @@ -14073,9 +14142,9 @@ "optional": true }, "protractor": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.2.2.tgz", - "integrity": "sha512-KxYw0ySvmWFQHpbSRvrHA5HLlyeAkCENSUZvJroKV1u0gWXX9kvHjc9wEK5IoW7h9UfPV1F3R2i+Own0go5s0g==", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.3.2.tgz", + "integrity": "sha512-pw4uwwiy5lHZjIguxNpkEwJJa7hVz+bJsvaTI+IbXlfn2qXwzbF8eghW/RmrZwE2sGx82I8etb8lVjQ+JrjejA==", "dev": true, "requires": { "@types/node": "^6.0.46", @@ -14084,11 +14153,11 @@ "blocking-proxy": "^1.0.0", "chalk": "^1.1.3", "glob": "^7.0.3", - "jasmine": "^2.5.3", + "jasmine": "2.8.0", "jasminewd2": "^2.1.0", "optimist": "~0.6.0", "q": "1.4.1", - "saucelabs": "~1.3.0", + "saucelabs": "^1.5.0", "selenium-webdriver": "3.6.0", "source-map-support": "~0.4.0", "webdriver-js-extender": "^1.0.0", @@ -14130,15 +14199,6 @@ "pinkie-promise": "^2.0.0" } }, - "saucelabs": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz", - "integrity": "sha1-0kDoAJ33+ocwbsRXimm6O1xCT+4=", - "dev": true, - "requires": { - "https-proxy-agent": "^1.0.0" - } - }, "source-map-support": { "version": "0.4.18", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz", @@ -14460,12 +14520,12 @@ "dev": true }, "rc": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz", - "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "requires": { - "deep-extend": "^0.5.1", + "deep-extend": "^0.6.0", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" @@ -14911,9 +14971,9 @@ "dev": true }, "retry-request": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.3.1.tgz", - "integrity": "sha512-PjAmtWIxjNj4Co/6FRtBl8afRP3CxrrIAnUzb1dzydfROd+6xt7xAebFeskgQgkfFf8NmzrXIoaB3HxmswXyxw==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.3.2.tgz", + "integrity": "sha512-WIiGp37XXDC6e7ku3LFoi7LCL/Gs9luGeeqvbPRb+Zl6OQMw4RCRfSaW+aLfE6lhz1R941UavE6Svl3Dm5xGIQ==", "dev": true, "requires": { "request": "^2.81.0", @@ -17450,15 +17510,6 @@ "repeat-string": "^1.6.1" } }, - "topo": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/topo/-/topo-1.1.0.tgz", - "integrity": "sha1-6ddRYV0buH3IZdsYL6HKCl71NtU=", - "dev": true, - "requires": { - "hoek": "2.x.x" - } - }, "toposort": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz", @@ -18015,13 +18066,110 @@ } }, "universal-analytics": { - "version": "0.4.16", - "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.4.16.tgz", - "integrity": "sha512-I9vK/S6NI2rbPs4UMJs5uAJR7WKUnSQliN0EEl48j7XpVjR87n2wEXp1pMBGGSI5sIIJrKFyVg/nyGomXPPVCg==", + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.4.17.tgz", + "integrity": "sha512-N2JFymxv4q2N5Wmftc5JCcM5t1tp+sc1kqeDRhDL4XLY5X6PBZ0kav2wvVUZJJMvmSq3WXrmzDu062p+cSFYfQ==", "dev": true, "requires": { - "request": "2.x", + "debug": "^3.0.0", + "request": "2.86.0", "uuid": "^3.0.0" + }, + "dependencies": { + "boom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz", + "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=", + "dev": true, + "requires": { + "hoek": "4.x.x" + } + }, + "cryptiles": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz", + "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=", + "dev": true, + "requires": { + "boom": "5.x.x" + }, + "dependencies": { + "boom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz", + "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==", + "dev": true, + "requires": { + "hoek": "4.x.x" + } + } + } + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "hawk": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz", + "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==", + "dev": true, + "requires": { + "boom": "4.x.x", + "cryptiles": "3.x.x", + "hoek": "4.x.x", + "sntp": "2.x.x" + } + }, + "hoek": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", + "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==", + "dev": true + }, + "request": { + "version": "2.86.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.86.0.tgz", + "integrity": "sha512-BQZih67o9r+Ys94tcIW4S7Uu8pthjrQVxhsZ/weOwHbDfACxvIyvnAbzFQxjy1jMtvFSzv5zf4my6cZsJBbVzw==", + "dev": true, + "requires": { + "aws-sign2": "~0.7.0", + "aws4": "^1.6.0", + "caseless": "~0.12.0", + "combined-stream": "~1.0.5", + "extend": "~3.0.1", + "forever-agent": "~0.6.1", + "form-data": "~2.3.1", + "har-validator": "~5.0.3", + "hawk": "~6.0.2", + "http-signature": "~1.2.0", + "is-typedarray": "~1.0.0", + "isstream": "~0.1.2", + "json-stringify-safe": "~5.0.1", + "mime-types": "~2.1.17", + "oauth-sign": "~0.8.2", + "performance-now": "^2.1.0", + "qs": "~6.5.1", + "safe-buffer": "^5.1.1", + "tough-cookie": "~2.3.3", + "tunnel-agent": "^0.6.0", + "uuid": "^3.1.0" + } + }, + "sntp": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz", + "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==", + "dev": true, + "requires": { + "hoek": "4.x.x" + } + } } }, "universalify": { @@ -18638,12 +18786,6 @@ "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=", "dev": true }, - "walkdir": { - "version": "0.0.11", - "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.11.tgz", - "integrity": "sha1-oW0CXrkxvQO1LzCMrtD0D86+lTI=", - "dev": true - }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", @@ -18665,14 +18807,14 @@ } }, "wd": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/wd/-/wd-1.7.0.tgz", - "integrity": "sha512-dCbHgwqxKNuEEmN/bjfL/vr7JxU3Y7THAiEmSGt4XGEAlPr/H0nMOZerF+eaESf6+umPtpEZJcNFmmtKjMZxhg==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/wd/-/wd-1.9.0.tgz", + "integrity": "sha512-etqaVS5YFPuwaBRXNFnG0UIoCJHIPoWbVgdbK0v8MQRPQx2sNJc/wu0cRzLEuQjhGt/b0NGxcO1CvA5IAqoWrg==", "dev": true, "requires": { - "archiver": "1.3.0", + "archiver": "2.1.1", "async": "2.0.1", - "lodash": "4.16.2", + "lodash": "4.17.10", "mkdirp": "^0.5.1", "q": "1.4.1", "request": "2.85.0", @@ -18680,23 +18822,6 @@ "vargs": "0.1.0" }, "dependencies": { - "archiver": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/archiver/-/archiver-1.3.0.tgz", - "integrity": "sha1-TyGU1tj5nfP1MeaIHxTxXVX6ryI=", - "dev": true, - "requires": { - "archiver-utils": "^1.3.0", - "async": "^2.0.0", - "buffer-crc32": "^0.2.1", - "glob": "^7.0.0", - "lodash": "^4.8.0", - "readable-stream": "^2.0.0", - "tar-stream": "^1.5.0", - "walkdir": "^0.0.11", - "zip-stream": "^1.1.0" - } - }, "async": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/async/-/async-2.0.1.tgz", @@ -18754,9 +18879,9 @@ "dev": true }, "lodash": { - "version": "4.16.2", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.16.2.tgz", - "integrity": "sha1-PmJtuCcEimmSgaihJSJjJs/A5lI=", + "version": "4.17.10", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==", "dev": true }, "request": { @@ -19423,8 +19548,7 @@ }, "ws": { "version": "1.1.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz", - "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=", + "resolved": "", "dev": true, "requires": { "options": ">=0.0.5", diff --git a/package.json b/package.json index f3beab749c..9452181ba9 100644 --- a/package.json +++ b/package.json @@ -115,12 +115,12 @@ "@types/leaflet": "1.0.60", "@types/node": "6.0.90", "angular-cli-ghpages": "0.5.0", - "browserstack-local": "1.3.0", + "browserstack-local": "^1.3.3", "codelyzer": "4.0.2", "conventional-changelog-cli": "1.3.4", "del": "3.0.0", "doc-prsr": "^2.1.0", - "firebase-tools": "^3.17.4", + "firebase-tools": "^3.18.6", "gulp": "3.9.1", "gulp-autoprefixer": "3.1.1", "gulp-clean-css": "3.0.4", @@ -144,7 +144,7 @@ "karma-sauce-launcher": "1.2.0", "karma-spec-reporter": "0.0.32", "npm-run-all": "4.0.1", - "protractor": "5.2.2", + "protractor": "^5.3.2", "pump": "1.0.2", "rimraf": "2.6.1", "rollup-plugin-node-resolve": "3.0.0", diff --git a/src/framework/theme/components/spinner/_spinner.component.theme.scss b/src/framework/theme/components/spinner/_spinner.component.theme.scss new file mode 100644 index 0000000000..aa144d079e --- /dev/null +++ b/src/framework/theme/components/spinner/_spinner.component.theme.scss @@ -0,0 +1,82 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin nb-spinner-theme() { + + .nb-spinner-container { + position: relative; + } + + nb-spinner { + background-color: nb-theme(spinner-bg); + + &.active-spinner .spin-circle { + border-right-color: nb-theme(spinner-active-bg); + } + &.disabled-spinner .spin-circle { + border-right-color: nb-theme(spinner-disabled-bg); + } + &.primary-spinner .spin-circle { + border-right-color: nb-theme(spinner-primary-bg); + } + &.info-spinner .spin-circle { + border-right-color: nb-theme(spinner-info-bg); + } + &.success-spinner .spin-circle { + border-right-color: nb-theme(spinner-success-bg); + } + &.warning-spinner .spin-circle { + border-right-color: nb-theme(spinner-warning-bg); + } + &.danger-spinner .spin-circle { + border-right-color: nb-theme(spinner-danger-bg); + } + + .spin-circle { + border-left-color: nb-theme(spinner-circle-bg); + border-top-color: nb-theme(spinner-circle-bg); + border-bottom-color: nb-theme(spinner-circle-bg); + } + + .message { + color: nb-theme(spinner-fg); + } + + &.xxsmall-spinner { + font-size: nb-theme(spinner-xxsmall); + } + &.xsmall-spinner { + font-size: nb-theme(spinner-xsmall); + } + &.small-spinner { + font-size: nb-theme(spinner-small); + } + &.medium-spinner { + font-size: nb-theme(spinner-medium); + } + &.large-spinner { + font-size: nb-theme(spinner-large); + } + &.xlarge-spinner { + font-size: nb-theme(spinner-xlarge); + } + &.xxlarge-spinner { + font-size: nb-theme(spinner-xxlarge); + } + } + + @-webkit-keyframes spin { + 0% { + transform: rotate(0deg); + } + 40% { + transform: rotate(230deg); + } + 100% { + transform: rotate(360deg); + } + } +} diff --git a/src/framework/theme/components/spinner/spinner.component.scss b/src/framework/theme/components/spinner/spinner.component.scss new file mode 100644 index 0000000000..be3feaf1d2 --- /dev/null +++ b/src/framework/theme/components/spinner/spinner.component.scss @@ -0,0 +1,36 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +:host { + opacity: 1; + position: absolute; + border-radius: inherit; + top: 0; + right: 0; + left: 0; + bottom: 0; + overflow: hidden; + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; + visibility: visible; + + .spin-circle { + animation: spin 0.8s infinite linear; + border-radius: 50%; + border-style: solid; + border-width: 0.125em; + width: 1em; + height: 1em; + } + + .message { + margin-left: 0.5rem; + line-height: 1rem; + font-size: 1rem; + } +} diff --git a/src/framework/theme/components/spinner/spinner.component.ts b/src/framework/theme/components/spinner/spinner.component.ts new file mode 100644 index 0000000000..830e1b8447 --- /dev/null +++ b/src/framework/theme/components/spinner/spinner.component.ts @@ -0,0 +1,136 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component, HostBinding, Input } from '@angular/core'; + +/** + * Styled spinner component + */ +@Component({ + selector: 'nb-spinner', + template: ` + + {{ message }} + `, + styleUrls: ['./spinner.component.scss'], +}) +export class NbSpinnerComponent { + + static readonly SIZE_XXSMALL = 'xxsmall'; + static readonly SIZE_XSMALL = 'xsmall'; + static readonly SIZE_SMALL = 'small'; + static readonly SIZE_MEDIUM = 'medium'; + static readonly SIZE_LARGE = 'large'; + static readonly SIZE_XLARGE = 'xlarge'; + static readonly SIZE_XXLARGE = 'xxlarge'; + + static readonly STATUS_ACTIVE = 'active'; + static readonly STATUS_DISABLED = 'disabled'; + static readonly STATUS_PRIMARY = 'primary'; + static readonly STATUS_INFO = 'info'; + static readonly STATUS_SUCCESS = 'success'; + static readonly STATUS_WARNING = 'warning'; + static readonly STATUS_DANGER = 'danger'; + + size: string = NbSpinnerComponent.SIZE_MEDIUM; + status: string = NbSpinnerComponent.STATUS_ACTIVE; + + /** + * Loading text that is shown near the icon + * @type string + */ + @Input() message: string = 'Loading...'; + + /** + * Spiiner size, available sizes: + * xxsmall, xsmall, small, medium, large, xlarge, xxlarge + * @param {string} val + */ + @Input('size') + private set setSize(val: string) { + this.size = val; + } + + /** + * Spiiner status (adds specific styles): + * active, disabled, primary, info, success, warning, danger + * @param {string} val + */ + @Input('status') + private set setStatus(val: string) { + this.status = val; + } + + @HostBinding('class.xxsmall-spinner') + get xxsmall() { + return this.size === NbSpinnerComponent.SIZE_XXSMALL; + } + + @HostBinding('class.xsmall-spinner') + get xsmall() { + return this.size === NbSpinnerComponent.SIZE_XSMALL; + } + + @HostBinding('class.small-spinner') + get small() { + return this.size === NbSpinnerComponent.SIZE_SMALL; + } + + @HostBinding('class.medium-spinner') + get medium() { + return this.size === NbSpinnerComponent.SIZE_MEDIUM; + } + + @HostBinding('class.large-spinner') + get large() { + return this.size === NbSpinnerComponent.SIZE_LARGE; + } + + @HostBinding('class.xlarge-spinner') + get xlarge() { + return this.size === NbSpinnerComponent.SIZE_XLARGE; + } + + @HostBinding('class.xxlarge-spinner') + get xxlarge() { + return this.size === NbSpinnerComponent.SIZE_XXLARGE; + } + + @HostBinding('class.active-spinner') + get active() { + return this.status === NbSpinnerComponent.STATUS_ACTIVE; + } + + @HostBinding('class.disabled-spinner') + get disabled() { + return this.status === NbSpinnerComponent.STATUS_DISABLED; + } + + @HostBinding('class.primary-spinner') + get primary() { + return this.status === NbSpinnerComponent.STATUS_PRIMARY; + } + + @HostBinding('class.info-spinner') + get info() { + return this.status === NbSpinnerComponent.STATUS_INFO; + } + + @HostBinding('class.success-spinner') + get success() { + return this.status === NbSpinnerComponent.STATUS_SUCCESS; + } + + @HostBinding('class.warning-spinner') + get warning() { + return this.status === NbSpinnerComponent.STATUS_WARNING; + } + + @HostBinding('class.danger-spinner') + get danger() { + return this.status === NbSpinnerComponent.STATUS_DANGER; + } +} diff --git a/src/framework/theme/components/spinner/spinner.directive.ts b/src/framework/theme/components/spinner/spinner.directive.ts new file mode 100644 index 0000000000..c940006754 --- /dev/null +++ b/src/framework/theme/components/spinner/spinner.directive.ts @@ -0,0 +1,126 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { + ComponentFactoryResolver, + ComponentFactory, + ComponentRef, + Directive, + ElementRef, + Input, + OnInit, + Renderer2, + ViewContainerRef, HostBinding, +} from '@angular/core'; +import { NbSpinnerComponent } from './spinner.component'; + +/** + * Styled spinner directive + * + * @stacked-example(Spinner Showcase, spinner/spinner-card.component) + * + * + * ```ts + * + * Card Content + * + * ``` + * + * Could be colored using `status` property + * + * @stacked-example(Spinner Colors, spinner/spinner-colors.component) + * + * Available in different sizes with `size` property: + * + * @stacked-example(Spinner Sizes, spinner/spinner-sizes.component) + * + * It is also possible to place it into the button: + * @stacked-example(Buttons with spinner, spinner/spinner-button.component) + * + * Or tabs: + * @stacked-example(Spinner in tabs, spinner/spinner-tabs.component) + */ +@Directive({selector: '[nbSpinner]'}) +export class NbSpinnerDirective implements OnInit { + + spinner: ComponentRef; + componentFactory: ComponentFactory; + + @HostBinding('class.nb-spinner-container') isSpinnerExist = false; + + /** + * Spinner message shown next to the icon + * @type {string} + */ + @Input('nbSpinnerMessage') spinnerMessage: string; + + /** + * Spinner status color active, disabled, primary, info, success, warning, danger + * @type {string} + */ + @Input('nbSpinnerStatus') spinnerStatus: string; + + /** + * Spinner size, available sizes: xxsmall, xsmall, small, medium, large, xlarge, xxlarge + * @type {string} + */ + @Input('nbSpinnerSize') spinnerSize: string; + + /** + * Directive value - show or hide spinner + * @param {boolean} val + */ + @Input('nbSpinner') + set nbSpinner(val: boolean) { + if (this.componentFactory) { + if (val) { + this.show(); + } else { + this.hide(); + } + } else { + this.shouldShow = val; + } + } + + private shouldShow = false; + + constructor(private directiveView: ViewContainerRef, + private componentFactoryResolver: ComponentFactoryResolver, + private renderer: Renderer2, + private directiveElement: ElementRef) { + } + + ngOnInit() { + this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(NbSpinnerComponent); + if (this.shouldShow) { + this.show(); + } + } + + hide() { + if (this.isSpinnerExist) { + this.directiveView.remove(); + this.isSpinnerExist = false; + } + } + + show() { + if (!this.isSpinnerExist) { + this.spinner = this.directiveView.createComponent(this.componentFactory); + this.setInstanceInputs(this.spinner.instance); + this.spinner.changeDetectorRef.detectChanges(); + this.renderer.appendChild(this.directiveElement.nativeElement, this.spinner.location.nativeElement); + this.isSpinnerExist = true; + } + } + + setInstanceInputs(instance: NbSpinnerComponent) { + typeof this.spinnerMessage !== 'undefined' && (instance.message = this.spinnerMessage); + typeof this.spinnerStatus !== 'undefined' && (instance.status = this.spinnerStatus); + typeof this.spinnerSize !== 'undefined' && (instance.size = this.spinnerSize); + } +} diff --git a/src/framework/theme/components/spinner/spinner.module.ts b/src/framework/theme/components/spinner/spinner.module.ts new file mode 100644 index 0000000000..1fae235c2e --- /dev/null +++ b/src/framework/theme/components/spinner/spinner.module.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { NgModule } from '@angular/core'; +import { NbSharedModule } from '../shared/shared.module'; +import { NbSpinnerComponent } from './spinner.component'; +import { NbSpinnerDirective } from './spinner.directive'; + + +@NgModule({ + imports: [ + NbSharedModule, + ], + exports: [NbSpinnerComponent, NbSpinnerDirective], + declarations: [NbSpinnerComponent, NbSpinnerDirective], + entryComponents: [NbSpinnerComponent], +}) +export class NbSpinnerModule {} diff --git a/src/framework/theme/components/spinner/spinner.spec.ts b/src/framework/theme/components/spinner/spinner.spec.ts new file mode 100644 index 0000000000..d233311ad8 --- /dev/null +++ b/src/framework/theme/components/spinner/spinner.spec.ts @@ -0,0 +1,59 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NbSpinnerComponent } from './spinner.component'; + +describe('Component: NbSpinner', () => { + + let spinner: NbSpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [NbSpinnerComponent], + }); + + fixture = TestBed.createComponent(NbSpinnerComponent); + spinner = fixture.componentInstance; + }); + + it('should set class danger', () => { + spinner.status = 'danger'; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('danger-spinner')) + .toBeTruthy() + }); + + it('should set size small', () => { + spinner.size = 'small'; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('small-spinner')) + .toBeTruthy() + }); + + it('should set message', () => { + spinner.message = 'Loading your content...'; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.querySelector('.message').textContent) + .toEqual(spinner.message); + }); + + it('should not have message tab when no message', () => { + spinner.message = ''; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.querySelector('.message')) + .toBeNull(); + }); +}); diff --git a/src/framework/theme/components/tabset/tabset.component.scss b/src/framework/theme/components/tabset/tabset.component.scss index 2a877f967c..11db456a92 100644 --- a/src/framework/theme/components/tabset/tabset.component.scss +++ b/src/framework/theme/components/tabset/tabset.component.scss @@ -16,7 +16,6 @@ flex: 1; -ms-flex: 1 1 auto; overflow: auto; - display: none; &.content-active { display: block; diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts index 134850a450..72ee1557d4 100644 --- a/src/framework/theme/index.ts +++ b/src/framework/theme/index.ts @@ -43,3 +43,5 @@ export * from './components/chat/chat-message-quote.component'; export * from './components/chat/chat-message-text.component'; export * from './components/chat/chat-form.component'; export * from './components/chat/chat.module'; +export * from './components/spinner/spinner.component'; +export * from './components/spinner/spinner.module'; diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss index 6cca0ac345..248a9f6f3a 100644 --- a/src/framework/theme/styles/global/_components.scss +++ b/src/framework/theme/styles/global/_components.scss @@ -22,6 +22,7 @@ @import '../../components/context-menu/context-menu.component.theme'; @import '../../components/alert/alert.component.theme'; @import '../../components/chat/chat.component.theme'; +@import '../../components/spinner/spinner.component.theme'; @mixin nb-theme-components() { @@ -36,6 +37,7 @@ @include nb-user-theme(); @include nb-actions-theme(); @include nb-search-theme(); + @include nb-spinner-theme(); @include nb-checkbox-theme(); @include nb-progress-bar-theme(); @include nb-badge-theme(); diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index 6f8c62ba09..ed2e85f451 100644 --- a/src/framework/theme/styles/themes/_cosmic.scss +++ b/src/framework/theme/styles/themes/_cosmic.scss @@ -146,6 +146,8 @@ $theme: ( badge-info-bg-color: color-info, badge-warning-bg-color: color-warning, badge-danger-bg-color: color-danger, + + spinner-bg: rgba(61, 55, 128, 0.9), ); // register the theme diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 84c6d0b365..c6c625d2d7 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -532,6 +532,25 @@ $theme: ( chat-success-bg: color-success, chat-warning-bg: color-warning, chat-danger-bg: color-danger, + + spinner-bg: rgba(255, 255, 255, 0.83), + spinner-circle-bg: color-bg-active, + spinner-fg: color-fg-text, + spinner-active-bg: color-fg, + spinner-disabled-bg: color-disabled, + spinner-disabled-fg: color-fg, + spinner-primary-bg: color-primary, + spinner-info-bg: color-info, + spinner-success-bg: color-success, + spinner-warning-bg: color-warning, + spinner-danger-bg: color-danger, + spinner-xxsmall: 1.25rem, + spinner-xsmall: 1.5rem, + spinner-small: 1.75rem, + spinner-medium: 2rem, + spinner-large: 2.25rem, + spinner-xlarge: 2.5rem, + spinner-xxlarge: 3rem, ); // register the theme diff --git a/src/playground/playground-routing.module.ts b/src/playground/playground-routing.module.ts index ec6b66366a..ec072996b5 100644 --- a/src/playground/playground-routing.module.ts +++ b/src/playground/playground-routing.module.ts @@ -110,6 +110,11 @@ import { NbChatDropComponent } from './chat/chat-drop.component'; import { NbChatMessageTypesShowcaseComponent } from './chat/chat-message-types-showcase.component'; import { NbChatConversationShowcaseComponent } from './chat/chat-conversation-showcase.component'; import { NbChatTestComponent } from './chat/chat-test.component'; +import { NbSpinnerCardComponent } from './spinner/spinner-card.component'; +import { NbSpinnerButtonComponent } from './spinner/spinner-button.component'; +import { NbSpinnerTabsComponent } from './spinner/spinner-tabs.component'; +import { NbSpinnerSizesComponent } from './spinner/spinner-sizes.component'; +import { NbSpinnerColorsComponent } from './spinner/spinner-colors.component'; export const routes: Routes = [ { @@ -166,6 +171,31 @@ export const routes: Routes = [ }, ], }, + { + path: 'spinner', + children: [ + { + path: 'spinner-card.component', + component: NbSpinnerCardComponent, + }, + { + path: 'spinner-tabs.component', + component: NbSpinnerTabsComponent, + }, + { + path: 'spinner-button.component', + component: NbSpinnerButtonComponent, + }, + { + path: 'spinner-sizes.component', + component: NbSpinnerSizesComponent, + }, + { + path: 'spinner-colors.component', + component: NbSpinnerColorsComponent, + }, + ], + }, { path: 'card', children: [ diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts index 484ed2879d..43681f88f1 100644 --- a/src/playground/playground.module.ts +++ b/src/playground/playground.module.ts @@ -25,6 +25,7 @@ import { NbProgressBarModule, NbAlertModule, NbChatModule, + NbSpinnerModule, } from '@nebular/theme'; import { NbPlaygroundRoutingModule } from './playground-routing.module'; @@ -134,6 +135,11 @@ import { NbChatDropComponent } from './chat/chat-drop.component'; import { NbChatMessageTypesShowcaseComponent } from './chat/chat-message-types-showcase.component'; import { NbChatConversationShowcaseComponent } from './chat/chat-conversation-showcase.component'; import { NbChatTestComponent } from './chat/chat-test.component'; +import { NbSpinnerCardComponent } from './spinner/spinner-card.component'; +import { NbSpinnerTabsComponent } from './spinner/spinner-tabs.component'; +import { NbSpinnerButtonComponent } from './spinner/spinner-button.component'; +import { NbSpinnerSizesComponent } from './spinner/spinner-sizes.component'; +import { NbSpinnerColorsComponent } from './spinner/spinner-colors.component'; export const NB_MODULES = [ NbCardModule, @@ -158,6 +164,7 @@ export const NB_MODULES = [ NbChatModule.forChild({ messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY', }), + NbSpinnerModule, ]; export const NB_EXAMPLE_COMPONENTS = [ @@ -259,6 +266,11 @@ export const NB_EXAMPLE_COMPONENTS = [ NbChatMessageTypesShowcaseComponent, NbChatConversationShowcaseComponent, NbChatTestComponent, + NbSpinnerCardComponent, + NbSpinnerTabsComponent, + NbSpinnerButtonComponent, + NbSpinnerSizesComponent, + NbSpinnerColorsComponent, ]; diff --git a/src/playground/spinner/spinner-button.component.ts b/src/playground/spinner/spinner-button.component.ts new file mode 100644 index 0000000000..af624315c1 --- /dev/null +++ b/src/playground/spinner/spinner-button.component.ts @@ -0,0 +1,62 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-app-spinner-button', + template: ` + + +
+ + + + + + + + + + + +
+ + + `, + styles: [` + :host .button-container { + margin: 1rem; + } + `], +}) +export class NbSpinnerButtonComponent { + + loading = false; + + toggleLoadingAnimation() { + this.loading = true; + setTimeout(() => this.loading = false, 3000); + } +} diff --git a/src/playground/spinner/spinner-card.component.ts b/src/playground/spinner/spinner-card.component.ts new file mode 100644 index 0000000000..953ee1c853 --- /dev/null +++ b/src/playground/spinner/spinner-card.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-app-spinner-card', + template: ` + + Spinners + +

+ A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object. +

+ + + + + `, +}) +export class NbSpinnerCardComponent { + + loading = false; + + toggleLoadingAnimation() { + this.loading = true; + setTimeout(() => this.loading = false, 3000); + } +} diff --git a/src/playground/spinner/spinner-colors.component.html b/src/playground/spinner/spinner-colors.component.html new file mode 100644 index 0000000000..78f6ef3e84 --- /dev/null +++ b/src/playground/spinner/spinner-colors.component.html @@ -0,0 +1,42 @@ + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + diff --git a/src/playground/spinner/spinner-colors.component.ts b/src/playground/spinner/spinner-colors.component.ts new file mode 100644 index 0000000000..a8ad33d534 --- /dev/null +++ b/src/playground/spinner/spinner-colors.component.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-spinner-colors', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './spinner-colors.component.html', +}) +export class NbSpinnerColorsComponent { +} diff --git a/src/playground/spinner/spinner-sizes.component.html b/src/playground/spinner/spinner-sizes.component.html new file mode 100644 index 0000000000..ad2099fc97 --- /dev/null +++ b/src/playground/spinner/spinner-sizes.component.html @@ -0,0 +1,41 @@ + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + diff --git a/src/playground/spinner/spinner-sizes.component.ts b/src/playground/spinner/spinner-sizes.component.ts new file mode 100644 index 0000000000..0fc3749170 --- /dev/null +++ b/src/playground/spinner/spinner-sizes.component.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-spinner-sizes', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './spinner-sizes.component.html', +}) +export class NbSpinnerSizesComponent { +} diff --git a/src/playground/spinner/spinner-tabs.component.ts b/src/playground/spinner/spinner-tabs.component.ts new file mode 100644 index 0000000000..f34d5410bc --- /dev/null +++ b/src/playground/spinner/spinner-tabs.component.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-app-spinner-tabs', + template: ` + + + + + +

+ A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object. +

+ + + +

+ Nebular's primary goal is to assemble together and connect the most awesome features and libraries + creating an efficient ecosystem to speed up and simplify the development. +

+ + + + + + `, + styles: [` + :host nb-tab { + padding: 1.25rem; + } + `], +}) +export class NbSpinnerTabsComponent { + + loading = false; + + toggleLoadingAnimation() { + this.loading = true; + setTimeout(() => this.loading = false, 20000) + } +}